:root {
    --bg: #F4F8F5;
    --card: #FFFFFF;
    --text: #263238;
    --muted: #6B777C;
    --border: #D8E2DA;
    --primary: #1E6E3E;
    --primary-hover: #103D2D;
    --secondary: #5B8A68;
    --secondary-hover: #386748;
    --accent: #4CAF50;
    --accent-hover: #3E9342;
    --danger: #C95C5C;
    --neutral: #7B8589;
    --family-bg: #E8F4E8;
    --family-accent: #1E6E3E;
    --kids-bg: #DDEAF7;
    --kids-accent: #416E9D;
    --adult-bg: #E9E1F2;
    --adult-accent: #70548F;
    --shopping-bg: #FFF8E8;
    --last-bg: #EEF0F1;
    --tonight-bg: #FFF1D7;
    --tomorrow-bg: #E5F1ED;
}

/* v1.1.1.91 — Icon system infrastructure (Batch 1).
   .mc-icon wraps an inline SVG included via the icon() macro in
   templates/_icon.html. The SVG's own stroke="currentColor" inherits
   the surrounding text/link color automatically (normal, hover, active,
   disabled all propagate with no extra CSS); its accent fill stays
   var(--theme-accent, #b9e79a) from the SVG file itself. Signed-in users
   may supply that variable centrally on the document root. */
.mc-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.mc-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.mc-icon--nav { width: 20px; height: 20px; }
.mc-icon--heading { width: 28px; height: 28px; }
.mc-icon--action { width: 18px; height: 18px; }

.account-appearance-section {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}
.account-accent-picker {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
}
.account-accent-preview {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--account-accent-preview, #b9e79a);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(25,52,38,.22);
}
.account-accent-copy { display: grid; gap: 2px; min-width: 0; }
.account-accent-copy small { color: var(--muted); }
.account-accent-native-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}
.account-accent-choose {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.account-accent-choose:focus-within {
    outline: 3px solid rgba(31,117,73,.28);
    outline-offset: 2px;
}
.account-accent-mode-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: .001;
}
@media (max-width: 680px) {
    .account-accent-picker { grid-template-columns: auto minmax(0, 1fr); }
    .account-accent-choose,.account-accent-reset { width: 100%; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
a { color: inherit; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px max(16px, env(safe-area-inset-left));
    background: rgba(244,248,245,.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
}
.brand, .home-link { text-decoration: none; font-weight: 800; }
.brand { font-size: 18px; }
.home-link {
    background: var(--secondary);
    color: white;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
}
.page { width: min(760px, 100%); margin: 0 auto; padding: 18px 14px 50px; }
.hero, .heading { text-align: center; padding: 14px 0 18px; }
.hero-icon, .big-icon { font-size: 42px; }
.hero h1, .heading h1 { margin: 5px 0; font-size: clamp(30px, 8vw, 42px); }
.hero p, .heading p { margin: 0; color: var(--muted); }
.compact-hero { padding-bottom: 10px; }
.card, .dinner-card, .recipe-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 4px 14px rgba(38,50,56,.05);
}
.pp-back-link {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 6px;
}

/* Parental Controls (Chores / Rewards & Wallet / Guardian Settings)
   form and card polish. Reuses this file's existing design language --
   .card, .btn, .section-label, .form-card's grid-stacking, and
   .meal-category-checks' bordered-pill pattern -- rather than inventing
   a separate visual system for this one feature. */

/* Every checkbox/radio in this file previously needed its OWN local
   width override (.eater-choice, .meal-category-checks) to escape the
   base input{width:100%} rule above, which stretches a checkbox to fill
   its container and visually detaches it from its label. Making the
   sane native size the DEFAULT here fixes every checkbox/radio in the
   app that didn't already carry a local override (there was never a
   page that WANTED a full-width checkbox), without touching any
   existing override, which still wins by the same specificity/source-
   order it always did. */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    height: auto;
}

.pp-form-section {
    display: grid;
    gap: 8px;
}
.pp-form-section + .pp-form-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.pp-form-section-title {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

.pp-inline-field {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pp-inline-field input {
    width: auto;
    flex: 0 0 90px;
}
.pp-inline-field span {
    color: var(--muted);
    font-weight: 700;
}

.pp-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}
.pp-check-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 800;
    cursor: pointer;
    background: var(--card);
}
.pp-check-pill input {
    flex: 0 0 auto;
    margin: 0;
}
.pp-check-pill-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.pp-check-pill-text small {
    font-weight: 600;
    color: var(--muted);
    white-space: normal;
}
.pp-check-pill:has(input:checked) {
    border-color: var(--primary);
    background: #EAF3EC;
}
.pp-check-pill.pp-check-pill-wide {
    grid-column: 1 / -1;
}

.pp-details {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 4px 16px;
    margin-top: 12px;
}
.pp-details[open] {
    padding-bottom: 16px;
}
.pp-details summary {
    font-weight: 900;
    cursor: pointer;
    list-style: none;
    padding: 14px 0;
}
.pp-details summary::-webkit-details-marker { display: none; }
.pp-details summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 8px;
    transition: transform .15s ease;
}
.pp-details[open] summary::before {
    transform: rotate(90deg);
}
.pp-details > .pp-form-section:first-of-type,
.pp-details > form:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pp-dependent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}
.pp-stat-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pp-stat-pill {
    background: #F1F6F2;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 800;
    color: #3A4A40;
    white-space: nowrap;
}
.pp-stat-pill.pp-stat-pill-frozen {
    background: #F6DEDE;
    color: #7A3232;
}

.pp-management-card {
    border-top: 4px solid var(--primary);
}
.pp-management-eyebrow {
    display: block;
    color: var(--primary);
    margin-bottom: 4px;
}

/* Persistent Parental Controls sub-navigation (Chores | Rewards & Wallet
   | Settings), styled identically to the app's existing .meal-toggle
   segmented-tab pattern (same pill container, same active-tab treatment)
   so it reads as the same kind of control, not a new one. Unlike
   .meal-toggle's fixed 3-column grid, this uses flex so it still looks
   right with only 2 tabs (Settings is hidden for anyone who can't use
   it). */
.pp-subnav {
    display: flex;
    gap: 4px;
    background: #E7EFE9;
    padding: 4px;
    border-radius: 14px;
    margin: 0 0 16px;
}
.pp-subnav a {
    flex: 1 1 0;
    text-decoration: none;
    text-align: center;
    padding: 10px 12px;
    border-radius: 11px;
    font-weight: 900;
    font-size: 14px;
    color: var(--muted);
    white-space: nowrap;
}
.pp-subnav a.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(38,50,56,.08);
}
@media (max-width: 480px) {
    .pp-subnav {
        overflow-x: auto;
    }
    .pp-subnav a {
        flex: 1 1 auto;
    }
}

/* Compact assignee/member picker pills: a single line (checkbox, name,
   optional role tag pushed to the far right), never a permanent
   explanatory subtext on every card. */
.pp-role-tag {
    margin-left: auto;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    white-space: nowrap;
    padding-left: 8px;
}

/* Chore assignee picker: its own grid/card, deliberately separate from
   the general-purpose .pp-check-grid/.pp-check-pill (used for weekday
   pills, toggle checkboxes, etc.) because a member name plus a role
   badge needs more breathing room than a short single-word pill -- at
   .pp-check-grid's 110px column minimum, real STAGING showed the
   checkbox, name, and role tag visibly colliding. A wider minimum
   (never below 190px) fixes that outright; the name itself additionally
   truncates with an ellipsis rather than ever wrapping into the badge,
   as a second line of defense for an unusually long display name. Roughly
   3-4 columns fit at typical desktop card widths; an explicit 2-column
   step below tablet width keeps mobile from collapsing to a single
   narrow column while every card stays wide enough for name + badge. */
.pp-assignee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
}
@media (max-width: 640px) {
    .pp-assignee-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.pp-assignee-card {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 800;
    cursor: pointer;
    background: var(--card);
}
.pp-assignee-card input {
    flex: 0 0 auto;
    margin: 0;
}
.pp-assignee-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pp-assignee-card:has(input:checked) {
    border-color: var(--primary);
    background: #EAF3EC;
}

/* Guardian-grant scope picker: exactly two option cards, always
   equal-width on desktop (not an auto-fill pill grid, which at only two
   items left them narrow with room to spare) -- radio + title on one
   line, explanatory text on its own line underneath so nothing wraps
   word-by-word inside a cramped column. */
.pp-scope-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (max-width: 480px) {
    .pp-scope-grid {
        grid-template-columns: 1fr;
    }
}
.pp-scope-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    background: var(--card);
}
.pp-scope-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}
.pp-scope-card-head input {
    flex: 0 0 auto;
    margin: 0;
}
.pp-scope-card-desc {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}
.pp-scope-card:has(input:checked) {
    border-color: var(--primary);
    background: #EAF3EC;
}

.dinner-grid { display: grid; gap: 12px; margin-bottom: 16px; }
.dinner-card { text-align: center; }
.dinner-card.last { background: var(--last-bg); }
.dinner-card.tonight { background: var(--tonight-bg); }
.dinner-card.tomorrow { background: var(--tomorrow-bg); }
.dinner-card h2 { margin: 7px 0 12px; font-size: 22px; }
.eyebrow, .section-label, .recipe-type, .meal-label {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}
.empty { color: var(--muted); font-style: italic; }
.menu-card { display: grid; gap: 10px; margin-bottom: 18px; }
.btn {
    appearance: none;
    border: 0;
    display: block;
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    color: white;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
}
.btn.primary { background: var(--primary); }
.btn.secondary { background: var(--secondary); }
.btn.accent { background: var(--accent); }
.btn.danger { background: var(--danger); }
.btn.neutral { background: var(--neutral); }
.btn.small { width: auto; display: inline-block; padding: 9px 13px; font-size: 14px; }
.btn.compact { width: auto; display: inline-block; padding: 9px 13px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: default; }
.text-action { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
.rotation { text-align: center; padding: 6px 0; }
.section-label { color: var(--muted); margin-bottom: 8px; }
.flash {
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 12px;
    font-weight: 700;
}
.flash.success { background: #DDEFE6; }
.flash.error { background: #F6DEDE; }
.flash.info { background: #DDEAF7; }
.search { display: flex; gap: 8px; margin-bottom: 14px; }
.search input { flex: 1; min-width: 0; }
.recipe-list { display: grid; gap: 10px; margin-bottom: 14px; }
.recipe-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.recipe-card h2 { margin: 4px 0; font-size: 19px; }
.recipe-card p { margin: 0; color: var(--muted); font-size: 13px; }
.recipe-card.family { background: var(--family-bg); border-color: var(--family-accent); }
.recipe-card.kids { background: var(--kids-bg); border-color: var(--kids-accent); }
.recipe-card.adults { background: var(--adult-bg); border-color: var(--adult-accent); }
.recipe-detail h3 { color: var(--primary); margin-bottom: 8px; }
.recipe-detail li { margin: 7px 0; }
.recipe-detail hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
.instructions { white-space: pre-wrap; line-height: 1.55; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0 9px; }
.button-row form { margin: 0; }
.form-card { display: grid; gap: 8px; }
.form-card label { font-weight: 800; margin-top: 8px; }
input, textarea, select {
    width: 100%;
    border: 1px solid #CFC9BF;
    border-radius: 10px;
    padding: 12px;
    background: white;
    color: var(--text);
    font: inherit;
}
textarea { resize: vertical; }
/*
 * WebKit computes box-sizing:content-box for input[type=date]/type=time
 * regardless of any author override, and an explicit width:100% (the
 * base rule above) resolves against that content-box's content edge,
 * overflowing the field by its own padding+border. width:auto instead
 * takes the default grid/flex "stretch" sizing, which WebKit computes
 * correctly against the control's outer size -- the same fix proven on
 * Family Schedule's Start/End fields (see schedule_form.html for the
 * full investigation). The last two selectors override two containers
 * whose own `input{width:100%}` rule matches this specificity and would
 * otherwise win by source order.
 */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
.calendar-reminder-time-block input[type="time"],
.request-action-details input[type="date"] {
    width: auto;
    inline-size: auto;
    min-width: 0;
    max-width: 100%;
}
.hint { color: var(--muted); font-size: 12px; margin-top: -5px; }
.form-card .btn { margin-top: 12px; }
.planner-form input { text-align: center; font-size: 18px; }
.planner-field-group { border: 1px solid var(--border, #d7e1da); border-radius: 12px; padding: .8rem; margin: .75rem 0; background: #f8fbf9; display: grid; gap: 8px; }
.planner-field-group legend { font-weight: 900; padding: 0 .3rem; }
.surprise-card { text-align: center; display: grid; gap: 10px; }
.surprise-card h2 { font-size: 30px; margin: 4px 0 10px; }
.surprise-card form { margin: 0; }
.divider { height: 1px; background: var(--border); margin: 8px 0; }
.day-card { margin-bottom: 12px; }
.day-card h2 { margin: 5px 0 12px; }
.meal-strip {
    display: block;
    padding: 12px;
    margin-top: 7px;
    border-radius: 12px;
    text-decoration: none;
}
.meal-strip strong { display: block; margin-top: 3px; font-size: 17px; }
.meal-strip.family { background: var(--family-bg); }
.meal-strip.kids { background: var(--kids-bg); }
.meal-strip.adults { background: var(--adult-bg); }
.shopping-card { background: var(--shopping-bg); margin-top: 16px; }
.shopping-card h2 { margin-top: 0; }
.shopping-card > p { color: var(--muted); }
.shopping-list { display: grid; gap: 9px; }
.check-item { display: flex; align-items: center; gap: 10px; }
.check-item input { width: 20px; height: 20px; flex: 0 0 auto; }
.check-item:has(input:checked) span { text-decoration: line-through; color: var(--muted); }
.controls { display: grid; gap: 9px; margin-top: 12px; }
.controls form { margin: 0; }
.saved-badge { text-align: center; font-weight: 900; color: var(--primary); }
footer { text-align: center; color: var(--muted); font-size: 12px; padding: 0 0 28px; }

@media (min-width: 680px) {
    .dinner-grid { grid-template-columns: repeat(3, 1fr); }
    .menu-card { grid-template-columns: 1fr 1fr; }
}

.top-actions { display: flex; align-items: center; gap: 8px; }
.top-actions form { margin: 0; }
.top-text-link { font-size: 13px; color: var(--muted); text-decoration: none; font-weight: 700; }
.logout-button {
    appearance: none; border: 0; background: transparent; color: var(--muted);
    font-weight: 700; cursor: pointer; padding: 8px 4px;
}
.auth-wrap { max-width: 480px; margin: 28px auto; text-align: center; }
.auth-wrap h1 { margin-bottom: 6px; }
.auth-wrap > p { color: var(--muted); line-height: 1.45; }
.auth-card { margin-top: 18px; text-align: left; }
.user-list { display: grid; gap: 10px; margin-top: 14px; }
.user-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.muted { color: var(--muted); font-size: 13px; margin-top: 3px; }
.tiny-note { color: var(--accent); font-size: 12px; margin-top: 5px; font-weight: 700; }
@media (max-width: 600px) {
    .top-text-link { display: none; }
    .top-actions { gap: 5px; }
    .logout-button { font-size: 12px; }
}

.meal-toggle{width:min(760px,calc(100% - 28px));margin:12px auto 0;background:#E7EFE9;padding:4px;border-radius:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.meal-toggle a{text-decoration:none;text-align:center;padding:10px 12px;border-radius:11px;font-weight:900;color:var(--muted)}
.meal-toggle a.active{background:white;color:var(--primary);box-shadow:0 2px 8px rgba(38,50,56,.08)}
.entry-badge{display:inline-block;font-size:11px;font-weight:900;background:rgba(255,255,255,.65);border-radius:999px;padding:4px 8px;margin:0 5px 8px 0}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:7px}.segmented label{margin:0}.segmented input{display:none}
.segmented span{display:block;text-align:center;padding:11px;border:1px solid var(--border);border-radius:11px;background:#F1F6F2;cursor:pointer}
.segmented input:checked+span{background:var(--primary);color:white;border-color:var(--primary)}
.optional{font-weight:400;color:var(--muted);font-size:12px}.meal-strip.lunch{background:#FFF1D7}

.cart-link {
    background: var(--accent);
    color: white;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
    text-decoration: none;
    font-weight: 800;
}
.cart-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    background: #E7EFE9;
    padding: 4px;
    border-radius: 14px;
    margin-bottom: 14px;
}
.cart-filters a {
    text-decoration: none;
    text-align: center;
    padding: 10px 8px;
    border-radius: 10px;
    color: var(--muted);
    font-weight: 900;
}
.cart-filters a.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(38,50,56,.08);
}
.cart-tools {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
}
.cart-tools form { margin: 0; }
.cart-add-form {
    display: grid;
    grid-template-columns: 1fr 170px auto;
    gap: 8px;
}
.shopping-live-card { padding: 8px 16px; margin-bottom: 12px; }
.live-cart-list { display: grid; }
.live-cart-row {
    display: grid;
    grid-template-columns: 42px 1fr 36px;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.live-cart-row:last-child { border-bottom: 0; }
.live-cart-row.checked .cart-item-name {
    text-decoration: line-through;
    color: var(--muted);
}
.cart-toggle-form { margin: 0; }
.cart-check {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 2px solid var(--primary);
    background: white;
    color: white;
    font-weight: 900;
    font-size: 20px;
    cursor: pointer;
}
.live-cart-row.checked .cart-check { background: var(--primary); }
.cart-item-name { font-size: 16px; font-weight: 800; }
.cart-meta { color: var(--muted); font-size: 11px; margin-top: 3px; }
.cart-delete {
    border: 0;
    background: transparent;
    color: var(--danger);
    font-size: 25px;
    cursor: pointer;
}
.cart-empty { text-align: center; padding: 30px 10px; color: var(--muted); }
.cart-empty > div { font-size: 40px; }
.cart-empty h3 { color: var(--text); margin-bottom: 4px; }
@media (max-width: 600px) {
    .cart-add-form { grid-template-columns: 1fr; }
    .cart-link { padding: 8px 9px; font-size: 12px; }
}

.surprise-context-card {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}
.surprise-context-card h3 {
    text-align: center;
    margin: 2px 0 6px;
}
.surprise-context-card form {
    margin: 0;
}


.calendar-link {
    background: #48785B;
    color: white;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
    text-decoration: none;
    font-weight: 800;
}

.calendar-toolbar {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
/* Sticky below the site topbar (desktop): the whole toolbar has room to
   stay visible while scrolling a long month. Mirrors the topbar's own
   --staging-banner-height stacking technique (see body.is-staging rules
   near the bottom of this file) so it lines up correctly in both the
   normal and STAGING-banner cases. Mobile overrides this back to static
   below -- the full toolbar is too tall to keep permanently on screen on
   a phone; only .calendar-nav/.print-title/.calendar-weekday-row stay
   sticky there instead (see the (max-width:760px) block). */
.calendar-toolbar {
    position: sticky;
    top: var(--app-topbar-height, 68px);
    z-index: 15;
    background: var(--bg);
    padding-top: 8px;
}
body.is-staging .calendar-toolbar {
    top: calc(var(--staging-banner-height, 37px) + var(--app-topbar-height, 68px));
}

.calendar-view-toggle {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    background: #E7EFE9;
    border-radius: 12px;
    padding: 4px;
}
.calendar-view-toggle a {
    padding: 8px 15px;
    border-radius: 9px;
    text-decoration: none;
    color: var(--muted);
    font-weight: 900;
    text-align: center;
}
.calendar-view-toggle a.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 2px 7px rgba(38,50,56,.08);
}

.calendar-nav {
    display: flex;
    justify-content: center;
    gap: 7px;
}

.calendar-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* Hidden on desktop -- the larger .print-title heading below already
   shows the current month/year there. Revealed only in the compact
   mobile sticky nav (see (max-width:760px) below), where .print-title
   itself isn't sticky and this is the only "what am I looking at while
   scrolled" cue. */
.calendar-nav-title {
    display: none;
}

.print-title {
    text-align: center;
    margin: 6px 0 14px;
}
.print-title h1 {
    margin-bottom: 2px;
}
.print-title p {
    margin-top: 0;
    color: var(--muted);
}

.calendar-shell {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: white;
}
.calendar-weekday-row,
.calendar-week-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-weekday-row {
    background: var(--primary);
    color: white;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
}
.calendar-weekday-row > div {
    padding: 8px 4px;
    border-right: 1px solid rgba(255,255,255,.18);
}
.calendar-weekday-row > div:last-child { border-right: 0; }

.calendar-day {
    min-height: 128px;
    padding: 8px;
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border);
    background: white;
}
.calendar-week-row:first-of-type .calendar-day { border-top: 0; }
.calendar-day:last-child { border-right: 0; }
.calendar-shell.week .calendar-day { min-height: 215px; }
.calendar-day.outside-month { background: #F5F3EE; opacity: .62; }
.calendar-day.today { box-shadow: inset 0 0 0 2px var(--accent); }

.calendar-date {
    font-weight: 900;
    text-align: right;
    color: var(--text);
    margin-bottom: 7px;
}
.mobile-weekday { display: none; }

.calendar-meal {
    border-radius: 8px;
    padding: 6px;
    margin-top: 6px;
    min-height: 44px;
    font-size: 12px;
}
.calendar-meal.lunch { background: #FFF1D7; }
.calendar-meal.dinner { background: #E7F3EF; }
.calendar-meal-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 900;
    margin-bottom: 3px;
}
.calendar-meal a,
.calendar-meal strong {
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    line-height: 1.25;
}
.calendar-empty { color: #AAA; }

@media (max-width: 760px) {
    .calendar-link { padding: 8px 9px; font-size: 12px; }
    /* Keep the complete Calendar control bar available while scrolling.
       The toolbar itself must be sticky; a sticky child cannot remain pinned
       once a non-sticky parent has scrolled away. */
    .calendar-toolbar {
        grid-template-columns: 1fr;
        position: sticky;
        top: var(--app-topbar-height, 68px);
        z-index: 40;
        padding: 7px 10px;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        gap: 7px;
    }
    body.is-staging .calendar-toolbar {
        top: calc(var(--staging-banner-height, 37px) + var(--app-topbar-height, 68px));
    }
    .calendar-print-btn {
        display: none !important;
    }
    .calendar-nav {
        justify-content: stretch;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        position: static;
        background: transparent;
        margin: 0;
        padding: 0;
        gap: 6px;
    }
    .calendar-nav-title {
        display: block;
        grid-column: 1 / -1;
        text-align: center;
        font-weight: 900;
        font-size: 15px;
        margin-bottom: 2px;
    }
    .print-title {
        display: none;
    }
    /* Month keeps a real 7-column grid on mobile (see the .calendar-modern
       rules below, which govern the actual rendered calendar) -- only
       Week collapses to a single-column day list here, since a 7-day
       week already has room for full detail per row. */
    .calendar-shell.week .calendar-weekday-row { display: none; }
    .calendar-shell.week .calendar-week-row {
        display: grid;
        grid-template-columns: 1fr;
    }
    .calendar-shell.week .calendar-day {
        min-height: 0;
        border-right: 0;
        border-top: 1px solid var(--border);
        display: grid;
        grid-template-columns: 72px 1fr 1fr;
        gap: 7px;
        align-items: stretch;
    }
    .calendar-shell.week .calendar-date {
        text-align: left;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .calendar-shell.week .mobile-weekday {
        display: inline;
        font-size: 11px;
        color: var(--muted);
    }
    .calendar-shell.week .calendar-meal {
        margin: 0;
    }
}

@media print {
    @page {
        size: landscape;
        margin: 0.35in;
    }

    body {
        background: white !important;
        font-size: 10pt;
    }

    .topbar,
    .app-sidebar,
    .staging-environment-banner,
    .meal-toggle,
    .no-print,
    footer,
    .flash,
    .calendar-heading {
        display: none !important;
    }

    .page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .print-title {
        display: block;
        margin: 0 0 8px !important;
    }
    .print-title h1 {
        font-size: 18pt;
        margin: 0;
    }
    .print-title p {
        font-size: 9pt;
        margin: 2px 0 0;
    }

    .calendar-shell {
        border-radius: 0;
        overflow: visible !important;
    }

    .calendar-week-row {
        break-inside: avoid;
    }

    .calendar-weekday-row,
    .calendar-week-row {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
    }

    .calendar-weekday-row {
        background: #eee !important;
        color: #111 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .calendar-day,
    .calendar-shell.week .calendar-day {
        display: block !important;
        min-height: 0 !important;
        height: 1.35in;
        padding: 5px;
        opacity: 1 !important;
    }

    .calendar-shell.week .calendar-day {
        height: 2.6in;
    }

    .calendar-date {
        text-align: right !important;
        margin-bottom: 4px !important;
    }

    .mobile-weekday { display: none !important; }

    .calendar-meal {
        min-height: 0;
        padding: 4px;
        margin-top: 4px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .calendar-meal a {
        color: #111 !important;
        text-decoration: none !important;
    }

    .calendar-day.outside-month {
        background: #f3f3f3 !important;
    }
}


.today-date {
    margin-top: 7px;
    font-size: 13px;
    font-weight: 800;
    color: var(--primary);
}

@media print {
    /* Preserve all Month content when printing. Busy weeks may continue
       onto another page rather than clipping meals or Family Events. */
    .calendar-shell.month .calendar-day {
        height: auto !important;
        min-height: 0.92in !important;
        overflow: visible !important;
        padding: 3px 4px !important;
    }

    .calendar-shell.month .calendar-meal {
        padding: 2px 4px !important;
        margin-top: 2px !important;
        font-size: 8pt !important;
        line-height: 1.05 !important;
    }

    .calendar-shell.month .calendar-meal-label {
        font-size: 6.5pt !important;
        margin-bottom: 1px !important;
    }

    .calendar-shell.month .calendar-date {
        font-size: 8pt !important;
        margin-bottom: 2px !important;
    }

    .calendar-shell.month .calendar-weekday-row > div {
        padding: 4px 2px !important;
        font-size: 8pt !important;
    }

    .calendar-shell.month + * {
        break-before: avoid;
    }
}


.recipe-import-card {
    margin-bottom: 14px;
    display: grid;
    gap: 12px;
}
.import-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.import-heading h2 {
    margin: 0 0 4px;
}
.import-heading p {
    margin: 0;
    color: var(--muted);
}
.free-local-badge {
    flex: 0 0 auto;
    background: #E7F3EF;
    color: var(--primary);
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 900;
}
.import-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.import-file-button {
    cursor: pointer;
    margin: 0;
}
.import-file-button input {
    display: none;
}
.paste-panel {
    display: grid;
    gap: 9px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.paste-panel[hidden],
.ocr-status[hidden],
.import-notice[hidden] {
    display: none !important;
}
.ocr-status {
    background: #F1F6F2;
    border-radius: 11px;
    padding: 11px;
}
.ocr-status-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}
.ocr-status p {
    color: var(--muted);
    font-size: 11px;
    margin: 7px 0 0;
}
.ocr-progress {
    height: 8px;
    background: #DDD7CC;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}
.ocr-progress > div {
    width: 0;
    height: 100%;
    background: var(--primary);
    transition: width .15s ease;
}
.import-notice {
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
}
.import-notice.success {
    background: #DFF2EA;
    color: #246657;
}
.import-notice.warning {
    background: #FFF0CF;
    color: #8A5A00;
}

@media (max-width: 600px) {
    .import-heading {
        display: grid;
    }
    .free-local-badge {
        justify-self: start;
    }
    .import-actions {
        grid-template-columns: 1fr;
    }
}

.import-actions-three {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 700px) {
    .import-actions-three {
        grid-template-columns: 1fr;
    }
}


.family-pill {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 112px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #F1F6F2;
    text-decoration: none;
    line-height: 1.1;
}
.family-name {
    color: var(--primary);
    font-weight: 900;
    font-size: 13px;
}
.family-user {
    color: var(--muted);
    font-size: 10px;
    margin-top: 2px;
}

.family-name-edit {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}
.family-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.family-section-heading h2,
.family-section-heading p {
    margin: 0;
}
.family-section-heading p {
    color: var(--muted);
    margin-top: 3px;
}
.family-member-list {
    display: grid;
}
.family-member-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}
.family-member-row:first-child {
    border-top: 0;
}
.member-meta {
    color: var(--muted);
    font-size: 11px;
    margin-top: 3px;
}
.member-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.member-actions form {
    margin: 0;
}
.family-account-card {
    margin-top: 14px;
}
.form-hint {
    color: var(--muted);
    font-size: 12px;
    margin-top: -4px;
}
.field-error {
    color: var(--danger);
    font-size: 12px;
    font-weight: 700;
    margin-top: -4px;
}

.schedule-page-heading-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.calendar-feed-card { margin-top: 14px; }
/* Matches the existing sticky-topbar offset convention (see
   .family-member-row:target / #shared-family-today) so a deep link -- e.g.
   the Calendar Sharing discovery card -- lands with the section heading
   visible instead of scrolled behind the sticky header. */
#calendar-integration { scroll-margin-top: 120px; }
.calendar-feed-privacy-notice {
    background: var(--tonight-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
}
.calendar-feed-link-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.calendar-feed-link-value {
    display: block;
    padding: 10px 12px;
    background: #F1F6F2;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 12px;
    word-break: break-all;
    user-select: all;
}
.calendar-feed-app-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.calendar-feed-instructions { margin-top: 10px; display: grid; gap: 6px; }
.calendar-feed-instructions p { margin: 0; font-size: 12px; color: var(--muted); }
.calendar-feed-status {
    font-size: 13px;
    font-weight: 700;
    padding: 8px 0;
}
.calendar-feed-status-active { color: var(--primary); }
.calendar-feed-status-off { color: var(--muted); font-weight: 400; }
.calendar-feed-self-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.calendar-feed-self-actions form { margin: 0; }
.calendar-feed-admin-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.calendar-feed-admin-section h3 { margin: 0 0 4px; font-size: 14px; }
.calendar-feed-member-list { display: grid; margin-top: 8px; }
.calendar-feed-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}
.calendar-feed-member-row:first-child { border-top: 0; }
.calendar-feed-member-row span:first-child { flex: 1; }
.calendar-feed-member-row form { margin: 0; }
.calendar-feed-member-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
}
.calendar-feed-member-badge-active { background: var(--family-bg); color: var(--family-accent); }
.calendar-feed-member-badge-off { background: var(--bg); color: var(--muted); }

@media (max-width: 600px) {
    .calendar-feed-link-row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .family-pill {
        min-width: 0;
        padding: 6px 8px;
    }
    .family-name {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .family-section-heading,
    .family-member-row {
        align-items: stretch;
        display: grid;
    }
    .member-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .family-name-edit {
        grid-template-columns: 1fr;
    }
}

.request-alert {
    display:block; margin:0 auto 14px; max-width:520px; padding:10px 14px;
    border-radius:12px; background:#fff1d6; text-align:center; font-weight:800;
    text-decoration:none; color:var(--text);
}
.readonly-request-home { display:block; max-width:520px; margin:0 auto 14px; text-align:center; }
.request-list { margin-top:14px; }
.request-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px 0; border-top:1px solid var(--border); }
.request-row:first-child { border-top:0; }
.request-note { margin-top:5px; }
.readonly-hidden { display:none !important; }
.role-form select { min-width:150px; }
@media(max-width:720px){ .request-row{display:grid;align-items:stretch;} }

.family-pill .family-name,
.family-pill .family-user {
    display: block;
    text-decoration: none;
}
.family-pill .family-name:hover,
.family-pill .family-user:hover {
    text-decoration: underline;
}

.signup-divider { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; margin:12px auto; max-width:520px; }
.signup-divider::before,.signup-divider::after { content:""; flex:1; border-top:1px solid var(--border); }
.invite-code-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.invite-code { display:block; padding:12px; background:#F1F6F2; border:1px solid var(--border); border-radius:10px; font-size:18px; font-weight:900; letter-spacing:.08em; text-align:center; user-select:all; }
.family-invite-card { margin-top:14px; }
@media(max-width:600px){ .invite-code-row{grid-template-columns:1fr;} }


.admin-family-list {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}
.admin-family-card {
    padding: 0;
    overflow: hidden;
}
.admin-family-heading {
    padding: 14px 16px;
    background: #F1F6F2;
    border-bottom: 1px solid var(--border);
}
.admin-family-heading h2,
.admin-family-heading p {
    margin: 0;
}
.admin-family-heading h2 {
    font-size: 18px;
}
.admin-family-heading p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}
.admin-family-members {
    padding: 0 16px;
}
.admin-user-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid var(--border);
}
.admin-user-row:first-child {
    border-top: 0;
}
.admin-user-row form {
    margin: 0;
}
@media (max-width: 700px) {
    .admin-user-row {
        display: grid;
        align-items: stretch;
    }
}


.admin-search-card {
    margin-top: 14px;
    margin-bottom: 14px;
}
.admin-search-card label {
    display: block;
    margin-bottom: 6px;
    font-weight: 900;
}
.admin-search-card input[type="search"] {
    width: 100%;
}
.admin-search-empty {
    text-align: center;
    margin-top: 14px;
}
.admin-search-empty p {
    color: var(--muted);
    margin-bottom: 0;
}


.roadmap-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.roadmap-tab {
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 900;
    background: #E7EFE9;
    color: var(--muted);
}
.roadmap-tab.active {
    background: var(--primary);
    color: white;
}
.roadmap-panel {
    display: none;
}
.roadmap-panel.active {
    display: block;
}
.roadmap-summary-card {
    margin-bottom: 12px;
    text-align: center;
}
.roadmap-summary-card h2,
.roadmap-summary-card p {
    margin: 0;
}
.roadmap-summary-card p {
    margin-top: 4px;
    color: var(--muted);
}
.roadmap-section {
    margin-bottom: 12px;
}
.roadmap-section h2 {
    margin-top: 0;
    color: var(--primary);
}
.roadmap-section h3 {
    margin-bottom: 6px;
}
.roadmap-content p {
    margin: 6px 0;
    line-height: 1.45;
}
.roadmap-bullet {
    padding: 4px 0 4px 4px;
    line-height: 1.4;
}
.roadmap-section.completed h2 {
    color: #246657;
}
@media (max-width: 650px) {
    .roadmap-tabs {
        grid-template-columns: 1fr;
    }
}


.calendar-meal.breakfast { background: #FDEED7; }

@media (max-width: 760px) {
    .calendar-day,
    .calendar-shell.week .calendar-day {
        grid-template-columns: 72px 1fr 1fr 1fr;
    }
}

@media print {
    .calendar-shell.month .calendar-meal {
        font-size: 7pt !important;
        padding: 1px 3px !important;
        margin-top: 1px !important;
    }
    .calendar-shell.month .calendar-meal-label {
        font-size: 5.8pt !important;
    }
}


.cart-sync-hint {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}
.cart-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 650px) {
    .cart-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


.cart-bulk-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.cart-bulk-actions form {
    margin: 0;
}
.cart-bulk-actions .btn {
    width: 100%;
}
@media (max-width: 650px) {
    .cart-bulk-actions {
        grid-template-columns: 1fr;
    }
}


.admin-user-activity {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
}
.activity-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: #98A2A5;
    margin-right: 2px;
}
.admin-user-activity.online-now {
    color: var(--primary);
}
.admin-user-activity.online-now .activity-dot {
    background: var(--primary);
}
.activity-login {
    color: var(--muted);
}


.conflict-list h2 { margin-top: 0; }
.plan-conflict-row { padding: 12px 0; border-top: 1px solid var(--border); }
.plan-conflict-row:first-of-type { border-top: 0; }
.conflict-date { font-weight: 900; margin-bottom: 6px; }
.conflict-meals { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; }
.conflict-label { display:block; color:var(--muted); font-size:11px; margin-bottom:3px; }
.conflict-arrow { color:var(--muted); font-weight:900; }
.conflict-actions { display:grid; gap:10px; }
.conflict-actions form { margin:0; }
.conflict-actions form p { color:var(--muted); font-size:11px; margin:5px 0 0; }
.conflict-actions .btn { width:100%; }
@media (max-width:650px) {
    .conflict-meals { grid-template-columns:1fr; }
    .conflict-arrow { transform:rotate(90deg); justify-self:start; }
}


.preference-card h3 { margin:0; }
.preference-card p { color:var(--muted); margin:4px 0 12px; font-size:12px; }
.preference-title-row { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.favorite-badge { white-space:nowrap; font-weight:900; color:#A83B54; background:#FBE5EA; border-radius:999px; padding:6px 10px; }
.rating-stars { display:flex; align-items:center; flex-wrap:wrap; gap:2px; margin:8px 0 14px; }
.rating-stars .star-choice input { position:absolute; opacity:0; pointer-events:none; }
.rating-stars .star-choice span { font-size:30px; line-height:1; cursor:pointer; color:#C9C1B4; }
.rating-stars .star-choice.selected-star span { color:#E2A629; }
.no-rating { margin-left:8px; font-size:11px; color:var(--muted); }
.favorite-check { display:flex; align-items:center; gap:8px; font-weight:800; margin:0 0 14px; }
.favorite-check input { width:18px; height:18px; }
.inline-favorite { color:#A83B54; }
.mini-rating { color:#B77B12; letter-spacing:1px; }
.idea-filter-row { display:flex; gap:8px; margin:8px 0 12px; flex-wrap:wrap; }


.family-ratings-card h3 {
    margin: 0;
}
.family-ratings-heading p {
    margin: 4px 0 10px;
    color: var(--muted);
    font-size: 12px;
}
.family-rating-list {
    display: grid;
}
.family-rating-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.family-rating-row:first-child {
    border-top: 0;
}
.family-rating-row.my-family-rating {
    background: #F7FAF8;
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px;
}
.family-rating-person {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.you-badge {
    font-size: 9px;
    font-weight: 900;
    color: var(--primary);
    background: #E9F1EF;
    padding: 2px 6px;
    border-radius: 999px;
}
.family-favorite-heart {
    color: #A83B54;
    font-size: 10px;
    font-weight: 900;
}
.family-rating-stars {
    white-space: nowrap;
}
.filled-stars {
    color: #B77B12;
    letter-spacing: 1px;
}
.empty-stars {
    color: #C9C1B4;
    letter-spacing: 1px;
}
.rating-number {
    margin-left: 5px;
    color: var(--muted);
    font-size: 10px;
}
.not-rated {
    color: var(--muted);
    font-size: 11px;
    font-style: italic;
}
.family-card-rating {
    color: var(--muted);
    font-size: 11px;
    margin-top: -4px;
}
@media (max-width: 600px) {
    .family-rating-row {
        align-items: flex-start;
        display: grid;
    }
}


.planner-unrated-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-weight: 800;
}
.planner-unrated-option input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}


.recipes-link {
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    font-weight: 700;
}
.meal-category-checks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
}
.meal-category-checks label {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    font-weight: 800;
}
.meal-category-checks input {
    width: 18px;
    height: 18px;
}
.choice-method-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.choice-method-card {
    text-decoration: none;
    color: inherit;
    text-align: center;
}
/* Pick Existing Meal/Quick Tonight/Surprise Me/Discover have no content of
   their own to stretch to their grid row's height (that row height is
   dictated by whichever neighbor is tallest -- e.g. Pick Existing Meal
   shares a row with the much taller Type Something form), so their short
   icon/title/description block was left stranded at the top of a much
   taller card instead of reading as centered like the others. Centers it
   within the card's own (grid-stretched) height. Excludes Type Something/
   Create & Schedule explicitly so their form/eater controls and button
   layout stay exactly as they are, not just relying on the more-specific
   .calendar-type-card/.calendar-create-card rule below to win the cascade. */
.choice-method-card:not(.calendar-type-card):not(.calendar-create-card) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.choice-method-card h2 {
    margin: 5px 0;
}
.choice-method-card p {
    color: var(--muted);
    margin-bottom: 0;
}
.choice-method-icon {
    font-size: 34px;
}
.current-meal-choice {
    text-align: center;
    margin-bottom: 12px;
}
.recipe-period-filters {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 5px;
    background: #E7EFE9;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 12px;
}
.recipe-period-filters a {
    text-align: center;
    text-decoration: none;
    font-weight: 900;
    color: var(--muted);
    padding: 9px 6px;
    border-radius: 9px;
}
.recipe-period-filters a.active {
    background: white;
    color: var(--primary);
}
@media (max-width: 600px) {
    .recipes-link {
        font-size: 12px;
    }
    .choice-method-grid {
        grid-template-columns: 1fr;
    }
    .meal-category-checks {
        grid-template-columns: 1fr;
    }
    .recipe-period-filters {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}


.rating-stars .star-choice.selected-star span {
    color: #E2A629 !important;
}
.rating-stars .star-choice span {
    transition: color .08s ease-in-out, transform .08s ease-in-out;
}
.rating-stars .star-choice:hover span {
    transform: scale(1.08);
}


.recipe-filter-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    margin: 9px 2px 5px;
}
.recipe-rating-filters {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 5px;
    background: #E7EFE9;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 12px;
}
.recipe-rating-filters a {
    text-align: center;
    text-decoration: none;
    font-weight: 900;
    color: var(--muted);
    padding: 8px 5px;
    border-radius: 9px;
    font-size: 11px;
}
.recipe-rating-filters a.active {
    background: white;
    color: var(--primary);
}
.rating-save-status {
    color: var(--muted);
    font-size: 11px;
    font-style: italic;
    margin-top: -4px;
}
@media (max-width: 650px) {
    .recipe-rating-filters {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}


.request-new-button {
    margin-bottom: 12px;
}
.request-section-heading h2 {
    margin: 0;
}
.request-section-heading p {
    margin: 4px 0 12px;
    color: var(--muted);
    font-size: 12px;
}
.popular-request-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
}
.popular-request-card {
    background: #F7FAF8;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
}
.popular-request-card strong {
    display: block;
    margin-bottom: 4px;
}
.popular-request-card small {
    color: var(--muted);
}
.request-v2-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}
.request-v2-row:first-of-type {
    border-top: 0;
}
.request-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.request-status {
    border-radius: 999px;
    padding: 3px 7px;
    font-size: 9px;
    font-weight: 900;
}
.request-status.pending { background:#FFF0D7; color:#8A5A13; }
.request-status.approved { background:#DDF2E9; color:#236B58; }
.request-status.moved { background:#DDEAF7; color:#3F668A; }
.request-status.declined { background:#F8DEDE; color:#9C3D3D; }
.request-voting {
    display: flex;
    gap: 7px;
    margin-top: 10px;
}
.request-voting form {
    margin: 0;
}
.vote-button {
    border: 1px solid var(--border);
    background: white;
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
    font-weight: 800;
}
.vote-button.selected {
    background: #DDF2E9;
    border-color: #78B7A5;
}
.vote-button.selected.negative {
    background: #F8DEDE;
    border-color: #D89090;
}
.request-admin-actions {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.request-admin-actions form {
    margin: 0;
}
.request-action-details {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
}
.request-action-details summary {
    cursor: pointer;
    font-weight: 800;
    font-size: 13px;
}
.request-action-details form {
    display: grid;
    gap: 6px;
    margin-top: 7px;
}
.request-action-details input {
    width: 100%;
}
.request-history-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--border);
}
.request-history-row:first-of-type {
    border-top: 0;
}
.request-moved-note,
.request-decision-note {
    margin-top: 4px;
    font-size: 11px;
    color: var(--muted);
}
.request-decision-note {
    font-style: italic;
}
.history-vote-summary {
    white-space: nowrap;
    color: var(--muted);
    font-size: 11px;
}
.request-conflict-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.request-conflict-card h2 {
    margin: 5px 0;
}
@media (max-width: 700px) {
    .popular-request-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .request-v2-row {
        grid-template-columns: 1fr;
    }
    .request-history-row {
        display: grid;
    }
    .request-conflict-card {
        grid-template-columns: 1fr;
    }
    .request-conflict-card .conflict-arrow {
        transform: rotate(90deg);
    }
}


.friends-link {
    font-size:13px;
    color:var(--muted);
    text-decoration:none;
    font-weight:700;
}
.share-recipe-option {
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:800;
    margin-top:8px;
}
.share-recipe-option input {
    width:18px;
    height:18px;
}
.recipe-sharing-badge {
    max-width:760px;
    margin:0 auto 8px;
    border-radius:999px;
    padding:6px 10px;
    text-align:center;
    font-size:11px;
    font-weight:900;
}
.recipe-sharing-badge.shared {
    background:#DDF2E9;
    color:#236B58;
}
.recipe-sharing-badge.private {
    background:#EFE7DD;
    color:#725C47;
}
.connect-family-form {
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
}
.friend-connection-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-top:1px solid var(--border);
}
.friend-connection-row:first-of-type {
    border-top:0;
}
.friend-connection-row form {
    margin:0;
}
.shared-family-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:12px;
}
.shared-dinner-row {
    display:grid;
    grid-template-columns:130px 1fr;
    gap:14px;
    padding:11px 0;
    border-top:1px solid var(--border);
}
.shared-dinner-row:first-child {
    border-top:0;
}
.shared-dinner-date {
    font-weight:900;
}
.shared-dinner-meal {
    display:flex;
    justify-content:space-between;
    gap:10px;
}
.shared-dinner-meal a {
    color:var(--primary);
    font-weight:800;
}
@media (max-width:700px) {
    .friends-link { font-size:12px; }
    .connect-family-form { grid-template-columns:1fr; }
    .friend-connection-row { display:grid; }
    .shared-family-actions { grid-template-columns:1fr; }
    .shared-dinner-row { grid-template-columns:1fr; gap:3px; }
    .shared-dinner-meal { display:grid; }
}


.shared-month-toolbar {
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:10px;
    align-items:center;
    margin-bottom:12px;
}
.shared-month-title {
    text-align:center;
    font-size:18px;
    font-weight:900;
}
.shared-dinner-row.shared-today {
    background:#F7FAF8;
    margin-left:-8px;
    margin-right:-8px;
    padding-left:8px;
    padding-right:8px;
    border-radius:8px;
}
@media (max-width:600px) {
    .shared-month-toolbar {
        grid-template-columns:1fr 1fr;
    }
    .shared-month-title {
        grid-column:1 / -1;
        grid-row:1;
    }
}


.ingredients-link {
    font-size:13px;
    color:var(--muted);
    text-decoration:none;
    font-weight:700;
}
.waste-reason {
    display:block;
    margin-top:4px;
    color:#34725F;
    font-size:10px;
    font-weight:800;
}
.ingredient-help h2 {
    margin-top:0;
}
.ingredient-help p {
    color:var(--muted);
    margin-bottom:0;
}
.ingredient-toolbar {
    display:grid;
    gap:9px;
    margin-bottom:12px;
}
.ingredient-filters {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
    background:#E7EFE9;
    padding:4px;
    border-radius:12px;
}
.ingredient-filters a {
    text-align:center;
    text-decoration:none;
    font-weight:900;
    font-size:10px;
    color:var(--muted);
    padding:8px 4px;
    border-radius:8px;
}
.ingredient-filters a.active {
    background:white;
    color:var(--primary);
}
.ingredient-list {
    display:grid;
    gap:9px;
}
.ingredient-row {
    margin:0;
}
.ingredient-name-row {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
}
.ingredient-display-name {
    font-size:16px;
    font-weight:900;
}
.auto-badge {
    background:#E8EEF4;
    color:#56738D;
    border-radius:999px;
    padding:3px 7px;
    font-size:9px;
    font-weight:900;
}
.ingredient-settings-grid {
    display:grid;
    grid-template-columns:1fr 140px 1.35fr 150px 1fr;
    gap:8px;
    align-items:end;
    margin-bottom:10px;
}
.ingredient-check {
    display:flex;
    align-items:center;
    gap:7px;
    min-height:42px;
}
.ingredient-check input {
    width:18px;
    height:18px;
}
@media (max-width:850px) {
    .ingredient-settings-grid {
        grid-template-columns:1fr 1fr;
    }
}
@media (max-width:650px) {
    .ingredients-link { font-size:12px; }
    .ingredient-filters {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .ingredient-settings-grid {
        grid-template-columns:1fr;
    }
}


.updates-link {
    font-size:13px;
    color:var(--muted);
    text-decoration:none;
    font-weight:700;
}
.updates-hero {
    margin-bottom:12px;
}
.public-updates-tabs {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    background:#E7EFE9;
    padding:4px;
    border-radius:13px;
    margin-bottom:16px;
}
.public-updates-tab {
    border:0;
    background:transparent;
    border-radius:10px;
    padding:10px;
    font-weight:900;
    color:var(--muted);
    cursor:pointer;
}
.public-updates-tab.active {
    background:white;
    color:var(--primary);
    box-shadow:0 1px 5px rgba(0,0,0,.06);
}
.public-updates-panel {
    display:none;
}
.public-updates-panel.active {
    display:block;
}
.updates-date-group {
    margin-bottom:24px;
}
.updates-date-heading {
    display:flex;
    align-items:center;
    gap:9px;
    margin:5px 2px 10px;
}
.updates-date-heading h2 {
    margin:0;
    font-size:18px;
}
.updates-date-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 0 4px #DDECE8;
}
.updates-feature-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.public-feature-card {
    margin:0;
    display:grid;
    grid-template-columns:42px 1fr;
    gap:10px;
}
.public-feature-icon {
    width:42px;
    height:42px;
    border-radius:12px;
    background:#F3EEE6;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}
.public-feature-content h3 {
    margin:0 0 4px;
}
.connect-content .public-feature-content h2 {
    margin:0 0 4px;
}
.connect-content .public-feature-card {
    gap:14px;
}
.connect-content .public-feature-icon {
    background:transparent;
}
.connect-content .public-feature-icon img {
    display:block;
    width:32px;
    height:32px;
    object-fit:contain;
}
/* Connect is also public: center its shell when there is no sidebar. */
@media (min-width:901px) {
    main.page:has(.connect-public),
    body:has(.connect-public) footer {
        width:min(var(--content-width-narrow),calc(100% - 28px));
        margin-left:auto;
        margin-right:auto;
    }
}
.public-feature-summary {
    color:var(--muted);
    margin:0 0 9px;
    font-size:12px;
    line-height:1.45;
}
.public-feature-details {
    display:grid;
    gap:5px;
}
.public-feature-bullet {
    font-size:11px;
    line-height:1.4;
}
.coming-soon-intro {
    text-align:center;
}
.coming-soon-intro h2 {
    margin:4px 0;
}
.coming-soon-intro p {
    color:var(--muted);
    margin-bottom:0;
}
.coming-soon-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.teaser-card {
    margin:0;
    min-height:86px;
    display:flex;
    align-items:center;
    gap:10px;
}
.teaser-card h3 {
    margin:0;
}
.teaser-spark {
    color:var(--primary);
    font-size:20px;
}
@media (max-width:700px) {
    .updates-link { font-size:12px; }
    .updates-feature-grid,
    .coming-soon-grid {
        grid-template-columns:1fr;
    }
    .public-feature-card {
        grid-template-columns:36px 1fr;
    }
    .public-feature-icon {
        width:36px;
        height:36px;
        font-size:19px;
    }
}


.smart-shopping-explainer h2{margin-top:0}
.smart-shopping-explainer p{color:var(--muted);margin-bottom:0}
.smart-cart-row{align-items:flex-start}
.shopping-source-recipes{margin-top:4px;color:var(--muted);font-size:10px;line-height:1.35}
.shopping-quantity-summary{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:7px;font-size:11px}
.bought-amount-form{display:grid;grid-template-columns:auto 92px 95px auto;gap:6px;align-items:center;margin-top:8px}
.bought-amount-form label{margin:0;font-size:10px;font-weight:900;color:var(--muted)}
.bought-amount-form input{min-width:0;padding:7px}
.typical-package-form{margin:3px 0 0}
.link-button{border:0;background:transparent;color:var(--primary);font-size:10px;font-weight:800;padding:0;cursor:pointer;text-align:left}
.package-utilization{margin-top:7px;padding:6px 8px;border-radius:8px;font-size:10px;line-height:1.35}
.package-utilization.good-use{background:#DDF2E9;color:#236B58}
.package-utilization.leftover-warning{background:#FFF0D7;color:#855B1C}
.package-utilization.over-needed{background:#F8DEDE;color:#943F3F}
.package-utilization.projected{background:#EEF2F4;color:#5E7078}
@media(max-width:650px){
 .bought-amount-form{grid-template-columns:1fr 1fr}
 .bought-amount-form label{grid-column:1/-1}
 .bought-amount-form .btn{grid-column:1/-1}
}


.recipe-library-actions {
    margin-bottom:12px;
}
.imported-recipe-preview {
    display:grid;
    grid-template-columns:120px 1fr;
    gap:12px;
    align-items:center;
}
.imported-recipe-image {
    width:120px;
    height:90px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid var(--border);
}
.import-source-url {
    word-break:break-all;
    color:var(--muted);
    font-size:11px;
}
@media(max-width:600px){
    .imported-recipe-preview {
        grid-template-columns:1fr;
    }
    .imported-recipe-image {
        width:100%;
        height:180px;
    }
}


.recipe-sharing-control {
    margin-top: 8px;
}
.recipe-sharing-control form {
    margin: 0;
}
.import-actions-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.import-url-button {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 760px) {
    .import-actions-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


.tag-presets {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:6px;
}
.tag-preset-button {
    border:1px solid var(--border);
    background:#F7FAF8;
    color:var(--muted);
    border-radius:999px;
    padding:5px 8px;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
}
.tag-preset-button:hover {
    color:var(--primary);
    border-color:#A9CFC4;
}
.recipe-tag-filter-wrap {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-bottom:11px;
}
.recipe-tag-filter {
    text-decoration:none;
    border:1px solid var(--border);
    border-radius:999px;
    padding:6px 9px;
    color:var(--muted);
    background:#F7FAF8;
    font-size:10px;
    font-weight:900;
}
.recipe-tag-filter span {
    opacity:.65;
    margin-left:3px;
}
.recipe-tag-filter.active {
    background:var(--primary);
    color:white;
    border-color:var(--primary);
}
.recipe-library-sort-row {
    display:grid;
    grid-template-columns:auto minmax(170px,260px);
    justify-content:end;
    align-items:center;
    gap:7px;
    margin-bottom:10px;
}
.recipe-library-sort-row label {
    margin:0;
    font-size:10px;
    font-weight:900;
    color:var(--muted);
}
.recipe-card-tags,
.recipe-detail-tags {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}
.recipe-card-tags {
    margin:4px 0 7px;
}
.recipe-card-tags a,
.recipe-card-tags span,
.recipe-detail-tags span {
    border-radius:999px;
    background:#E7F1EE;
    color:#28715E;
    padding:4px 7px;
    font-size:9px;
    font-weight:900;
    text-decoration:none;
}
.recipe-detail-tags {
    max-width:760px;
    margin:0 auto 8px;
    justify-content:center;
}
@media(max-width:650px) {
    .recipe-library-sort-row {
        grid-template-columns:1fr;
    }
}


.pantry-link,.make-link {
    font-size:13px;
    color:var(--muted);
    text-decoration:none;
    font-weight:700;
}
.pantry-add-grid {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:10px;
}
.pantry-add-grid .btn {
    grid-column:1 / -1;
}
.pantry-actions,.make-page-actions {
    display:flex;
    gap:8px;
    margin:10px 0;
}
.pantry-list {
    display:grid;
}
.pantry-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:10px 0;
    border-top:1px solid var(--border);
}
.pantry-row:first-child {
    border-top:0;
}
.pantry-qty {
    display:inline-block;
    margin-left:8px;
    color:var(--muted);
    font-size:11px;
}
.make-filter-grid {
    display:grid;
    grid-template-columns:1fr 1fr 1fr auto;
    gap:8px;
    align-items:end;
}
.make-filter-grid label {
    margin:0;
}
.make-summary {
    text-align:center;
    color:var(--muted);
    margin:10px 0 14px;
}
.make-results {
    display:grid;
    gap:10px;
}
.make-card {
    margin:0;
}
.make-card-top {
    display:flex;
    justify-content:space-between;
    gap:10px;
}
.make-card h2 {
    margin:5px 0 3px;
}
.match-badge {
    display:inline-block;
    border-radius:999px;
    padding:4px 8px;
    font-size:9px;
    font-weight:900;
}
.match-badge.missing-0 {
    background:#DDF2E9;
    color:#236B58;
}
.match-badge.missing-1 {
    background:#E5EEF8;
    color:#466B8E;
}
.match-badge:not(.missing-0):not(.missing-1) {
    background:#FFF0D7;
    color:#855B1C;
}
.make-rating {
    font-weight:900;
    color:#B77710;
    white-space:nowrap;
}
.match-section {
    margin-top:10px;
}
.ingredient-chip-wrap {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:5px;
}
.ingredient-chip-wrap span {
    border-radius:999px;
    padding:4px 7px;
    font-size:9px;
    font-weight:800;
}
.ingredient-chip-wrap.good span {
    background:#E7F1EE;
    color:#28715E;
}
.ingredient-chip-wrap.missing span {
    background:#F8E7E7;
    color:#994444;
}
.use-up-note {
    margin-top:10px;
    padding:7px 8px;
    border-radius:8px;
    background:#EFF5E8;
    color:#5B7442;
    font-size:10px;
    font-weight:800;
}
@media(max-width:800px) {
    .pantry-add-grid,
    .make-filter-grid {
        grid-template-columns:1fr;
    }
    .pantry-link,.make-link {
        font-size:12px;
    }
}


.recipe-last-made-filters {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-bottom:11px;
}
.recipe-last-made-filters a {
    text-decoration:none;
    border:1px solid var(--border);
    border-radius:999px;
    padding:6px 9px;
    color:var(--muted);
    background:#F7FAF8;
    font-size:10px;
    font-weight:900;
}
.recipe-last-made-filters a.active {
    background:var(--primary);
    color:white;
    border-color:var(--primary);
}
.last-made-card {
    margin:7px 0 0;
    font-size:10px;
    color:#60737A;
}
.last-made-card.never {
    color:#8A6A35;
}
.last-made-detail {
    display:inline-block;
    margin-top:6px;
    border-radius:999px;
    padding:5px 9px;
    background:#E7F1EE;
    color:#28715E;
    font-size:10px;
    font-weight:700;
}
.last-made-detail.never {
    background:#FFF0D7;
    color:#855B1C;
}


.backup-status-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:10px;
}
.backup-status-card {
    margin:0;
}
.backup-status-card h2,
.backup-primary-actions h2,
.backup-restore-warning h2 {
    margin-top:0;
}
.backup-health {
    display:inline-block;
    border-radius:999px;
    padding:5px 8px;
    font-size:10px;
    font-weight:900;
}
.backup-health.good {
    background:#DDF2E9;
    color:#236B58;
}
.backup-health.bad {
    background:#F8DEDE;
    color:#943F3F;
}
.backup-primary-actions {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}
.backup-primary-actions p,
.backup-restore-warning p {
    color:var(--muted);
    margin-bottom:0;
}
.backup-upload-form {
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    align-items:center;
}
.backup-restore-warning {
    border:1px solid #E6C889;
    background:#FFF9EA;
}
.backup-list-heading h2 {
    margin-bottom:3px;
}
.backup-list-heading p {
    margin-top:0;
    color:var(--muted);
}
.backup-list {
    display:grid;
}
.backup-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:12px 0;
    border-top:1px solid var(--border);
}
.backup-row:first-child {
    border-top:0;
}
.backup-file-info strong {
    word-break:break-all;
}
.backup-row-actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:5px;
}
.backup-restore-panel {
    grid-column:1 / -1;
    background:#FFF3F1;
    border:1px solid #E8C3C0;
    border-radius:10px;
    padding:10px;
}
.backup-restore-panel p {
    color:var(--muted);
}
.backup-restore-panel form {
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    align-items:end;
}
.backup-restore-panel label {
    margin:0;
}
@media(max-width:760px) {
    .backup-status-grid,
    .backup-upload-form,
    .backup-restore-panel form {
        grid-template-columns:1fr;
    }
    .backup-primary-actions {
        display:grid;
    }
    .backup-row {
        grid-template-columns:1fr;
    }
    .backup-row-actions {
        justify-content:flex-start;
    }
}


/* ------------------------------------------------------------
   Top navigation cleanup: keep System Admin tools visually separate
   from normal family/app navigation.
   ------------------------------------------------------------ */
.topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.topbar-left {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex-shrink:0;
}

.admin-tools {
    display:flex;
    align-items:center;
    gap:3px;
    padding:3px 5px;
    border:1px solid #D8E2DA;
    border-radius:9px;
    background:#EDF3EF;
    white-space:nowrap;
}

.admin-tools-label {
    padding:4px 6px 4px 4px;
    color:#7A736A;
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
    border-right:1px solid #D2CBC0;
}

.admin-tools a {
    color:#58636A;
    text-decoration:none;
    font-size:10px;
    font-weight:800;
    padding:5px 6px;
    border-radius:6px;
}

.admin-tools a:hover {
    background:white;
    color:var(--primary);
}

.top-actions {
    margin-left:auto;
}

@media (max-width: 1180px) {
    .admin-tools-label {
        display:none;
    }
}

@media (max-width: 900px) {
    .topbar {
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .topbar-left {
        width:100%;
        justify-content:space-between;
    }

    .admin-tools {
        margin-left:auto;
    }

    .top-actions {
        width:100%;
        margin-left:0;
    }
}

@media (max-width: 520px) {
    .topbar-left {
        align-items:flex-start;
        gap:8px;
    }

    .admin-tools {
        flex-wrap:wrap;
        justify-content:flex-end;
    }

    .admin-tools a {
        font-size:9px;
        padding:4px 5px;
    }
}


/* ============================================================
   Mobile navigation
   ============================================================ */
.mobile-menu-button,
.mobile-menu {
    display:none;
}

@media (max-width: 900px) {
    .topbar {
        flex-wrap:nowrap !important;
        align-items:center !important;
        padding:10px 14px;
    }

    .topbar-left {
        width:auto !important;
        flex:1;
        justify-content:flex-start !important;
    }

    .topbar-left .admin-tools,
    .desktop-navigation {
        display:none !important;
    }

    .brand {
        white-space:nowrap;
    }

    .mobile-menu-button {
        display:flex;
        align-items:center;
        justify-content:center;
        gap:5px;
        border:1px solid #D2DED5;
        border-radius:10px;
        background:#EDF3EF;
        color:#334148;
        padding:8px 10px;
        font-weight:900;
        cursor:pointer;
        flex-shrink:0;
    }

    .mobile-menu-button.open {
        background:var(--primary);
        color:white;
        border-color:var(--primary);
    }

    .mobile-menu {
        display:block;
        position:relative;
        z-index:50;
        background:#F5F8F6;
        border-bottom:1px solid var(--border);
        box-shadow:0 8px 16px rgba(0,0,0,.08);
    }

    .mobile-menu[hidden] {
        display:none !important;
    }

    .mobile-menu-inner {
        padding:10px 14px 14px;
        display:grid;
        gap:9px;
    }

    .mobile-menu-group {
        border:1px solid var(--border);
        background:white;
        border-radius:12px;
        padding:9px;
    }

    .mobile-menu-group h3 {
        margin:0 0 7px;
        font-size:12px;
        color:#34444A;
    }

    .mobile-menu-links {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6px;
    }

    .mobile-menu-links a {
        display:flex;
        align-items:center;
        min-height:42px;
        padding:8px 9px;
        border-radius:9px;
        background:#F4F8F5;
        color:#46545A;
        text-decoration:none;
        font-size:11px;
        font-weight:800;
    }

    .mobile-admin-group {
        background:#F1F6F2;
        border-color:#D2DED5;
    }

    .mobile-admin-group .mobile-menu-links a {
        background:#E6EEE8;
    }

    .mobile-logout-button {
        width:100%;
        margin-top:7px;
    }
}

@media (max-width: 420px) {
    .mobile-menu-links {
        grid-template-columns:1fr;
    }

    .brand span {
        font-size:18px;
    }
}

/* ============================================================
   System Admin dashboard
   ============================================================ */
.admin-dashboard-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-bottom:10px;
}

.dashboard-stat {
    margin:0;
    text-align:center;
}

.dashboard-stat-icon {
    font-size:23px;
}

.dashboard-stat-number {
    font-size:30px;
    line-height:1.05;
    font-weight:900;
    color:#26363D;
    margin-top:4px;
}

.dashboard-stat-label {
    margin-top:4px;
    font-size:12px;
    font-weight:900;
}

.dashboard-stat-sub {
    margin-top:3px;
    color:var(--muted);
    font-size:10px;
}

.dashboard-explanation h2 {
    margin-top:0;
}

.dashboard-definition-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.dashboard-definition-grid p {
    color:var(--muted);
    font-size:11px;
    line-height:1.45;
    margin-bottom:0;
}

.dashboard-two-column {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.dashboard-two-column > .card {
    margin-top:0;
}

.dashboard-list {
    display:grid;
}

.dashboard-list-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:9px 0;
    border-top:1px solid var(--border);
    font-size:11px;
}

.dashboard-list-row:first-child {
    border-top:0;
}

.dashboard-list-row > span {
    color:var(--muted);
    text-align:right;
}

.dashboard-list-row > span.online-now {
    color:#24755F;
    font-weight:900;
}

.dashboard-family-table {
    overflow-x:auto;
}

.dashboard-family-row {
    min-width:580px;
    display:grid;
    grid-template-columns:minmax(200px,2fr) repeat(4,minmax(70px,1fr));
    gap:8px;
    align-items:center;
    padding:8px 5px;
    border-top:1px solid var(--border);
    font-size:11px;
}

.dashboard-family-header {
    border-top:0;
    background:#F0F5F1;
    border-radius:8px;
    font-weight:900;
}

@media (max-width:800px) {
    .admin-dashboard-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dashboard-definition-grid,
    .dashboard-two-column {
        grid-template-columns:1fr;
    }
}

@media (max-width:480px) {
    .admin-dashboard-grid {
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .dashboard-stat {
        padding:10px 7px;
    }

    .dashboard-stat-number {
        font-size:25px;
    }
}


/* ============================================================
   Version / Changelog
   ============================================================ */
.app-version-card {
    max-width:760px;
    margin:0 auto 10px;
    padding:12px 15px;
    background:linear-gradient(135deg,#F4EFE7,#FFFFFF);
}

.app-version-main {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.app-version-eyebrow {
    color:var(--muted);
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}

.app-version-number {
    color:var(--primary);
    font-size:30px;
    font-weight:900;
    line-height:1.05;
}

.app-version-meta {
    display:grid;
    text-align:right;
    gap:2px;
}

.app-version-meta strong {
    font-size:13px;
}

.app-version-meta span {
    color:var(--muted);
    font-size:10px;
}

.recent-changes-card {
    max-width:760px;
    margin:0 auto 13px;
}

.recent-changes-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:4px;
}

.recent-changes-heading h2 {
    margin:0;
}

.recent-changes-heading p {
    color:var(--muted);
    margin:3px 0 0;
    font-size:10px;
}

.recent-changes-list {
    display:grid;
}

.recent-change-row {
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:8px;
    align-items:start;
    padding:9px 0;
    border-top:1px solid var(--border);
}

.recent-change-row:first-child {
    border-top:0;
}

.recent-change-icon {
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#F0F5F1;
    font-size:16px;
}

.recent-change-row strong {
    font-size:11px;
}

.recent-change-row p {
    margin:2px 0 0;
    color:var(--muted);
    font-size:10px;
    line-height:1.4;
}

.mobile-version-note {
    margin-top:7px;
    text-align:center;
    color:var(--muted);
    font-size:9px;
}

footer {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.footer-version {
    color:var(--primary);
    font-size:9px;
    font-weight:800;
    text-decoration:none;
    opacity:.85;
}

.footer-version:hover {
    text-decoration:underline;
}

@media(max-width:600px) {
    .app-version-main,
    .recent-changes-heading {
        align-items:flex-start;
    }

    .app-version-meta {
        text-align:right;
    }

    .app-version-number {
        font-size:26px;
    }
}


/* ============================================================
   Public landing page / logged-out navigation
   ============================================================ */
.public-top-actions {
    display:flex;
    align-items:center;
    gap:7px;
    margin-left:auto;
}
.public-updates-link {
    color:#56656B;
    text-decoration:none;
    font-size:10px;
    font-weight:850;
    padding:6px 7px;
}
.public-updates-link:hover { color:var(--primary); }

.public-hero {
    max-width:1050px;
    margin:22px auto 30px;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
    gap:34px;
    align-items:center;
    padding:20px 8px;
}
.public-kicker {
    color:var(--primary);
    font-size:9px;
    font-weight:950;
    letter-spacing:.13em;
    margin-bottom:8px;
}
.public-hero h1 {
    font-size:44px;
    line-height:1.04;
    letter-spacing:-.035em;
    margin:0 0 14px;
    color:#26383F;
}
.public-hero h1 span { color:var(--primary); }
.public-hero-copy > p {
    max-width:620px;
    color:var(--muted);
    font-size:15px;
    line-height:1.6;
}
.public-hero-actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:17px;
}
.public-hero-actions.centered { justify-content:center; }
.public-cta { padding:10px 15px; }
.public-version-line {
    margin-top:11px;
    color:var(--muted);
    font-size:9px;
    font-weight:750;
}
.public-app-preview {
    background:white;
    border:1px solid #D8E2DA;
    border-radius:18px;
    box-shadow:0 18px 45px rgba(52,66,70,.13);
    overflow:hidden;
    transform:rotate(1deg);
}
.preview-top {
    display:flex;
    justify-content:space-between;
    padding:12px 14px;
    background:#F5F8F6;
    font-size:11px;
    font-weight:900;
}
.preview-family { color:var(--primary); }
.preview-periods {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-bottom:1px solid var(--border);
}
.preview-periods span {
    text-align:center;
    padding:9px 5px;
    font-size:10px;
    font-weight:800;
    color:var(--muted);
}
.preview-periods .active {
    color:white;
    background:var(--primary);
}
.preview-tonight {
    display:grid;
    text-align:center;
    padding:22px 12px 18px;
    gap:4px;
}
.preview-tonight small {
    color:var(--muted);
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
}
.preview-tonight strong {
    font-size:23px;
    color:#2C3C42;
}
.preview-tonight span {
    color:#A77C2B;
    font-size:10px;
}
.preview-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    padding:0 12px 12px;
}
.preview-grid div {
    display:flex;
    align-items:center;
    gap:7px;
    background:#F4F8F5;
    border-radius:10px;
    padding:10px;
    font-size:9px;
    font-weight:800;
}
.preview-grid b { font-size:17px; }

.public-section {
    max-width:1050px;
    margin:0 auto 34px;
}
.public-section-heading {
    max-width:720px;
    margin:0 auto 18px;
    text-align:center;
}
.public-section-heading h2,
.public-highlight h2,
.public-final-cta h2 {
    margin:0 0 8px;
    color:#293B42;
    font-size:27px;
}
.public-section-heading p,
.public-highlight p,
.public-final-cta p {
    color:var(--muted);
    line-height:1.55;
}
.public-feature-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
}
.public-feature-card {
    background:white;
    border:1px solid var(--border);
    border-radius:13px;
    padding:14px;
}
.public-feature-icon { font-size:23px; }
.public-feature-card h3 {
    margin:7px 0 5px;
    font-size:12px;
    color:#304148;
}
.public-feature-card p {
    margin:0;
    color:var(--muted);
    font-size:10px;
    line-height:1.5;
}
.public-highlight {
    max-width:950px;
    margin:0 auto 34px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:center;
    padding:22px;
    border-radius:16px;
    background:#EEF4F0;
    border:1px solid #DDD5C9;
}
.public-highlight-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}
.public-highlight-list span {
    background:white;
    border-radius:9px;
    padding:9px;
    font-size:10px;
    font-weight:800;
}
.public-final-cta {
    max-width:760px;
    margin:0 auto 20px;
    text-align:center;
    padding:28px 15px;
}

@media(max-width:850px) {
    .public-hero {
        grid-template-columns:1fr;
        margin-top:8px;
        gap:20px;
    }
    .public-hero h1 { font-size:36px; }
    .public-app-preview {
        max-width:520px;
        width:100%;
        margin:auto;
        transform:none;
    }
    .public-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .public-highlight { grid-template-columns:1fr; }
}
@media(max-width:520px) {
    .public-top-actions .public-updates-link { display:none; }
    .public-top-actions { gap:4px; }
    .public-top-actions .btn { padding:6px 7px; font-size:9px; }
    .public-hero { padding-top:8px; }
    .public-hero h1 { font-size:31px; }
    .public-hero-copy > p { font-size:12px; }
    .public-feature-grid { grid-template-columns:1fr; }
    .public-highlight-list { grid-template-columns:1fr; }
}


/* ============================================================
   v0.9.2 landing-card wrapping fix
   public-feature-card is also used by the Updates page, where it
   intentionally has a 42px icon column. Landing cards do NOT use
   that inner wrapper, so reset them to normal block flow here.
   ============================================================ */
.public-section .public-feature-grid .public-feature-card {
    display:block;
    grid-template-columns:none;
    min-width:0;
}

.public-section .public-feature-grid .public-feature-card .public-feature-icon {
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:8px;
}

.public-section .public-feature-grid .public-feature-card h3,
.public-section .public-feature-grid .public-feature-card p {
    width:100%;
    max-width:none;
    min-width:0;
    overflow-wrap:normal;
    word-break:normal;
    white-space:normal;
}

@media(max-width:850px) {
    .public-section .public-feature-grid .public-feature-card {
        display:block;
    }
}


/* ============================================================
   v0.9.3 Roadmap 2.0 public preview
   ============================================================ */
.roadmap-preview-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.roadmap-preview-card {
    display:block;
    min-height:0;
    padding:14px;
}

.roadmap-preview-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
}

.roadmap-preview-icon {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#F0F5F1;
    font-size:20px;
}

.roadmap-preview-card h3 {
    margin:0 0 6px;
    color:#304148;
    font-size:13px;
}

.roadmap-preview-card p {
    margin:0;
    color:var(--muted);
    font-size:10px;
    line-height:1.5;
}

.roadmap-status {
    border-radius:999px;
    padding:4px 7px;
    font-size:8px;
    font-weight:950;
    letter-spacing:.07em;
    background:#E8EFEA;
    color:#68747A;
}

.roadmap-status.status-next {
    background:#DDF2E9;
    color:#236B58;
}

.roadmap-status.status-big-idea {
    background:#EEE4F7;
    color:#704C8D;
}

.roadmap-status.status-later {
    background:#E7EEF5;
    color:#4E6982;
}

.roadmap-status.status-deferred {
    background:#F3E6E3;
    color:#8B5B52;
}

.roadmap-feedback-note {
    max-width:650px;
    margin:14px auto 0;
    text-align:center;
}

.roadmap-feedback-note h2 {
    margin:4px 0 5px;
}

.roadmap-feedback-note p {
    max-width:540px;
    margin:0 auto;
    color:var(--muted);
    line-height:1.5;
}

@media(max-width:700px) {
    .roadmap-preview-grid {
        grid-template-columns:1fr;
    }
}


/* v0.9.4 — Recipe Library type filtering */
.recipe-type-filters {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    background:#E6EEE8;
    border-radius:10px;
    padding:3px;
    margin-bottom:10px;
}
.recipe-type-filters a {
    text-align:center;
    text-decoration:none;
    color:#657279;
    font-size:10px;
    font-weight:850;
    padding:7px 6px;
    border-radius:8px;
}
.recipe-type-filters a.active {
    background:#FFFFFF;
    color:var(--primary);
    box-shadow:0 1px 4px rgba(50,60,60,.08);
}
@media(max-width:600px) {
    .recipe-type-filters a {
        font-size:9px;
        padding:8px 4px;
    }
}


/* v0.10.0 — Meal Completion Time + Make Soon */
.completion-time-input{display:flex;align-items:center;gap:8px}.completion-time-input input{flex:1;min-width:0}.completion-time-input span{color:var(--muted);font-size:10px;font-weight:800;white-space:nowrap}.meal-time-badge{display:inline-flex;align-items:center;gap:4px;margin:3px 0 5px;padding:4px 7px;border-radius:999px;background:#F0F5F1;color:#59686E;font-size:9px;font-weight:850}.recipe-time-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.recipe-time-filters a{text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:6px 9px;color:#647278;background:#F8FBF9;font-size:9px;font-weight:850}.recipe-time-filters a.active{background:var(--primary);color:white;border-color:var(--primary)}.recipe-card-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch}.recipe-card-actions form{margin:0}.recipe-card-actions .btn{width:100%}.make-soon-detail{display:flex;justify-content:center;margin:8px 0 12px}.make-soon-detail form{width:min(100%,730px)}.make-soon-detail .btn{width:100%}.quick-tonight-banner{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:10px 0;padding:10px 12px;border-radius:11px;background:#FFF1D2;border:1px solid #E6C982;color:#5D522F;font-size:10px}.quick-tonight-banner a{margin-left:auto;color:inherit;font-weight:850}.make-soon-pick-heading{margin:10px 0 5px;color:var(--primary);font-weight:900;font-size:10px}.pick-meal-context,.make-soon-context{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0}.pick-meal-context span,.make-soon-context span{background:#F1F6F2;border-radius:999px;padding:4px 7px;font-size:8px;color:#5D6A70;font-weight:750}.make-soon-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:10px}.make-soon-actions p{margin:4px 0 0;color:var(--muted)}.make-soon-added{font-size:9px;color:var(--muted);margin:5px 0 0}.empty-make-soon{text-align:center}.choice-method-grid{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:700px){.choice-method-grid{grid-template-columns:1fr}.make-soon-actions{align-items:stretch;flex-direction:column}.make-soon-actions form,.make-soon-actions .btn{width:100%}.recipe-card-actions{min-width:105px}}

/* v0.11.0 Shopping Categories */
.ingredient-category-filters{display:flex;flex-wrap:wrap;gap:5px;width:100%}
.ingredient-category-filters a{text-decoration:none;border:1px solid var(--border);background:#F8FBF9;color:#617077;padding:5px 8px;border-radius:999px;font-size:8px;font-weight:850}
.ingredient-category-filters a.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.categorized-cart{display:grid;gap:10px}
.shopping-category-group{padding:0;overflow:hidden}
.shopping-category-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#F0F5F1;border-bottom:1px solid var(--border)}
.shopping-category-heading>div{display:flex;align-items:center;gap:7px}
.shopping-category-heading h2{margin:0;font-size:12px;color:#34464D}
.shopping-category-icon{font-size:18px}
.shopping-category-count{color:var(--muted);font-size:8px;font-weight:850}
.shopping-category-group .live-cart-row:last-child{border-bottom:0}


/* v0.12.0 Ingredient Library Cleanup */
.ingredient-maintenance-actions{display:flex;gap:6px;flex-wrap:wrap}
.ingredient-usage{margin:5px 0 9px;padding:7px 9px;border-radius:9px;background:#F4F8F5;font-size:9px;color:#5D6A70}
.ingredient-used-in-links{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.ingredient-used-in-links a{text-decoration:none;background:#fff;border:1px solid var(--border);border-radius:999px;padding:4px 7px;color:var(--primary);font-weight:800;font-size:8px}
.ingredient-unused-note{display:block;margin-top:4px;color:#8A7772}
.ingredient-delete-form{margin-top:6px}
.ingredient-row-actions{display:flex;gap:6px;align-items:center}
@media(max-width:600px){.ingredient-maintenance-actions{flex-direction:column}.ingredient-maintenance-actions form,.ingredient-maintenance-actions .btn{width:100%}}


/* v0.12.1 — Ingredient "Used In" readability */
.ingredient-usage {
    margin: 8px 0 12px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
}

.ingredient-usage strong {
    font-size: 14px;
}

.ingredient-used-in-links {
    gap: 7px;
    margin-top: 8px;
}

.ingredient-used-in-links a {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.25;
}

.ingredient-unused-note {
    margin-top: 6px;
    font-size: 13px;
}

@media(max-width:600px) {
    .ingredient-usage,
    .ingredient-usage strong {
        font-size: 14px;
    }

    .ingredient-used-in-links a {
        padding: 7px 10px;
        font-size: 12px;
    }

    .ingredient-unused-note {
        font-size: 13px;
    }
}

/* v0.12.7 — Contextual Help Tooltips */
.help-tip{position:relative;display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.help-tip.block{display:flex;width:fit-content;max-width:100%}
.help-tip-text{position:absolute;z-index:1200;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);width:max-content;max-width:min(320px,80vw);padding:9px 11px;border-radius:9px;background:#26363b;color:#fff;font-size:10px;font-weight:650;line-height:1.4;box-shadow:0 6px 18px rgba(0,0,0,.18);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility .12s ease;text-align:left;white-space:normal}
.help-tip-text::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#26363b}
.help-tip:hover .help-tip-text,.help-tip:focus-within .help-tip-text,.help-tip.help-open .help-tip-text{opacity:1;visibility:visible}
.help-info-button{display:none;width:22px;height:22px;min-width:22px;padding:0;border:1px solid #AFC4C6;border-radius:50%;background:#F7FBFA;color:var(--primary);font-size:12px;font-weight:900;line-height:20px;text-align:center;cursor:pointer}
@media(max-width:700px),(hover:none){
  .help-tip:hover .help-tip-text{opacity:0;visibility:hidden}
  .help-tip.help-open .help-tip-text,.help-tip:focus-within .help-tip-text{opacity:1;visibility:visible}
  .help-info-button{display:inline-block}
  .help-tip-text{left:auto;right:0;transform:none;max-width:min(290px,78vw)}
  .help-tip-text::after{left:auto;right:5px;transform:none}
}

/* ============================================================
   System Admin website traffic
   ============================================================ */
.traffic-dashboard-card {
    margin-top:10px;
}

.traffic-dashboard-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.traffic-dashboard-heading h2,
.traffic-dashboard-heading p,
.traffic-details-grid h3 {
    margin-top:0;
}

.traffic-dashboard-heading p {
    margin-bottom:0;
}

.traffic-live-badge {
    flex:0 0 auto;
    padding:5px 9px;
    border-radius:999px;
    background:#EAF7F1;
    color:#24755F;
    font-size:10px;
    font-weight:900;
    white-space:nowrap;
}

.traffic-stat-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}

.traffic-stat {
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#FCFBF8;
}

.traffic-stat strong {
    font-size:27px;
    line-height:1;
    color:#26363D;
}

.traffic-stat span {
    margin-top:6px;
    font-size:11px;
    font-weight:900;
}

.traffic-stat small {
    margin-top:3px;
    color:var(--muted);
    font-size:9px;
    line-height:1.35;
}

.traffic-details-grid {
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(230px,.6fr);
    gap:16px;
    margin-top:16px;
}

.traffic-details-grid h3 {
    margin-bottom:7px;
    font-size:13px;
}

.traffic-page-row code {
    overflow-wrap:anywhere;
    font-size:10px;
}

.traffic-privacy-note {
    padding:12px;
    border-radius:10px;
    background:#F0F5F1;
}

.traffic-privacy-note p {
    margin:7px 0 0;
    font-size:10px;
    line-height:1.45;
}

@media (max-width:800px) {
    .traffic-stat-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .traffic-details-grid {
        grid-template-columns:1fr;
    }
}

@media (max-width:480px) {
    .traffic-dashboard-heading {
        display:block;
    }

    .traffic-live-badge {
        display:inline-block;
        margin-top:8px;
    }

    .traffic-stat-grid {
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .traffic-stat {
        padding:10px 8px;
    }

    .traffic-stat strong {
        font-size:23px;
    }
}

/* ============================================================
   Admin sales pitch
   ============================================================ */
.sales-pitch-card {
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}

.sales-pitch-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
}

.sales-pitch-heading h2,
.sales-pitch-heading p {
    margin-top:0;
}

.sales-pitch-heading p {
    margin-bottom:0;
}

.sales-pitch-text {
    padding:18px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#FCFBF8;
    font-size:16px;
    line-height:1.65;
}

.copy-pitch-status {
    min-height:18px;
    margin-top:8px;
    color:var(--muted);
    font-size:11px;
}

/* ============================================================
   Cooking Mode
   ============================================================ */
.cooking-mode-launch {
    margin:8px 0 12px;
}

.cooking-mode-button {
    font-size:14px;
}

.cooking-mode-body {
    margin:0;
    background:#F7F3EC;
    color:#23343B;
}

.cooking-mode-shell {
    width:min(920px, calc(100% - 24px));
    margin:0 auto;
    padding:18px 0 40px;
}

.cooking-mode-header {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:start;
    gap:12px;
    margin-bottom:14px;
}

.cooking-mode-title-wrap {
    text-align:center;
}

.cooking-mode-kicker {
    color:#2F7D6D;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.cooking-mode-header h1 {
    margin:4px 0 2px;
    font-size:clamp(26px,5vw,42px);
    line-height:1.05;
}

.cooking-mode-time {
    color:var(--muted);
    font-size:12px;
    font-weight:800;
}

.cooking-mode-card {
    margin:12px 0;
    padding:18px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#FFF;
    box-shadow:0 4px 18px rgba(31,45,50,.05);
}

.cooking-mode-card h2 {
    margin:0 0 12px;
    font-size:20px;
}

.cooking-ingredients {
    display:grid;
    gap:8px;
}

.cooking-ingredient {
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:11px 12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#FCFBF8;
    cursor:pointer;
    font-size:16px;
    line-height:1.35;
}

.cooking-ingredient input {
    width:21px;
    height:21px;
    margin:0;
    flex:0 0 auto;
}

.cooking-ingredient:has(input:checked) span {
    color:var(--muted);
    text-decoration:line-through;
}

.cooking-step-topline {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.cooking-step-counter {
    color:var(--muted);
    font-size:12px;
    font-weight:900;
}

.cooking-step {
    min-height:150px;
    padding:18px;
    border-radius:12px;
    background:#F4F1EA;
}

.cooking-step-number {
    margin-bottom:8px;
    color:#2F7D6D;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.cooking-step-text {
    font-size:clamp(19px,3vw,26px);
    line-height:1.55;
    white-space:pre-wrap;
}

.cooking-step-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:12px;
}

.cooking-step-actions .btn {
    min-height:48px;
    font-size:14px;
}

.cooking-step-actions .btn:disabled {
    opacity:.45;
    cursor:not-allowed;
}

@media (max-width:700px) {
    .sales-pitch-heading {
        flex-direction:column;
    }

    .sales-pitch-heading .btn {
        width:100%;
    }

    .cooking-mode-shell {
        width:min(100% - 14px, 920px);
        padding-top:8px;
    }

    .cooking-mode-header {
        grid-template-columns:1fr auto;
    }

    .cooking-mode-title-wrap {
        grid-column:1 / -1;
        grid-row:1;
        padding:4px 48px 0;
    }

    .cooking-mode-header > a {
        grid-column:1;
        grid-row:1;
        justify-self:start;
        z-index:1;
    }

    .cooking-mode-header > button {
        grid-column:2;
        grid-row:1;
        justify-self:end;
        z-index:1;
    }

    .cooking-mode-card {
        padding:14px;
        border-radius:13px;
    }

    .cooking-ingredient {
        font-size:17px;
        padding:12px;
    }

    .cooking-step {
        min-height:180px;
        padding:16px;
    }
}

/* ==========================================================
   Help Center
   ========================================================== */
.help-page { width: min(900px, 100%); margin: 0 auto; padding: 18px 14px 50px; }
.help-hero { padding-bottom: 14px; }
.help-controls { margin-bottom: 22px; }
.help-controls > label,
.help-filter-row label { display: block; font-weight: 900; margin-bottom: 7px; }
.help-search-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #CFC9BF;
    border-radius: 12px;
    padding: 0 12px;
    background: white;
}
.help-search-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,125,109,.12); }
.help-search-wrap input { border: 0; padding-left: 0; outline: 0; box-shadow: none; }
.help-filter-row { margin-top: 12px; }
.help-result-count { margin-top: 10px; color: var(--muted); font-size: 13px; font-weight: 700; }
.help-section { margin: 26px 0; }
.help-section-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 3px 11px;
}
.help-section-heading > span { font-size: 28px; }
.help-section-heading h2 { margin: 0; font-size: 23px; }
.help-section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.help-topic {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 15px;
    margin-bottom: 9px;
    box-shadow: 0 3px 10px rgba(38,50,56,.035);
    overflow: hidden;
}
.help-topic[hidden], .help-section[hidden] { display: none !important; }
.help-topic summary {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 17px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.help-topic summary::-webkit-details-marker { display: none; }
.help-topic summary::after {
    content: "+";
    margin-left: auto;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}
.help-topic[open] summary::after { content: "−"; }
.help-topic summary > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.help-topic summary strong { font-size: 16px; }
.help-topic summary small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.help-topic-icon { width: 32px; flex: 0 0 32px; text-align: center; font-size: 23px; }
.help-topic-body { border-top: 1px solid var(--border); padding: 14px 18px 16px 60px; line-height: 1.55; }
.help-topic-body p { margin: 0 0 10px; }
.help-topic-body p:last-child { margin-bottom: 0; }
.help-no-results { text-align: center; margin: 18px 0; }
.help-no-results h2 { margin-bottom: 5px; }
.help-no-results p { color: var(--muted); margin-top: 0; }
.help-no-results .btn { margin-top: 10px; }
.help-admin-section .help-section-heading h2::after {
    content: "Private";
    display: inline-block;
    margin-left: 8px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #E9E1F2;
    color: #70548F;
    font-size: 10px;
    letter-spacing: .06em;
    vertical-align: middle;
}
@media (max-width: 640px) {
    .help-topic summary { padding: 14px; }
    .help-topic-body { padding: 13px 15px 15px; }
    .help-section-heading h2 { font-size: 21px; }
    .help-page { padding-left: 11px; padding-right: 11px; }
}


/* ============================================================
   v0.14.0 — Photos, profiles & desktop navigation polish
   ============================================================ */
.profile-avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:50%;overflow:hidden;background:#E7EFE9;border:1px solid #D6CFC4;line-height:1;text-decoration:none}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile-avatar-top{width:34px;height:34px;font-size:19px}
.profile-avatar-small{width:30px;height:30px;font-size:17px;margin-right:7px}
.profile-avatar-member{width:44px;height:44px;font-size:24px}
.profile-avatar-large{width:88px;height:88px;font-size:48px;box-shadow:0 4px 14px rgba(38,50,56,.10)}
.family-pill{display:flex;align-items:center;gap:8px}
.family-pill-text{display:flex;flex-direction:column;min-width:0}
.profile-current-row{display:flex;align-items:center;gap:16px;margin-bottom:5px;flex-wrap:wrap}
.profile-current-row p{margin:4px 0 0}
.profile-photo-save-button{margin-top:8px}
.avatar-preset-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:5px 0 8px}
.avatar-preset{margin:0!important;cursor:pointer}
.avatar-preset input{position:absolute;opacity:0;pointer-events:none}
.avatar-preset span{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:2px solid var(--border);border-radius:50%;background:#F7FAF8;font-size:30px;overflow:hidden;transition:.12s ease}
.avatar-preset span img{width:100%;height:100%;object-fit:cover}
.avatar-preset input:checked + span{border-color:var(--primary);box-shadow:0 0 0 3px rgba(47,125,109,.15);transform:scale(1.04);background:white}
.family-member-identity{display:flex;align-items:center;gap:10px;min-width:0}
.family-rating-person{display:flex;align-items:center;flex-wrap:wrap}

.meal-photo-editor{display:grid;gap:8px;margin-top:2px}
.meal-photo-current{display:grid;gap:8px;justify-items:start}
.meal-photo-current img{width:min(320px,100%);max-height:220px;object-fit:cover;border-radius:14px;border:1px solid var(--border)}
.remove-photo-option{display:flex!important;align-items:center;gap:8px;font-weight:700!important;margin:0!important}
.remove-photo-option input{width:18px;height:18px;flex:0 0 auto}
.meal-photo-hero{margin:0 0 16px;border-radius:20px;overflow:hidden;border:1px solid var(--border);background:#EEE8DE;box-shadow:0 5px 18px rgba(38,50,56,.08)}
.meal-photo-hero img{display:block;width:100%;max-height:430px;object-fit:cover}
.recipe-card.has-photo{align-items:stretch;padding:0;overflow:hidden}
.recipe-card-photo{width:170px;min-height:150px;flex:0 0 170px;background:#EEE8DE;overflow:hidden}
.recipe-card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.recipe-card-main{flex:1;padding:18px 0 18px 18px;min-width:0}
/* .recipe-card-actions has no explicit flex-basis, so its default
   flex:0 1 auto takes its CONTENT's own preferred width -- driven almost
   entirely by .recipe-card-source-ratings' rating-label + 5-star row +
   Favorite toggle, which together need ~280px unwrapped. Because
   .recipe-card-main uses flex:1 with flex-basis:0%, it only receives
   whatever's left AFTER photo and actions get their full preferred
   widths -- confirmed live (Safari Web Inspector / getBoundingClientRect
   equivalent): at 716px card width, actions claimed 328px on content
   alone even though nothing was forcing it to shrink, leaving main only
   172px. .recipe-card-my-source-rating already has flex-wrap:wrap, but
   wrap only helps once the box is actually narrower than its unwrapped
   content -- which never happened, since flex only shrinks fixed/auto-
   basis items when space runs out, and there was always just enough
   total room. Capping actions to a fixed, comfortable column (matching
   the photo's own 170px) makes the rating row's existing wrap rule
   finally activate (verified: rating drops to 2 lines, buttons still
   fit their text), and hands the freed space to .recipe-card-main. */
.recipe-card.has-photo .recipe-card-actions{padding:18px 18px 18px 8px;justify-content:center;flex:0 0 150px;max-width:150px}

@media (min-width:901px){
  .admin-tools{gap:5px;padding:5px 7px;border-radius:11px}
  .admin-tools-label{font-size:10px;padding:6px 8px 6px 5px}
  .admin-tools a{font-size:12px;padding:7px 9px;border-radius:8px}
  .desktop-navigation{gap:5px}
  .desktop-navigation > a:not(.calendar-link):not(.cart-link):not(.home-link),
  .desktop-navigation .recipes-link,
  .desktop-navigation .ingredients-link,
  .desktop-navigation .pantry-link,
  .desktop-navigation .make-link,
  .desktop-navigation .help-link,
  .desktop-navigation .updates-link,
  .desktop-navigation .friends-link,
  .desktop-navigation .top-text-link{
      display:inline-flex;align-items:center;justify-content:center;
      background:#EDF3EF;border:1px solid #D8E2DA;color:#48565D;
      padding:8px 10px;border-radius:10px;font-size:12px;font-weight:800;
      text-decoration:none;white-space:nowrap;
  }
  .desktop-navigation > a:not(.calendar-link):not(.cart-link):not(.home-link):hover{background:white;color:var(--primary)}
}

@media(max-width:600px){
  .avatar-preset-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .recipe-card.has-photo{display:grid;grid-template-columns:1fr}
  .recipe-card-photo{width:100%;height:180px;min-height:0}
  .recipe-card-main{padding:15px 15px 5px}
  .recipe-card.has-photo .recipe-card-actions{padding:8px 15px 15px;flex:none;max-width:none}
}

/* v0.14.2 — Mobile camera/photo source controls */
.photo-source-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.photo-source-button{position:relative;overflow:hidden;cursor:pointer;margin:0!important}
.photo-source-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
@media(max-width:600px){
  .photo-source-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .photo-source-button{width:100%;min-height:46px;text-align:center;justify-content:center}
}

/* v0.14.3 — live photo previews & profile cropper */
.profile-crop-modal[hidden]{display:none!important}
.profile-crop-modal{position:fixed;inset:0;z-index:3000;background:rgba(22,29,32,.72);display:flex;align-items:center;justify-content:center;padding:18px}
.profile-crop-dialog{width:min(460px,100%);max-height:calc(100vh - 36px);overflow:auto;background:#fff;border-radius:20px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.profile-crop-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.profile-crop-header strong{font-size:20px}
.profile-crop-header p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.4}
.crop-close{border:0;background:#EDF3EF;width:36px;height:36px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;color:#35434A;flex:0 0 auto}
.profile-crop-stage{position:relative;width:min(360px,100%);aspect-ratio:1;margin:0 auto;background:#222;overflow:hidden;border-radius:16px;touch-action:none}
.profile-crop-stage canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.profile-crop-stage canvas:active{cursor:grabbing}
.profile-crop-circle{position:absolute;inset:2px;border-radius:50%;border:3px solid rgba(255,255,255,.95);box-shadow:0 0 0 999px rgba(0,0,0,.28);pointer-events:none}
.crop-zoom-label{display:grid!important;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin:16px 0 8px!important;font-weight:800!important}
.crop-zoom-label input{width:100%}
.crop-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.crop-modal-open{overflow:hidden}
#mealPhotoPreviewWrap[hidden]{display:none!important}
@media(max-width:600px){
  .profile-crop-modal{padding:10px;align-items:flex-end}
  .profile-crop-dialog{border-radius:20px 20px 12px 12px;padding:15px;max-height:94vh}
  .crop-actions{display:grid;grid-template-columns:1fr 1fr}
  .crop-actions .btn{width:100%}
}

/* v0.14.4 — family photos + mobile cropper containment */
.family-photo-editor{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.family-photo-editor-copy{min-width:0}
.family-photo-preview,.family-photo-thumb,.shared-family-heading-photo{display:flex;align-items:center;justify-content:center;overflow:hidden;background:#EDF3EF;border:1px solid var(--border);color:#526067;flex:0 0 auto}
.family-photo-preview{width:112px;height:84px;border-radius:16px;font-size:38px}
.family-photo-preview img,.family-photo-thumb img,.shared-family-heading-photo img{width:100%;height:100%;display:block;object-fit:cover}
.family-photo-thumb{width:54px;height:54px;border-radius:14px;font-size:24px}
.family-photo-thumb.small{width:38px;height:38px;border-radius:11px;font-size:18px}
.friend-family-identity{display:flex;align-items:center;gap:12px;min-width:0}
.shared-family-heading-photo{width:92px;height:72px;border-radius:18px;font-size:34px;margin:0 auto 10px}
.shared-by-family{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.shared-by-family p{margin:0}

/* Keep the cropper inside the visual viewport on phones, including wide source images. */
.profile-crop-modal{box-sizing:border-box;width:100vw;max-width:100vw;overflow:hidden}
.profile-crop-dialog{box-sizing:border-box;max-width:calc(100vw - 36px);min-width:0;overflow-x:hidden}
.profile-crop-header,.crop-zoom-label,.crop-actions{min-width:0}
.profile-crop-stage{box-sizing:border-box;max-width:100%;min-width:0}
.profile-crop-stage canvas{max-width:100%;min-width:0}
.crop-zoom-label{grid-template-columns:max-content minmax(0,1fr)}
.crop-zoom-label input{min-width:0;max-width:100%}

@media(max-width:600px){
  .profile-crop-modal{padding:10px;align-items:center;justify-content:center;width:100dvw;max-width:100dvw}
  .profile-crop-dialog{width:calc(100dvw - 20px);max-width:calc(100dvw - 20px);max-height:calc(100dvh - 20px);border-radius:18px;padding:14px;margin:0;overflow-y:auto;overflow-x:hidden}
  .profile-crop-stage{width:min(360px,calc(100dvw - 48px));max-width:100%}
  .crop-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%}
  .crop-actions .btn{min-width:0;padding-left:8px;padding-right:8px}
  .family-photo-editor{align-items:flex-start}
  .family-photo-preview{width:96px;height:76px}
  .friend-connection-row{gap:12px}
}


/* MealCrew v0.15.0 branding */
.mealcrew-brand { display:flex; align-items:center; gap:8px; text-decoration:none; }
.mealcrew-mark { font-size:1.45rem; line-height:1; }
.mealcrew-wordmark { display:flex; flex-direction:column; font-weight:800; line-height:1.02; letter-spacing:-0.02em; }
.mealcrew-wordmark small { margin-top:3px; font-size:.56rem; font-weight:700; letter-spacing:.035em; opacity:.72; white-space:nowrap; }
.brand-tagline { margin:-4px 0 22px; text-align:center; font-weight:700; opacity:.72; letter-spacing:.015em; }
.login-brand { margin-bottom:10px; }
@media (max-width: 900px) { .mealcrew-wordmark small { display:none; } }


/* ============================================================
   v0.15.1 — MealCrew visual identity
   ============================================================ */
.mealcrew-brand{display:flex;align-items:center;min-width:0;padding:0;background:transparent!important;border:0!important}
.mealcrew-header-logo{display:block;object-fit:contain}
.mealcrew-header-logo-desktop{width:212px;height:60px;object-position:left center}
.mealcrew-header-logo-mobile{display:none;width:42px;height:42px}
.mealcrew-hero-logo{display:block;width:min(410px,92%);max-height:390px;object-fit:contain;margin:0 auto 10px}
.mealcrew-hero-kicker{margin-top:2px}
.mealcrew-auth-logo{display:block;width:min(310px,82vw);max-height:285px;object-fit:contain;margin:0 auto 8px}
.mealcrew-auth-logo.setup-logo{width:min(240px,70vw);max-height:220px}
.mealcrew-form-symbol{display:block;width:76px;height:76px;object-fit:contain;margin:0 auto 4px}
.mealcrew-cta-symbol{display:block;width:112px;height:112px;object-fit:contain;margin:0 auto 8px}
.preview-brand{display:inline-flex;align-items:center;gap:5px;font-weight:900}
.preview-brand img{width:24px;height:24px;object-fit:contain}

/* Let the approved forest-green palette carry the primary brand actions. */
.btn.primary{background:linear-gradient(135deg,#103D2D,#1E6E3E)}
.btn.primary:hover{background:#103D2D}
.btn.accent{background:linear-gradient(135deg,#1E6E3E,#4CAF50)}
.btn.accent:hover{background:#1E6E3E}
.family-name,.recipe-detail h3,.help-section-heading h2{color:#103D2D}
.meal-toggle a.active{background:#1E6E3E;color:#fff}

@media(max-width:900px){
  .mealcrew-header-logo-desktop{display:none}
  .mealcrew-header-logo-mobile{display:block}
}
@media(max-width:600px){
  .mealcrew-header-logo-mobile{width:38px;height:38px}
  .mealcrew-hero-logo{width:min(330px,94%);max-height:315px}
  .mealcrew-auth-logo{width:min(270px,84vw);max-height:245px}
  .mealcrew-cta-symbol{width:92px;height:92px}
}


/* ============================================================
   v0.15.2 — MealCrew palette polish
   ============================================================ */
html,body{background:#F4F8F5}
.topbar{background:rgba(244,248,245,.96)}
.btn.secondary{background:linear-gradient(135deg,#48785B,#5B8A68)}
.btn.secondary:hover{background:#386748}
.home-link,.calendar-link{background:#48785B}
.home-link:hover,.calendar-link:hover{background:#386748}
.meal-toggle{background:#E7EFE9}
.card,.panel,.planner-card,.recipe-card,.shopping-card,.calendar-card{border-color:#D8E2DA}

/* ============================================================
   v0.16.0 — MealCrew App Shell
   Desktop becomes a true application workspace with a persistent
   navigation rail and a wider content canvas. Mobile keeps the
   purpose-built menu.
   ============================================================ */
:root{
  --app-sidebar-width:260px;
  --app-topbar-height:68px;
  --app-workspace-max:1180px;
}

/* ============================================================
   UI Consistency Audit, Phase A — additive content-width foundation
   A small, shared width vocabulary so future page/card alignment work
   has named tiers instead of ad hoc pixel values. Purely additive: no
   existing selector is migrated onto these except the Recipe Detail
   pilot below (item.html). --content-width-wide intentionally reuses
   the existing --app-workspace-max rather than duplicating it.
   ============================================================ */
:root{
  --content-width-narrow:820px;
  --content-width-standard:980px;
}
.content-width-narrow{max-width:var(--content-width-narrow);margin-left:auto;margin-right:auto}
.content-width-standard{max-width:var(--content-width-standard);margin-left:auto;margin-right:auto}
.content-width-wide{max-width:var(--app-workspace-max);margin-left:auto;margin-right:auto}

.app-sidebar{display:none}
.desktop-app-utility{display:none}

@media (min-width:901px){
  body{min-height:100vh}

  .app-sidebar{
    display:flex;
    position:fixed;
    inset:0 auto 0 0;
    width:var(--app-sidebar-width);
    z-index:40;
    flex-direction:column;
    background:#fff;
    border-right:1px solid #D8E2DA;
    box-shadow:8px 0 28px rgba(16,61,45,.045);
  }
  .app-sidebar-brand{
    min-height:106px;
    display:flex;
    align-items:center;
    padding:18px 18px 14px;
    border-bottom:1px solid #E5ECE6;
  }
  .app-sidebar-brand a{display:block;width:100%}
  .app-sidebar-brand img{display:block;width:224px;max-width:100%;height:70px;object-fit:contain;object-position:left center}
  .app-sidebar-nav{padding:12px 10px 18px;overflow-y:auto;overscroll-behavior:contain;flex:1}
  .sidebar-section{padding:8px 0 10px}
  .sidebar-section + .sidebar-section{border-top:1px solid #EDF2EE}
  .sidebar-section-label{padding:4px 11px 6px;color:#809087;font-size:10px;font-weight:900;letter-spacing:.13em}
  .sidebar-link{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:42px;
    margin:2px 0;
    padding:9px 11px;
    border-radius:10px;
    color:#405049;
    text-decoration:none;
    font-size:13px;
    transition:background .12s ease,color .12s ease,transform .12s ease;
  }
  .sidebar-link > span{width:22px;text-align:center;font-size:17px;flex:0 0 22px}
  /* v1.1.1.91 — Icon system Batch 2: the rule above sized the old
     emoji-text span; scope the real numeric size to the icon wrapper
     itself so the 20px SVG isn't stretched into a 22px slot. */
  .sidebar-link > .mc-icon{width:20px;flex:0 0 20px}
  .sidebar-link strong{font-weight:750;min-width:0}
  .sidebar-link:hover{background:#F0F6F1;color:#103D2D;transform:translateX(1px)}
  .sidebar-link.active{background:#E2F0E5;color:#103D2D;box-shadow:inset 3px 0 0 #1E6E3E}
  .sidebar-link.active strong{font-weight:900}
  .sidebar-admin-section{margin-top:4px}
  .sidebar-admin-section .sidebar-link{font-size:12px;min-height:38px}
  .sidebar-admin-section .sidebar-section-label{color:#68776F}

  .app-sidebar-footer{
    padding:12px 10px 15px;
    border-top:1px solid #E5ECE6;
    background:#FAFCFA;
  }
  .app-sidebar-footer a,.app-sidebar-footer button{
    width:100%;display:flex;align-items:center;gap:9px;
    border:0;background:transparent;color:#56655E;text-decoration:none;
    padding:8px 10px;border-radius:9px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;text-align:left
  }
  .app-sidebar-footer a:hover,.app-sidebar-footer button:hover{background:#EDF4EF;color:#103D2D}
  .app-sidebar-footer form{margin:0}
  .app-sidebar-footer small{display:block;padding:8px 10px 0;color:#94A099;font-size:10px}

  .topbar{
    position:sticky;
    top:0;
    min-height:var(--app-topbar-height);
    padding:9px 24px;
    background:rgba(244,248,245,.92);
    border-bottom:1px solid #DCE6DE;
    box-shadow:0 4px 18px rgba(16,61,45,.035);
    backdrop-filter:blur(14px);
  }
  /* Only reserve room for the sidebar -- and hide the topbar's own brand
     mark in favor of the sidebar's -- when a sidebar actually exists.
     Previously these applied to every page at this width regardless of
     login state, which both shifted public/logged-out pages right by a
     phantom sidebar's width AND hid the only brand mark a public page
     has (the sidebar that would otherwise show one doesn't exist for a
     logged-out visitor). */
  body.has-app-sidebar .topbar{
    left:var(--app-sidebar-width);
    margin-left:var(--app-sidebar-width);
  }
  body.has-app-sidebar .topbar-left{display:none!important}
  .desktop-navigation{display:none!important}
  .desktop-app-utility{display:flex;align-items:center;gap:10px;margin-left:auto}
  .desktop-family-utility,.desktop-user-utility{
    display:flex;align-items:center;text-decoration:none;border:1px solid #D8E2DA;background:#fff;
    border-radius:12px;color:#34433C;min-height:46px
  }
  .desktop-family-utility{gap:9px;padding:5px 11px 5px 6px;line-height:1.05}
  .family-avatar-top{width:34px;height:34px;min-width:34px;border-radius:9px;overflow:hidden;background:#EDF4EF;display:grid;place-items:center;color:#1E6E3E;font-size:17px}
  .family-avatar-top img{width:100%;height:100%;object-fit:cover;display:block}
  .desktop-family-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
  .desktop-family-label{font-size:9px;color:#87958D;text-transform:uppercase;font-weight:900;letter-spacing:.09em;margin-bottom:3px}
  .desktop-family-utility strong{font-size:12px;color:#103D2D;white-space:nowrap}
  .desktop-user-utility{gap:9px;padding:5px 10px 5px 6px}
  .desktop-user-copy{display:flex;flex-direction:column;line-height:1.05}
  .desktop-user-copy strong{font-size:12px}
  .desktop-user-copy small{font-size:9px;color:#89958F;margin-top:4px}
  .desktop-family-utility:hover,.desktop-user-utility:hover{border-color:#BFD2C4;box-shadow:0 3px 10px rgba(16,61,45,.07)}

  /* Center each page inside the usable workspace to the right of the sidebar.
     max() keeps a comfortable 28px gutter when the viewport gets narrower, while
     wider screens share the spare space evenly on both sides of the page.
     Scoped to body.has-app-sidebar: without a sidebar (public/logged-out
     pages), .page/.meal-toggle/footer fall back to their own base rules
     (e.g. .page{width:min(760px,100%);margin:0 auto}) instead of reserving
     width for a sidebar that was never rendered. */
  body.has-app-sidebar .meal-toggle{
    width:min(var(--app-workspace-max),calc(100vw - var(--app-sidebar-width) - 56px));
    max-width:var(--app-workspace-max);
    margin-top:16px;
    margin-right:0;
    margin-left:calc(var(--app-sidebar-width) + max(28px,(100vw - var(--app-sidebar-width) - var(--app-workspace-max))/2));
  }
  body.has-app-sidebar .page{
    width:min(var(--app-workspace-max),calc(100vw - var(--app-sidebar-width) - 56px));
    max-width:var(--app-workspace-max);
    margin-right:0;
    margin-left:calc(var(--app-sidebar-width) + max(28px,(100vw - var(--app-sidebar-width) - var(--app-workspace-max))/2));
    padding:22px 0 54px;
  }
  body.has-app-sidebar footer{
    width:min(var(--app-workspace-max),calc(100vw - var(--app-sidebar-width) - 56px));
    max-width:var(--app-workspace-max);
    margin-right:0;
    margin-left:calc(var(--app-sidebar-width) + max(28px,(100vw - var(--app-sidebar-width) - var(--app-workspace-max))/2));
    padding-bottom:24px;
  }

  /* App-like density and wider workspace composition. */
  .hero,.heading{text-align:left;padding:8px 2px 18px}
  .hero-icon,.big-icon{font-size:34px}
  .hero h1,.heading h1{font-size:32px;margin:3px 0}
  .hero p,.heading p{text-align:left}
  .compact-hero{text-align:left}
  .compact-hero .hero-icon{display:inline-block;margin-right:8px}
  .dinner-grid{gap:14px}
  .card,.dinner-card,.recipe-card{box-shadow:0 2px 10px rgba(16,61,45,.045)}
  .menu-card{padding:16px;gap:10px}

  /* Keep forms/details comfortably readable even on the wider shell. */
  .form-card,.recipe-detail,.surprise-card,.auth-wrap{max-width:820px}
  /* My Account's lower sections (Test Email, Change Password, Danger Zone)
     sit as plain .card/.btn elements outside .profile-form, so without this
     they stretch to the full wider workspace while the form above stays
     capped at 820px -- same reading-width cap, applied here so the whole
     page shares one right edge instead of the form looking narrower. */
  .account-email-test-card,.account-change-password-link,.account-danger-zone{max-width:820px}
  /* The capped 820px sections above stay flush against .page's left edge
     with no margin of their own, so on the wider desktop workspace the
     whole My Account column reads as left-anchored with a large empty
     strip on the right. Center the column (heading + form + lower
     sections) instead, scoped to My Account's own classes only so no
     other page sharing the 820px reading-width cap is affected. */
  .account-page-heading{max-width:820px}
  .account-page-heading,.profile-form,.account-email-test-card,.account-change-password-link,.account-danger-zone{
      margin-left:auto;
      margin-right:auto;
  }
  /* Surprise Me / Discover result screens: same left-anchored-on-wide-
     workspace problem as My Account, same fix. .compact-hero and
     .surprise-card are shared with Help/Contact and the shared
     .form-card,.recipe-detail,.surprise-card,.auth-wrap reading-width rule
     respectively, so this wraps just these two pages' own markup instead
     of touching either shared selector. */
  .surprise-discover-page{max-width:820px;margin-left:auto;margin-right:auto}
  /* Review Imported Recipe: center only this page's content on desktop. */
  .recipe-import-review-page{max-width:820px;margin-left:auto;margin-right:auto}
  .help-page,.admin-dashboard-page{max-width:1100px}
}

@media (min-width:1280px){
  :root{--app-sidebar-width:248px;--app-workspace-max:1240px}
  /* Same scoping as the 901px block above -- this re-declaration at a
     wider breakpoint had the identical unconditional-reservation bug,
     which is what a 13" iPad in landscape (1366px CSS width) would hit
     even after the 901px block was fixed. */
  body.has-app-sidebar .page,
  body.has-app-sidebar .meal-toggle,
  body.has-app-sidebar footer{
    width:min(var(--app-workspace-max),calc(100vw - var(--app-sidebar-width) - 72px));
    margin-right:0;
    margin-left:calc(var(--app-sidebar-width) + max(36px,(100vw - var(--app-sidebar-width) - var(--app-workspace-max))/2));
  }
}

@media (max-width:900px){
  .app-sidebar,.desktop-app-utility{display:none!important}
}


/* ============================================================
   v0.16.1 — Recipe Detail Workspace
   ============================================================ */
.recipe-detail-heading{
  max-width:var(--content-width-standard);
  margin-left:auto;
  margin-right:auto;
  padding-bottom:12px;
}
/* Phase A Recipe Detail pilot: keep the hero visually strong while
   aligning it with the standard Recipe Detail content column. */
.recipe-photo-hero{
  max-width:var(--content-width-standard);
  margin:0 auto 16px;
}
.recipe-main-card{padding:0;overflow:hidden}
.recipe-notes-block{padding:18px 20px;border-bottom:1px solid var(--border);background:#FAFCFA}
.recipe-notes-block h3{margin:0 0 6px}
.recipe-content-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr);min-height:300px}
.recipe-content-panel{padding:24px 26px}
.recipe-content-panel+.recipe-content-panel{border-left:1px solid var(--border)}
.recipe-content-panel h2{margin:2px 0 16px;color:#103D2D;font-size:23px}
.recipe-section-kicker{font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#6B8777}
.recipe-ingredient-list{margin:0;padding-left:20px}
.recipe-ingredient-list li{margin:10px 0;line-height:1.45}
.recipe-instructions{font-size:14px;line-height:1.75;white-space:pre-line}
.recipe-extra-items{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.recipe-extra-items h3{font-size:14px;margin:0 0 8px}
.recipe-action-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:24px;align-items:center;padding:20px 22px}
.recipe-action-copy h3{margin:3px 0 5px;color:#103D2D;font-size:19px}
.recipe-action-copy p{margin:0;color:var(--muted);font-size:12px}
.recipe-action-buttons{display:grid;gap:10px}
.recipe-action-buttons.has-cooking{grid-template-columns:1fr 1fr}
.recipe-action-buttons form,.recipe-action-buttons .btn{width:100%;margin:0}
.recipe-sharing-lower{padding:18px 20px}
.recipe-sharing-lower-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.recipe-sharing-lower-heading h3{margin:0 0 3px;color:#103D2D}
.recipe-sharing-lower-heading p{margin:0;color:var(--muted);font-size:11px}
.recipe-sharing-lower .recipe-sharing-badge{margin:0;white-space:nowrap}
.recipe-management-actions{margin-top:12px}
.recipe-management-actions>.btn{margin-top:8px}

@media (min-width:901px){
  .preference-card{max-width:none}

  /* Phase A pilot: Recipe Detail (item.html) -- these primary content
     cards previously either had no width rule or an explicit
     max-width:none here, so on the wider desktop workspace each one
     stretched to a different unrelated width. They now share one
     intentional column (--content-width-standard, 980px -- the same
     width the photo gallery/thumbnail strip below already use), so the
     page reads as one coherent stack instead of fighting widths. The
     compound selector (two classes) beats .preference-card's and
     .recipe-detail's own single-class max-width rules regardless of
     source order, without editing either of those shared rules --
     .preference-card and .recipe-dietary-detail are also used by
     official_recipe_detail.html/community_recipe_detail.html, which
     intentionally keep their current, unrelated width behavior here. */
  .recipe-dietary-detail.content-width-standard,
  .recipe-serving-card.content-width-standard,
  .recipe-main-card.content-width-standard,
  .preference-card.content-width-standard,
  .family-ratings-card.content-width-standard,
  .recipe-action-card.content-width-standard,
  .recipe-sharing-lower.content-width-standard,
  .recipe-management-actions.content-width-standard,
  .surprise-context-card.content-width-standard{
    max-width:var(--content-width-standard);
    margin-left:auto;
    margin-right:auto;
  }
}
@media (max-width:900px){
  .recipe-content-grid{grid-template-columns:1fr}
  .recipe-content-panel+.recipe-content-panel{border-left:0;border-top:1px solid var(--border)}
  .recipe-action-card{grid-template-columns:1fr;gap:15px}
  .recipe-action-buttons.has-cooking{grid-template-columns:1fr}
}
@media (max-width:600px){
  .recipe-content-panel{padding:18px 16px}
  .recipe-content-panel h2{font-size:20px}
  .recipe-instructions{font-size:13px}
  .recipe-sharing-lower-heading{align-items:flex-start;flex-direction:column}
}


/* ============================================================
   v0.16.2 — Centered Workspace Polish
   Keep the navigation rail anchored while centering the active
   page inside the remaining desktop canvas.
   ============================================================ */


/* ============================================================
   v0.16.3 — Meal Planner workspace + period switching polish
   ============================================================ */
@media (min-width:901px){
  .planner-workspace{
    width:100%;
    max-width:820px;
    margin:0 auto;
  }
  .planner-workspace .heading{
    padding-left:0;
    padding-right:0;
  }
  .planner-workspace .planner-form{
    max-width:none!important;
    width:100%;
    margin-left:0;
    margin-right:0;
  }
}


/* ============================================================
   v0.16.4 / v0.16.6 — Shell Consistency Polish
   Family identity in the utility bar + robust centering for
   narrower sub-workspaces such as Help.
   ============================================================ */
@media (min-width:901px){
  /* These are inner wrappers: base.html already positions main.page
     within the sidebar workspace. Never compensate for the sidebar twice. */
  .help-page{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:22px 0 54px;
  }
}



/* v0.16.7 — Visual meal & ingredient cards */
.scheduled-meal-photo{display:block;width:100%;height:128px;margin:10px 0 8px;border-radius:13px;overflow:hidden;background:#E7EFE9;border:1px solid rgba(16,61,45,.08)}
.scheduled-meal-photo img{width:100%;height:100%;object-fit:cover;display:block}
.dinner-card{overflow:hidden}
.ingredient-visual-row{display:flex;gap:16px;align-items:flex-start}
.ingredient-photo-thumb{width:112px;height:112px;flex:0 0 112px;border-radius:14px;overflow:hidden;background:#EEF4EF;border:1px solid var(--border)}
.ingredient-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ingredient-visual-main{min-width:0;flex:1}
.ingredient-photo-upload{display:flex;align-items:center;gap:8px;margin:4px 0 8px;font-size:12px;font-weight:800;color:var(--muted)}
.ingredient-photo-upload input{font-size:11px;max-width:260px}
@media(max-width:600px){.scheduled-meal-photo{height:150px}.ingredient-visual-row{gap:10px}.ingredient-photo-thumb{width:78px;height:78px;flex-basis:78px}.ingredient-photo-upload{align-items:flex-start;flex-direction:column}}

/* v0.16.9 — Visual recipe/detail and smart ingredient artwork */
.recipe-photo-hero{position:relative;max-height:360px}
.recipe-photo-hero img{height:clamp(220px,28vw,360px);max-height:none;object-fit:cover}
.stock-photo{position:relative}
.stock-photo::after{content:"MealCrew stock";position:absolute;right:10px;bottom:10px;padding:5px 8px;border-radius:999px;background:rgba(16,61,45,.82);color:#fff;font-size:10px;font-weight:800;letter-spacing:.02em;pointer-events:none}
.recipe-card-photo{position:relative;width:190px;flex-basis:190px;min-height:155px}
.ingredient-photo-thumb{position:relative}
.ingredient-photo-thumb.stock-photo::after{font-size:8px;padding:3px 5px;right:5px;bottom:5px}
@media(max-width:600px){.recipe-photo-hero img{height:220px}.recipe-card-photo{width:100%;height:180px;min-height:0}.stock-photo::after{font-size:9px}}


/* ============================================================
   v0.16.13 — Family page alignment polish
   The Family Settings card is a workspace section, not a narrow form page.
   ============================================================ */
@media (min-width:901px){
  .family-name-card{
    width:100%;
    max-width:none!important;
  }
}


/* ============================================================
   v0.17.0 — Logged-in Family Home Dashboard
   ============================================================ */
.family-dashboard{display:flex;flex-direction:column;gap:18px}
.dashboard-welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:4px 2px 2px}
.dashboard-kicker{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#5C7B69;margin-bottom:5px}
.dashboard-welcome h1{margin:0;color:#1D2E35;font-size:34px;line-height:1.08}
.dashboard-welcome p{margin:7px 0 0;color:#6C7A74;font-size:15px}
.dashboard-calendar-button{width:auto;min-width:150px}
.dashboard-section{display:flex;flex-direction:column;gap:11px}
.dashboard-section-title{display:flex;align-items:end;justify-content:space-between;padding:0 2px}
.dashboard-section-title>div{display:flex;align-items:center;gap:9px}
.dashboard-section-title h2{margin:0;color:#163C2D;font-size:22px}
.dashboard-section-icon{font-size:22px}
.dashboard-section-note{font-size:11px;color:#829087;font-weight:750}
.dashboard-section-actions{display:flex;align-items:center;gap:14px}
.dashboard-ongoing-heading{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#829087;padding:0 2px;margin-bottom:-2px}
.dashboard-today-timeline{display:flex;flex-direction:column;gap:14px}
.dashboard-today-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dashboard-meal-card{min-width:0;border:1px solid #D6E1D8;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 3px 13px rgba(16,61,45,.055);display:flex;flex-direction:column}
.dashboard-meal-breakfast{background:linear-gradient(180deg,#FFF9EA 0,#fff 44%)}
.dashboard-meal-lunch{background:linear-gradient(180deg,#F1F7EF 0,#fff 44%)}
.dashboard-meal-dinner{background:linear-gradient(180deg,#EAF5F1 0,#fff 44%)}
.dashboard-meal-label{display:flex;align-items:center;gap:7px;padding:13px 15px 8px;font-size:11px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:#52655B}
.dashboard-meal-label span{font-size:17px}
.dashboard-meal-photo{display:block;height:158px;margin:0 12px;border-radius:13px;overflow:hidden;background:#E7EFE9;border:1px solid rgba(16,61,45,.08)}
.dashboard-meal-photo img{width:100%;height:100%;display:block;object-fit:cover}
.dashboard-meal-copy{padding:12px 15px 7px;min-height:70px}
.dashboard-meal-copy h3{font-size:21px;color:#1E3037;margin:0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-meal-meta{display:flex;flex-wrap:wrap;gap:5px 10px;color:#738178;font-size:10px;font-weight:750}
.dashboard-meal-actions{display:flex;align-items:center;gap:10px;padding:5px 15px 14px;margin-top:auto}
.dashboard-meal-actions .btn{width:auto;min-width:72px}
.dashboard-change-link{font-size:11px;color:#65756D;text-decoration:underline}
.dashboard-empty-meal{min-height:258px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px}
.dashboard-empty-icon{font-size:47px;filter:saturate(.7);opacity:.75}
.dashboard-empty-meal h3{margin:8px 0 3px;font-size:18px;color:#2E4238}
.dashboard-empty-meal p{margin:0 0 13px;color:#819087;font-size:12px}
.dashboard-empty-meal .btn{width:auto}

/* Home Today Timeline density refinement -- scoped to .dashboard-today-section
   (the whole Today section, both presentations below) so Day at a Glance's
   own .dashboard-today-grid meal cards (same class names, different
   container) are completely unaffected. Undecided meals collapse to one
   compact row; planned meals lay out as a compact horizontal thumbnail row
   instead of a full-width photo banner, so card height is earned by content
   rather than forced to a uniform large size. */
.dashboard-today-section .dashboard-empty-meal{
  min-height:0;flex-direction:row;align-items:center;justify-content:space-between;
  text-align:left;padding:10px 15px 12px;gap:12px;
}
.dashboard-today-section .dashboard-empty-meal-copy{font-size:12px;color:#819087;font-weight:650}
.dashboard-today-section .dashboard-empty-meal .btn{flex:0 0 auto}
.dashboard-today-section .dashboard-family-meal{
  display:flex;align-items:center;gap:12px;padding:9px 15px;
}
.dashboard-today-section .dashboard-family-meal-secondary{border-top:1px solid #E5ECE6}
.dashboard-today-section .dashboard-meal-photo{
  flex:0 0 104px;width:104px;height:64px;margin:0;border-radius:11px;
}
.dashboard-today-section .dashboard-meal-copy{flex:1;min-width:0;padding:0}
.dashboard-today-section .dashboard-meal-copy h3{font-size:16px;margin:0 0 4px}
.dashboard-today-section .dashboard-meal-actions{flex:0 0 auto;padding:0;margin:0}
.dashboard-add-another-meal{
  display:flex;align-items:center;justify-content:center;min-height:44px;
  margin:7px 12px 12px;border:1px dashed #B8C9BF;border-radius:10px;
  color:#17633F;background:#FBFDFC;text-decoration:none;font-size:12px;font-weight:900;
}
.dashboard-add-another-meal:hover{background:#F0F7F2;text-decoration:none}
@media(max-width:520px){
  .dashboard-today-section .dashboard-meal-photo{flex-basis:76px;width:76px;height:52px;border-radius:9px}
  .dashboard-today-section .dashboard-family-meal{padding:8px 12px;gap:9px}
  .dashboard-today-section .dashboard-meal-copy h3{font-size:14px}
  .dashboard-today-section .dashboard-empty-meal{padding:9px 12px 11px}
}

/* Breakpoint-specific PRESENTATION of the same today_timeline data (see
   dashboard_home.html's today_meal_card()/today_event_row() macros, used
   by both blocks below) -- not a second data/sort engine. Below 1200px,
   .dashboard-today-timeline is the true chronological flow (meals and
   events interleaved exactly as home_today_timeline() ordered them) and
   .dashboard-today-desktop-grid stays hidden. At >=1200px that flips: the
   narrow single-column timeline no longer uses wide desktop space well
   (Production's own Home makes a horizontal Breakfast/Lunch/Dinner row
   instead), so the grid becomes the visible one and the flow hides. Only
   one of the two is ever visible/interactive at a given width. */
.dashboard-today-desktop-grid{display:none}
.dashboard-today-meal-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;margin-bottom:14px}
@media(min-width:1200px){
  .dashboard-today-timeline{display:none}
  .dashboard-today-desktop-grid{display:block}
}

.dashboard-lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dashboard-panel{padding:16px 18px;margin:0;min-height:218px}
.dashboard-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.dashboard-panel-heading>div{display:flex;align-items:center;gap:8px}
.dashboard-panel-heading h2{margin:0;font-size:19px;color:#163C2D}
.dashboard-panel-heading a{font-size:11px;font-weight:800;color:#4D7A5B;text-decoration:none}
.dashboard-tomorrow-list,.dashboard-makesoon-list{display:flex;flex-direction:column}
.dashboard-tomorrow-row,.dashboard-makesoon-item{display:flex;align-items:center;gap:10px;min-height:51px;padding:7px 4px;border-top:1px solid #E5ECE6;text-decoration:none;color:#33453C}
.dashboard-tomorrow-row:first-child,.dashboard-makesoon-item:first-child{border-top:0}
.dashboard-tomorrow-row:hover,.dashboard-makesoon-item:hover{background:#F7FAF8;border-radius:9px}
.dashboard-tomorrow-icon{font-size:21px;width:28px;text-align:center}
.dashboard-tomorrow-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.dashboard-tomorrow-copy strong{font-size:12px;color:#35483E}
.dashboard-tomorrow-copy small{font-size:12px;color:#78857E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.dashboard-row-arrow,.dashboard-makesoon-item>span:last-child{font-size:23px;color:#9BA79F;margin-left:auto}
.dashboard-makesoon-item>span:first-child{width:24px;text-align:center}
.dashboard-makesoon-item strong{font-size:12px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-panel-empty{height:145px;display:grid;place-items:center;align-content:center;text-align:center;color:#87938C}
.dashboard-panel-empty span{font-size:30px}.dashboard-panel-empty p{margin:5px 0}.dashboard-panel-empty a{color:#4D7A5B;font-size:11px;font-weight:800}
.dashboard-actions-section{margin-top:1px}
.dashboard-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dashboard-action-card{display:flex;align-items:center;gap:12px;min-height:72px;padding:13px 15px;background:#fff;border:1px solid #D8E2DA;border-radius:14px;text-decoration:none;color:#34463D;box-shadow:0 2px 8px rgba(16,61,45,.035);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.dashboard-action-card:hover{transform:translateY(-1px);border-color:#B8CEBE;box-shadow:0 5px 13px rgba(16,61,45,.07)}
.dashboard-action-card>span{font-size:27px;width:34px;text-align:center}
.dashboard-action-card>div{display:flex;flex-direction:column;min-width:0}
.dashboard-action-card strong{font-size:13px;color:#163C2D}
.dashboard-action-card small{font-size:10px;color:#7C8982;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){
  .dashboard-welcome{align-items:flex-start}.dashboard-welcome h1{font-size:29px}.dashboard-calendar-button{display:none}
  .dashboard-today-grid{grid-template-columns:1fr}.dashboard-meal-photo{height:200px}
  .dashboard-lower-grid{grid-template-columns:1fr}.dashboard-action-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .family-dashboard{gap:15px}.dashboard-welcome{display:block;width:100%}.dashboard-welcome>div{width:100%;max-width:none}.dashboard-welcome h1{font-size:26px}.dashboard-welcome p{max-width:none}.dashboard-section-note{display:none}
  .dashboard-meal-photo{height:180px}.dashboard-action-grid{grid-template-columns:1fr}.dashboard-action-card{min-height:64px}
  .dashboard-section-actions{gap:9px}
}


/* v0.17.1 — modern calendar refresh */
.calendar-legend { display:flex; justify-content:center; gap:18px; margin:-2px 0 12px; color:var(--muted); font-size:11px; font-weight:800; }
.calendar-legend span { display:flex; align-items:center; gap:6px; }
.legend-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.legend-dot.breakfast { background:var(--calendar-breakfast-color,#E8A23A); }
.legend-dot.lunch { background:var(--calendar-lunch-color,#4C91C6); }
.legend-dot.dinner { background:var(--calendar-dinner-color,#3E8B68); }
.calendar-modern { border-radius:18px; box-shadow:0 8px 28px rgba(28,58,44,.07); }
.calendar-modern .calendar-weekday-row { background:#174F39; font-size:11px; }
.calendar-modern .calendar-weekday-row > div { padding:10px 4px; }
.calendar-modern .calendar-day { min-height:112px; padding:8px; position:relative; }
.calendar-modern.month .calendar-day { min-height:112px; }
.calendar-modern.week .calendar-day { min-height:310px; }
.calendar-date-link { display:block; color:inherit; text-decoration:none; border-radius:8px; }
.calendar-date-link:hover .date-number,
.calendar-date-link:focus-visible .date-number { box-shadow:0 0 0 2px var(--accent,#3f7f68); }
.calendar-date-link:focus-visible { outline:2px solid var(--accent,#3f7f68); outline-offset:2px; }

/* Touch-target sizing, deliberately different per view:
   Week cells have real spare room (min-height 215-310px even before
   content), so the date link can reach a genuine ~44px tap target here
   with no visible effect on a normal (non-empty) day and only a few extra
   pixels on a fully empty one.
   Month cells are much tighter (112px desktop, 60px mobile) and already
   carry meal/event content the roadmap deliberately keeps compact -- a
   real 44px header row there would either grow every cell (shrinking the
   room reserved for meals/events) or require expanding the hit area
   outside the cell's own bounds (risking overlap with the neighboring
   day's tap target). Month instead gets a smaller, self-contained
   improvement: the link's padding/negative-margin pair only reclaims
   space the cell already owns (its own existing padding), so it cannot
   bleed into another cell or the row above, but it also cannot reach 44px
   without that visible growth. This is the narrow, safe correction for
   Month; a full 44px target there was assessed and rejected as materially
   distorting the compact grid. */
.calendar-modern.week .calendar-date-link { display:flex; align-items:center; min-height:44px; box-sizing:border-box; padding:4px 6px; }
.calendar-modern.month .calendar-date-link { display:block; padding:6px; margin:-6px -6px 0; }
@media (max-width:760px) {
  .calendar-modern.month .calendar-date-link { padding:3px 2px; margin:-3px -2px 0; }
}
.calendar-modern .calendar-date { margin:0 0 6px; display:flex; justify-content:flex-end; align-items:center; }
.calendar-modern .date-number { display:inline-flex; width:25px; height:25px; align-items:center; justify-content:center; border-radius:50%; font-size:12px; }
.calendar-modern .today { box-shadow:inset 0 0 0 2px #2F9E58; background:#F7FBF8; }
.calendar-modern .today .date-number { background:#217A46; color:white; }
.calendar-modern .outside-month { opacity:.42; background:#F7F7F4; }
.calendar-events { display:grid; gap:5px; }
.calendar-event { display:flex; align-items:center; gap:6px; border-radius:9px; padding:6px 7px; min-width:0; border-left:3px solid transparent; }
.calendar-event.breakfast {
  background:color-mix(in srgb,var(--calendar-breakfast-color,#E8A23A) 18%,white);
  border-left-color:var(--calendar-breakfast-color,#E8A23A);
}
.calendar-event.lunch {
  background:color-mix(in srgb,var(--calendar-lunch-color,#4C91C6) 18%,white);
  border-left-color:var(--calendar-lunch-color,#4C91C6);
}
.calendar-event.dinner {
  background:color-mix(in srgb,var(--calendar-dinner-color,#3E8B68) 18%,white);
  border-left-color:var(--calendar-dinner-color,#3E8B68);
}
.event-icon { flex:0 0 auto; font-size:12px; }
.event-copy { min-width:0; display:grid; line-height:1.08; }
.event-period { font-size:7px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:900; }
.calendar-event a,.calendar-event strong { color:var(--text); text-decoration:none; font-size:11px; font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calendar-event a:hover { text-decoration:underline; }
.calendar-empty-slot { display:flex; align-items:center; gap:5px; padding:3px 6px; color:#B3BBB6; font-size:8px; font-weight:800; border-radius:7px; opacity:.42; }
.calendar-empty-slot.breakfast {
  background:color-mix(in srgb,var(--calendar-breakfast-color,#E8A23A) 9%,white);
}
.calendar-empty-slot.lunch {
  background:color-mix(in srgb,var(--calendar-lunch-color,#4C91C6) 9%,white);
}
.calendar-empty-slot.dinner {
  background:color-mix(in srgb,var(--calendar-dinner-color,#3E8B68) 9%,white);
}
.calendar-modern.week .calendar-event { padding:11px; border-radius:12px; }
.calendar-modern.week .calendar-event a,.calendar-modern.week .calendar-event strong { font-size:13px; white-space:normal; }
.calendar-modern.week .event-period { font-size:8px; margin-bottom:2px; }
.calendar-modern.week .calendar-empty-slot { padding:8px; font-size:10px; }
/* "+N more" link into that day's Week view -- rendered whenever a day has
   more family events than the compact mobile month grid shows inline.
   Hidden by default (desktop/week already show everything); see the
   month-mobile media query below for where it's revealed. */
.calendar-day-overflow {
    display:none;
    font-size:9px;
    font-weight:800;
    color:var(--primary);
    text-decoration:none;
    padding:1px 2px;
}
.calendar-day-overflow:hover { text-decoration:underline; }
@media (max-width:760px) {
 .calendar-legend { justify-content:flex-start; flex-wrap:wrap; }

 /* Week: unchanged from before -- a single-column day list, since a
    7-day week already has room for full detail per row. */
 .calendar-modern.week .calendar-week-row { display:grid; grid-template-columns:1fr; }
 .calendar-modern.week .calendar-day { min-height:0; display:grid; grid-template-columns:58px 1fr; gap:8px; align-items:start; padding:10px; }
 .calendar-modern.week .calendar-date { justify-content:flex-start; flex-direction:column; align-items:flex-start; }
 .calendar-modern.week .mobile-weekday { display:inline; }
 .calendar-modern.week .calendar-events { width:100%; grid-column:2; }
 .calendar-modern.week .calendar-event a,.calendar-modern.week .calendar-event strong { white-space:normal; }

 /* Month: stays a genuine 7-column grid (inherited from .calendar-shell's
    base rule) -- only the per-cell density changes, so a whole month is
    still recognizable and usable at a phone width instead of collapsing
    into a vertical list. */
 .calendar-modern.month .calendar-week-row { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); }
 .calendar-modern.month .calendar-weekday-row { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); font-size:9px; }
 .calendar-modern.month .calendar-weekday-row > div { padding:6px 1px; }
 .calendar-modern.month .calendar-day { min-height:60px; padding:3px 2px; }
 .calendar-modern.month .calendar-date { margin:0 0 2px; }
 .calendar-modern.month .date-number { width:18px; height:18px; font-size:10px; }
 .calendar-modern.month .calendar-events { gap:2px; }

 /* The compact phone Month grid uses one + action per day. It keeps the
    grid readable while preserving both meal planning and Family Events. */
 .calendar-modern.month .calendar-add-family-event-desktop {
     display:none !important;
 }
 .calendar-modern.month .calendar-add-day-action {
     display:flex;
     align-items:center;
     justify-content:center;
     width:22px;
     min-height:22px;
     margin:0 auto 2px;
     padding:0;
     border:0;
     border-radius:6px;
     font:inherit;
     font-size:16px;
     font-weight:700;
     line-height:1;
     color:var(--primary);
     background:rgba(31,139,76,.08);
     cursor:pointer;
 }
 .calendar-modern.month .calendar-empty-slot,
 .calendar-modern.month .calendar-add-another {
     display:none !important;
 }

 .calendar-modern.month .calendar-family-event-layer { gap:2px; margin-bottom:2px; }
 .calendar-modern.month .calendar-family-event { padding:2px 4px; border-radius:5px; gap:2px; }
 .calendar-modern.month .calendar-family-event-copy strong { font-size:9px; }
 .calendar-modern.month .calendar-family-event-copy small,
 .calendar-modern.month .calendar-family-event-people { display:none; }
 /* Show only the first two family events per day; the rest are covered
    by the day's "+N" link (rendered server-side, see calendar.html). */
 .calendar-modern.month .calendar-family-event-layer > a.calendar-family-event:nth-child(n+3) { display:none; }

 .calendar-modern.month .calendar-event { padding:2px 3px; gap:2px; border-radius:5px; }
 .calendar-modern.month .event-icon,
 .calendar-modern.month .event-period,
 .calendar-modern.month .calendar-eaters { display:none; }
 .calendar-modern.month .calendar-event a,
 .calendar-modern.month .calendar-event strong { font-size:9px; }
 .calendar-modern.month .calendar-drag-handle { display:none !important; }

 .calendar-modern.month .calendar-day-overflow { display:block; }
}
@media print {
 .calendar-legend { display:none!important; }
 .calendar-modern { box-shadow:none!important; }
 .calendar-modern .calendar-empty-slot { display:none!important; }
 .calendar-modern .calendar-event { padding:2px 3px!important; margin-top:2px!important; border-radius:3px!important; }
 .calendar-modern .event-icon { display:none!important; }
 .calendar-modern .event-period { font-size:5.5pt!important; }
 .calendar-modern .calendar-event a,.calendar-modern .calendar-event strong { font-size:7pt!important; white-space:normal!important; }
}


/* v0.17.2 — calendar readability polish */
@media screen {
    .calendar-modern .calendar-weekday-row {
        font-size: 12px;
    }
    .calendar-modern .date-number {
        width: 27px;
        height: 27px;
        font-size: 13px;
    }
    .calendar-modern .calendar-event {
        padding: 7px 8px;
        gap: 7px;
    }
    .calendar-modern .event-icon {
        font-size: 13px;
    }
    .calendar-modern .event-period {
        font-size: 8px;
        line-height: 1.1;
    }
    .calendar-modern .calendar-event a,
    .calendar-modern .calendar-event strong {
        font-size: 12.5px;
        line-height: 1.18;
    }
    .calendar-modern .calendar-empty-slot {
        font-size: 9px;
        padding: 4px 7px;
    }
    .calendar-legend {
        font-size: 12px;
    }
    .calendar-modern.week .calendar-event a,
    .calendar-modern.week .calendar-event strong {
        font-size: 14px;
    }
    .calendar-modern.week .event-period {
        font-size: 9px;
    }
}


/* v0.17.9 — Calendar Month density/hierarchy pass (UI Consistency Audit)
   Empty-date placeholders were faint (opacity .42, 9px text) and their
   "+" affordance was invisible until hover -- effectively unreadable on
   touch devices, and making a sparse month read as a mostly blank grid.
   Made them clearly legible while staying visibly quieter than an
   actual scheduled meal: .calendar-event keeps its solid tinted
   background, colored left border, and bold text, so a populated date
   still reads as unmistakably more prominent than an empty one.

   Also mutes the optional warning/quick-entry line inside a meal card
   ("Quick calendar entry" / "Saved meal no longer linked...") -- it was
   previously unstyled for a single meal in a slot (only shrunk once 2+
   meals shared the slot), so it could read as visually equal to the
   meal name itself. This is the concrete "secondary metadata should be
   quieter than the meal name" gap the audit found.

   Deliberately unscoped to Month vs. Week or to a breakpoint: both
   fixes are equally true in Week view and on mobile, and neither
   conflicts with either view's own existing font-size tiering (e.g.
   Week's larger empty-slot font-size below), which still wins where it
   is more specific. */
@media screen {
  .calendar-modern .calendar-empty-slot {
    opacity: .7;
    font-size: 10px;
    font-weight: 800;
    padding: 5px 8px;
  }
  .calendar-modern .calendar-empty-slot .calendar-empty-plus {
    opacity: .55;
  }
  .calendar-period-group .calendar-meal-card small:not(.calendar-eaters) {
    display: block;
    margin-top: .15rem;
    font-size: .62rem;
    line-height: 1.15;
    color: var(--muted);
    font-weight: 700;
  }
}


/* v0.17.3 — viewport-fixed mobile navigation drawer */
@media (max-width: 900px) {
    body.mobile-menu-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    .mobile-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 5000 !important;
        display: block;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .mobile-menu[hidden] {
        display: none !important;
    }

    .mobile-menu-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(18, 32, 26, .48);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .mobile-menu-inner {
        position: absolute;
        top: 0;
        right: 0;
        width: min(92vw, 430px);
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: max(12px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
        background: #F5F8F6;
        box-shadow: -14px 0 34px rgba(0,0,0,.18);
        transform: translateX(100%);
        transition: transform .18s ease;
        display: grid;
        align-content: start;
        gap: 9px;
    }

    .mobile-menu.visible .mobile-menu-inner {
        transform: translateX(0);
    }

    .mobile-menu-drawer-header {
        position: sticky;
        top: -1px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 3px 2px 9px;
        background: #F5F8F6;
    }

    .mobile-menu-drawer-header strong {
        color: var(--primary);
        font-size: 16px;
    }

    .mobile-menu-close {
        width: 40px;
        height: 40px;
        border: 1px solid #D2DED5;
        border-radius: 10px;
        background: white;
        color: #334148;
        font-size: 18px;
        font-weight: 900;
        cursor: pointer;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-inner {
        transition: none !important;
    }
}


/* v0.17.4 — visual shopping + connected family profiles */
.smart-cart-row {
    grid-template-columns: auto 50px minmax(0,1fr) auto;
}
.cart-item-photo {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #F3F7F4;
    align-self: start;
}
.cart-item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.friend-family-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-top: 10px;
    background: #fff;
}
.friend-family-profile-link {
    text-decoration: none;
    color: inherit;
    flex: 1;
}
.friend-family-profile-link:hover strong {
    color: var(--primary);
    text-decoration: underline;
}
.friend-family-card .family-photo-thumb {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    overflow: hidden;
}
.friend-family-card .family-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.friend-family-card .connected-family-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
    min-width: 0;
    margin-top: 12px;
}
.friend-family-card .connected-family-actions > * {
    width: 100%;
    min-width: 0;
}
.friend-family-card .connected-family-actions form {
    margin: 0;
}
.friend-family-card .connected-family-actions .btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    white-space: normal;
}
.shared-family-profile {
    display: grid;
    gap: 14px;
}
.shared-family-profile-hero {
    display: grid;
    grid-template-columns: 180px minmax(0,1fr);
    gap: 20px;
    align-items: center;
}
.shared-family-profile-photo {
    width: 180px;
    height: 150px;
    border-radius: 18px;
    overflow: hidden;
    background: #EAF3ED;
    display: grid;
    place-items: center;
    font-size: 52px;
}
.shared-family-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shared-family-profile-copy h1 {
    margin: 4px 0 4px;
}
.shared-family-profile-copy p {
    color: var(--muted);
    margin: 0 0 14px;
}
.shared-family-profile-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.shared-family-stat-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
}
.shared-family-stat {
    margin: 0;
    text-align: center;
    display: grid;
    gap: 4px;
}
.shared-family-stat > span {
    font-size: 24px;
}
.shared-family-stat > strong {
    font-size: 22px;
    color: var(--primary);
}
.shared-family-stat > small {
    color: var(--muted);
}
.shared-family-upcoming-list {
    display: grid;
}
.shared-family-upcoming-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid var(--border);
}
.shared-family-upcoming-row:first-child {
    border-top: 0;
}
.shared-family-upcoming-row > span {
    font-weight: 800;
}
.shared-family-privacy-note {
    background: #F3F7F4;
}
.shared-family-privacy-note p {
    color: var(--muted);
    margin-bottom: 0;
}
@media(max-width:720px) {
    .smart-cart-row {
        grid-template-columns: auto 44px minmax(0,1fr) auto;
    }
    .cart-item-photo {
        width: 40px;
        height: 40px;
    }
    .shared-family-profile-hero {
        grid-template-columns: 1fr;
    }
    .shared-family-profile-photo {
        width: 100%;
        height: 190px;
    }
    .shared-family-stat-grid {
        grid-template-columns: 1fr;
    }
    .shared-family-upcoming-row {
        display: grid;
        gap: 3px;
    }
}
@media(max-width:480px) {
    .friend-family-card .connected-family-actions {
        grid-template-columns: 1fr;
    }
}


/* v0.17.5 — Recipe Library creation action
   Phase 3C: replaces the old grid-template-columns rule below, which had
   no matching display:grid anywhere and never actually took effect (all
   four action buttons rendered full-width, one per line, from .btn's own
   display:block). New Recipe is now the sole primary action; Import/Make
   Soon/Manage Types moved into .recipe-library-secondary-actions as a
   compact row using the existing .btn.compact pattern. */
.recipe-library-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.recipe-library-empty-state {
    text-align: center;
    display: grid;
    gap: 10px;
    justify-items: center;
}


/* v0.17.6 — Sidebar brand readability
   Desktop logo increased ~26% so the MealCrew name/tagline remain legible. */
@media (min-width: 761px) {
    .mealcrew-header-logo-desktop {
        width: 212px;
        height: 60px;
    }
}

/* v0.17.7 — Brand readability pass */
@media (max-width:900px){.mealcrew-header-logo-mobile{width:190px;height:54px;object-fit:contain;object-position:left center}}
@media (max-width:520px){.mealcrew-header-logo-mobile{width:176px;height:50px}}
@media (max-width:390px){.mealcrew-header-logo-mobile{width:158px;height:46px}}


/* v0.17.8 — final UI cleanup */
.help-topic-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    overflow: visible;
}
.calendar-empty-slot {
    text-decoration: none;
    position: relative;
    transition: opacity .12s ease, transform .12s ease, box-shadow .12s ease;
}
.calendar-empty-slot .calendar-empty-plus {
    margin-left: auto;
    font-size: 11px;
    font-weight: 900;
    opacity: 0;
}
.calendar-empty-slot:hover,
.calendar-empty-slot:focus-visible {
    opacity: .95;
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(32,92,61,.16);
    outline: none;
}
.calendar-empty-slot:hover .calendar-empty-plus,
.calendar-empty-slot:focus-visible .calendar-empty-plus {
    opacity: 1;
}
.dashboard-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .dashboard-header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .dashboard-header-actions .btn {
        width: 100%;
    }
}
@media (max-width: 430px) {
    .dashboard-header-actions {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   v0.18.0 — Interactive Meal Calendar
   ============================================================ */
.calendar-drag-hint {
    margin-left:auto;
    opacity:.72;
}
.calendar-meal-card {
    cursor:pointer;
    position:relative;
    transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.calendar-meal-card:hover,
.calendar-meal-card:focus-visible {
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(31,71,52,.12);
    outline:none;
}
.calendar-drag-handle {
    flex:0 0 auto;
    color:#8B9891;
    font-size:10px;
    letter-spacing:-2px;
    cursor:grab;
    user-select:none;
}
.calendar-meal-card:active .calendar-drag-handle {
    cursor:grabbing;
}
.calendar-meal-card.is-dragging {
    opacity:.42;
}
.calendar-drop-active {
    outline:2px dashed var(--primary) !important;
    outline-offset:2px;
    box-shadow:0 0 0 4px rgba(33,122,70,.08) !important;
    opacity:1 !important;
}
body.calendar-modal-open {
    overflow:hidden;
}
.calendar-meal-modal {
    position:fixed;
    inset:0;
    z-index:6000;
}
.calendar-meal-modal[hidden] {
    display:none !important;
}
.calendar-meal-modal-backdrop {
    position:absolute;
    inset:0;
    background:rgba(18,32,26,.50);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}
.calendar-meal-modal-card {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(420px,calc(100vw - 28px));
    max-height:calc(100dvh - 28px);
    overflow-y:auto;
    background:white;
    border-radius:18px;
    padding:22px;
    box-shadow:0 24px 70px rgba(0,0,0,.25);
    text-align:center;
}
.calendar-meal-modal-x {
    position:absolute;
    top:10px;
    right:10px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:10px;
    background:#F7F9F7;
    color:var(--muted);
    font-size:22px;
    cursor:pointer;
}
.calendar-meal-modal-icon {
    font-size:34px;
    margin-bottom:5px;
}
.calendar-meal-modal-card h2 {
    margin:4px 28px 16px;
}
.calendar-meal-modal-actions {
    display:grid;
    gap:8px;
}
.calendar-meal-modal-actions .btn {
    width:100%;
    justify-content:center;
}
@media (max-width:760px) {
    .calendar-drag-hint,
    .calendar-drag-handle {
        display:none !important;
    }
    .calendar-meal-card {
        cursor:pointer;
    }
    .calendar-meal-modal-card {
        top:auto;
        bottom:0;
        left:0;
        transform:none;
        width:100%;
        max-width:none;
        border-radius:20px 20px 0 0;
        padding:22px 16px max(20px,env(safe-area-inset-bottom));
    }
}
@media print {
    .calendar-drag-handle,
    .calendar-drag-hint,
    .calendar-meal-modal {
        display:none !important;
    }
}


/* ============================================================
   v0.19.0 — Email notifications
   ============================================================ */
.account-email-section{
    margin:18px 0 2px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#F6F9F7;
}
.account-section-heading strong{font-size:16px}
.notification-toggle{
    display:flex!important;
    align-items:flex-start;
    gap:10px;
    padding:11px 12px;
    margin:8px 0!important;
    border:1px solid #DCE7DF;
    border-radius:11px;
    background:white;
    cursor:pointer;
}
.notification-toggle input{
    width:auto!important;
    margin:3px 0 0!important;
    flex:0 0 auto;
}
.notification-toggle span{display:grid;gap:2px}
.notification-toggle small{color:var(--muted);font-weight:500;line-height:1.35}
.notification-matrix{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.notification-matrix-row{
    display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
    padding:11px 12px;border:1px solid #DCE7DF;border-radius:11px;background:white;
}
.notification-matrix-info{display:grid;gap:2px;min-width:0}
.notification-matrix-info strong{font-size:14px}
.notification-matrix-info small{color:var(--muted);font-weight:500;line-height:1.35}
.notification-lead-time{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--text)}
.notification-lead-time input{width:60px;padding:5px 6px;margin:0}
.notification-matrix-channels{display:flex;gap:14px;flex:0 0 auto}
.notification-channel-toggle{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;cursor:pointer}
.notification-channel-toggle input{width:auto;margin:0}
.notification-channel-toggle-disabled{color:var(--muted);cursor:not-allowed;font-weight:600}
.notification-channel-toggle-disabled em{font-style:normal;font-weight:500;opacity:.8}
.account-inline-test{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:12px 0;
    padding:11px 12px;
    border:1px solid #DCE7DF;
    border-radius:11px;
    background:white;
}
.account-inline-test>div{display:grid;gap:2px;min-width:0}
.account-inline-test small{color:var(--muted);font-weight:500;line-height:1.35}
.account-inline-test .btn{flex:0 0 auto}
@media(max-width:640px){
    .account-inline-test{display:grid}
    .account-inline-test .btn{width:100%}
}
.account-email-test-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:14px;
}
.account-email-test-card p{margin:4px 0 0}
.family-email-invite{
    margin:14px 0;
    padding:14px;
    border:1px solid #D9E7DE;
    border-radius:12px;
    background:#F5F9F6;
}
.family-email-invite-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
}
.family-email-invite-form input{margin:0}
@media(max-width:640px){
    .account-email-test-card{display:grid}
    .family-email-invite-form{grid-template-columns:1fr}
    .family-email-invite-form .btn{width:100%}
}


/* v0.20.0 — Smart Ingredient Planning explanations */
.waste-reason{
    display:block;
    margin-top:6px;
    font-size:12px;
    line-height:1.3;
    font-weight:700;
    color:var(--primary);
}


/* v0.21.0 — Pantry + What Can I Make polish */
.make-page-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.make-quick-pantry{display:flex;gap:8px;align-items:center;flex:1;min-width:280px}
.make-quick-pantry input{flex:1;min-width:180px}
.make-summary-help{display:block;margin-top:5px;color:var(--muted);font-size:.92em}
.match-confidence{margin-top:3px;color:var(--muted);font-size:.82rem}
.make-empty{text-align:center;padding:34px 22px}
.make-incomplete{margin-top:18px}
.make-incomplete summary{cursor:pointer;font-weight:800}
.make-incomplete-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.make-incomplete-list a{padding:7px 10px;border:1px solid var(--border);border-radius:999px;text-decoration:none;background:#fff}
.pantry-fast-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:stretch}
.pantry-fast-add textarea{min-height:104px}
.pantry-advanced{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.pantry-advanced summary{cursor:pointer;font-weight:800;color:var(--primary)}
.cart-on-hand{display:inline-block;margin-top:5px;padding:3px 7px;border-radius:999px;background:#edf7ef;color:#23643c;font-size:.76rem;font-weight:800}
@media(max-width:700px){
  .make-quick-pantry,.pantry-fast-add{display:grid;grid-template-columns:1fr;width:100%}
  .make-quick-pantry{min-width:0}
  .make-page-actions>.btn{width:100%}
}


/* v0.22.0 — Recipe + Shopping finalization */
.recipe-quality-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.recipe-quality-filters a{display:inline-flex;gap:6px;align-items:center;padding:8px 11px;border:1px solid var(--border);border-radius:999px;text-decoration:none;background:#fff;font-weight:700}
.recipe-quality-filters a.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.recipe-quality-filters a span{opacity:.72}
.recipe-quality-badge{display:inline-block;margin:2px 6px 5px 0;padding:4px 8px;border-radius:999px;background:#f4f1e8;font-size:.76rem;font-weight:800}
.recipe-quality-badge.core{background:#fff0e8;color:#8a3c19}
.recipe-smart-data-note{display:flex;gap:8px;align-items:flex-start;flex-direction:column;padding:12px 14px;margin:4px 0 12px;border:1px solid var(--border);border-radius:12px;background:#f3f8f4}
.recipe-smart-data-note span{color:var(--muted);font-size:.9rem}
@media(max-width:700px){
  .recipe-quality-filters{display:grid;grid-template-columns:1fr 1fr}
  .recipe-quality-filters a{justify-content:center;text-align:center}
}


/* v0.22.1 — stricter recipe readiness explanations */
.recipe-quality-reasons{font-weight:700;opacity:.82}


/* v0.23.0 — Serving Sizes & Recipe Scaling */
.recipe-serving-edit{display:flex;gap:10px;align-items:center;max-width:260px}
.recipe-serving-edit input{width:100px}
.recipe-serving-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.recipe-serving-card h3{margin:.15rem 0}
.recipe-serving-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.recipe-serving-form label{display:flex;align-items:center;gap:8px;font-weight:800}
.recipe-serving-form input{width:82px}
.serving-scale-status{grid-column:1/-1;padding:9px 12px;border-radius:10px;background:#eef7f0;font-size:.9rem}
.serving-scale-status span{display:block;margin-top:4px;color:#7b5623}
.pick-serving-choice{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:800;margin-bottom:7px}
.pick-serving-choice input{width:68px;padding:6px}
.schedule-serving-choice{margin:10px 0 14px;padding:9px 12px;border-radius:10px;background:#f3f8f4}
.schedule-serving-choice label{display:flex;align-items:center;gap:8px;font-weight:800}
.schedule-serving-choice input{width:72px}
.plan-serving-choice{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:.78rem;font-weight:800}
.plan-serving-choice input{width:64px;padding:5px}
@media(max-width:700px){
  .recipe-serving-card{grid-template-columns:1fr}
  .recipe-serving-form{align-items:center}
  .serving-scale-status{grid-column:auto}
}

.recipe-card-meta-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}


/* v0.24.0 — Ideas for Your Family */
.family-ideas-page{max-width:1320px;margin:0 auto}
.ideas-heading{margin-bottom:12px}
.ideas-period-filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.ideas-period-filter a{padding:8px 13px;border-radius:999px;border:1px solid var(--border);background:#fff;text-decoration:none;font-weight:800}
.ideas-period-filter a.active{background:var(--primary);border-color:var(--primary);color:#fff}
.ideas-data-tip{display:flex;gap:12px;align-items:center;margin-bottom:24px}
.ideas-data-tip>span{font-size:28px}
.ideas-data-tip>div{flex:1}
.ideas-data-tip p{margin:3px 0 0;color:var(--muted)}
.ideas-groups{display:grid;gap:30px}
.ideas-group-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}
.ideas-group-heading>div{display:flex;gap:10px;align-items:flex-start}
.ideas-group-icon{font-size:25px;line-height:1}
.ideas-group-heading h2{margin:0;font-size:1.25rem}
.ideas-group-heading p{margin:4px 0 0;color:var(--muted)}
.ideas-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.idea-card{padding:0;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.idea-card-photo{display:block;aspect-ratio:16/9;background:#f1f1ec;overflow:hidden}
.idea-card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.idea-card-body{padding:14px;display:flex;flex-direction:column;gap:9px;flex:1}
.idea-card-type{font-size:.75rem;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.025em}
.idea-card h3{margin:0;font-size:1.05rem;line-height:1.2}
.idea-reasons{display:grid;gap:6px;flex:1}
.idea-reason{display:flex;gap:7px;align-items:flex-start;font-size:.86rem;line-height:1.3}
.idea-reason span{color:var(--primary);font-weight:900}
.idea-card-actions{display:flex;gap:8px;align-items:center;margin-top:4px}
.idea-card-actions form{margin:0}
.ideas-empty{display:flex;gap:10px;align-items:center;padding:18px;color:var(--muted)}
.ideas-empty>div{font-size:25px}
.ideas-empty p{margin:0}
.ideas-how{margin-top:30px;display:flex;gap:20px;align-items:center;justify-content:space-between}
.ideas-how p{margin:4px 0 0;color:var(--muted)}
.ideas-signal-list{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.ideas-signal-list span{padding:5px 8px;border-radius:999px;background:#f3f6f1;font-size:.78rem;font-weight:800}
@media(max-width:1100px){
  .ideas-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .ideas-card-grid{grid-template-columns:1fr}
  .ideas-data-tip,.ideas-how{align-items:flex-start;flex-direction:column}
  .ideas-data-tip .btn{width:100%}
  .ideas-signal-list{justify-content:flex-start}
  .idea-card-actions{display:grid;grid-template-columns:1fr 1fr}
  .idea-card-actions .btn,.idea-card-actions form,.idea-card-actions form button{width:100%}
}


/* v0.25.0 — Calendar Copy & Swap */
.calendar-selection-banner{position:sticky;top:8px;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;margin:0 0 12px;border:2px solid var(--primary);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.calendar-selection-banner[hidden]{display:none!important}
.calendar-selection-banner>div{display:flex;flex-direction:column;gap:2px}
.calendar-selection-banner span{font-size:.86rem;color:var(--muted)}
.calendar-selecting-target .calendar-meal-card,
.calendar-selecting-target .calendar-drop-slot{cursor:copy}
.calendar-selecting-target .calendar-meal-card:hover,
.calendar-selecting-target .calendar-drop-slot:hover{outline:3px solid var(--primary);outline-offset:2px}
.calendar-selection-source{outline:3px solid var(--primary)!important;outline-offset:2px;opacity:.72}
@media(max-width:760px){
  .calendar-selection-banner{top:6px;align-items:flex-start}
  .calendar-selection-banner span{font-size:.8rem}
}


/* v0.26.0 — Popular on MealCrew */
.recipe-library-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px;align-items:start}
/* recipe_library.html (the only page that uses .recipe-library-layout) has
   never actually rendered a .popular-meals-sidebar -- that element only
   exists on Top 10/Dashboard/Help, which use their own wrappers. The base
   rule above still unconditionally reserves a 310px second column for it
   anyway, at EVERY viewport wide enough for the two-column rule to be
   active (901px+), not just the narrow portrait band a previous fix here
   scoped to. That's the real root cause of the "large unused strip on the
   right" reported at both iPad portrait AND landscape: this is a
   structural, viewport-independent layout bug, not a breakpoint gap.
   :has() (already used elsewhere in this file) collapses the grid to a
   single track whenever there's no second child to put in it -- correct
   at any width, and it stops reserving space the instant a real
   .popular-meals-sidebar is ever added to this page. */
.recipe-library-layout:not(:has(.popular-meals-sidebar)){grid-template-columns:minmax(0,1fr)}
.recipe-library-main{min-width:0}
.popular-meals-sidebar{position:relative;min-width:0}
.popular-meals-card{position:sticky;top:18px;padding:16px}
.popular-meals-heading{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.popular-meals-heading h2{font-size:1.08rem;margin:2px 0 0}
.popular-meals-kicker{font-size:.67rem;letter-spacing:.12em;font-weight:900;color:var(--muted)}
.popular-live-badge{padding:3px 6px;border-radius:999px;background:#edf7ef;font-size:.62rem;font-weight:900;color:#26623c;letter-spacing:.08em}
.popular-meals-intro{font-size:.84rem;color:var(--muted);margin:7px 0 13px}
.popular-meals-list{list-style:none;padding:0;margin:0;display:grid;gap:0}
.popular-meal-row{display:grid;grid-template-columns:31px minmax(0,1fr);gap:8px;align-items:center;padding:9px 3px;border-top:1px solid var(--border)}
.popular-meal-row:first-child{border-top:0}
.popular-rank{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:.8rem;font-weight:900;background:#f3f3ef}
.popular-rank.rank-1,.popular-rank.rank-2,.popular-rank.rank-3{background:transparent;font-size:1.05rem}
.popular-meal-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.popular-meal-copy a,.popular-meal-copy strong{font-size:.88rem;font-weight:850;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.popular-meal-copy a{text-decoration:none;color:inherit}
.popular-meal-copy a:hover{text-decoration:underline}
.popular-meal-copy small{display:flex;gap:5px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.7rem}
.popular-library-badge{padding:2px 5px;border-radius:999px;background:#eef7f0;color:#28613e;font-weight:800}
.popular-owned{background:linear-gradient(90deg,rgba(80,135,90,.045),transparent)}
.popular-meals-footnote{display:flex;gap:7px;margin-top:11px;padding-top:10px;border-top:1px solid var(--border);color:var(--muted)}
.popular-meals-footnote p{font-size:.69rem;line-height:1.35;margin:0}
.popular-meals-empty{text-align:center;padding:16px 5px;color:var(--muted)}
.popular-meals-empty span{font-size:25px}
.popular-meals-empty p{font-size:.82rem;margin:6px 0 0}
@media(max-width:1180px){
  .recipe-library-layout{grid-template-columns:minmax(0,1fr) 270px;gap:16px}
}
@media(max-width:900px){
  .recipe-library-layout{grid-template-columns:1fr}
  .popular-meals-sidebar{order:2}
  .popular-meals-card{position:static}
  .popular-meals-list{grid-template-columns:1fr 1fr;column-gap:18px}
  .popular-meal-row:nth-child(2){border-top:0}
}
@media(max-width:600px){
  .popular-meals-list{grid-template-columns:1fr}
  .popular-meal-row:nth-child(2){border-top:1px solid var(--border)}
}


/* v0.26.1 — Home Top 10 + leaderboard eligibility polish */
.dashboard-section-link{font-size:.78rem;font-weight:800;text-decoration:none;color:var(--green)}
.dashboard-family-events-list{display:grid;gap:8px}
.dashboard-family-event{--event-accent:#4F8B68;display:grid;grid-template-columns:7px minmax(90px,125px) minmax(0,1fr) auto;align-items:center;gap:12px;min-height:64px;padding:8px 14px 8px 0;border:1px solid #DCE6DE;border-radius:14px;background:#fff;color:#33453C;text-decoration:none;overflow:hidden;box-shadow:0 2px 9px rgba(16,61,45,.04)}
.dashboard-family-event:hover{background:#F8FBF9;text-decoration:none}
.dashboard-family-event-color{align-self:stretch;background:var(--event-member-background,var(--event-accent))}
.dashboard-family-event-time{font-size:12px;font-weight:850;color:#52655B}
.dashboard-family-event-copy{display:flex;flex-direction:column;min-width:0;gap:3px}
.dashboard-family-event-copy strong{font-size:14px;color:#263B31;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-family-event-copy small{font-size:11px;color:#78857E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.family-event-private-badge{display:inline-flex;align-items:center;gap:.15em;padding:.15em .4em;border-radius:999px;background:#F1F4F1;color:#52645A;font-size:.68rem;font-weight:700;line-height:1.2;white-space:nowrap;vertical-align:baseline}
.calendar-multiday-bar .family-event-private-badge{font-size:.55rem;line-height:1;padding:0 .2em}
.dashboard-family-event--school{--event-accent:#4C91C6}
.dashboard-family-event--sports{--event-accent:#E48A38}
.dashboard-family-event--work{--event-accent:#7768AE}
.dashboard-family-event--appointment{--event-accent:#C95F71}
.dashboard-family-event--travel{--event-accent:#2D9C9C}
.dashboard-family-event--activity{--event-accent:#6E9E48}
.dashboard-family-events-empty{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px dashed #CBD9CE;border-radius:14px;background:rgba(255,255,255,.55);color:#78857E;font-size:12px}
.dashboard-family-events-empty a{font-weight:850;color:var(--green);text-decoration:none;white-space:nowrap}
@media(max-width:600px){
  .dashboard-family-event{grid-template-columns:6px 82px minmax(0,1fr) auto;gap:8px;padding-right:9px}
  .dashboard-family-event-time{font-size:10px}
  .dashboard-family-event-copy strong{font-size:12px}
  .dashboard-family-event-copy small{font-size:10px}
}
.dashboard-popular-card{padding:16px 18px}
.dashboard-popular-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:6px}
.dashboard-popular-heading h3{margin:2px 0 1px;font-size:1.05rem}
.dashboard-popular-heading p{margin:0;color:var(--muted);font-size:.78rem}
.dashboard-popular-list{list-style:none;padding:0;margin:4px 0 0;display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.dashboard-popular-row{display:grid;grid-template-columns:31px minmax(0,1fr);gap:8px;align-items:center;padding:8px 2px;border-top:1px solid var(--border)}
.dashboard-popular-row:nth-child(1),.dashboard-popular-row:nth-child(2){border-top:0}
@media(max-width:700px){
  .dashboard-popular-list{grid-template-columns:1fr}
  .dashboard-popular-row:nth-child(2){border-top:1px solid var(--border)}
}


/* Decorative chrome uses only the header's spare flex space. Controls keep
   their natural width; the 46px artwork fits the existing 68px desktop bar. */
.desktop-header-banner{display:none}
@media(min-width:1200px){
  .desktop-header-banner{
    display:block;flex:1 1 0;min-width:0;height:46px;margin-right:18px;
    position:relative;container:header-banner / inline-size;
    pointer-events:none;overflow:hidden;
  }
  .desktop-app-utility{flex-shrink:0}
  .desktop-header-banner::before{
    content:"";display:none;position:absolute;inset:0;
    background:url("branding/MealCrew_Header_Banner_Crop.png") center / cover no-repeat;
  }
  /* Cover with the dedicated crop without distortion. Keep the existing
     visibility threshold so account controls retain priority. */
  @container header-banner (min-width:360px){
    .desktop-header-banner::before{display:block}
  }
}

/* Home owns the width of BOTH columns. The old absolute rail sat outside
   the centered workspace and overflowed while leaving unused space on the left. */
.dashboard-with-sidebar{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.dashboard-main-column,.dashboard-popular-sidebar{min-width:0}
.dashboard-popular-sidebar-title{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:.95rem}
.dashboard-popular-sidebar-card .dashboard-popular-list{grid-template-columns:1fr}
.dashboard-popular-sidebar-card .dashboard-popular-row:nth-child(2){border-top:1px solid var(--border)}
/* Keep the actual rail in normal flow at smaller widths. There is no separate
   mobile-popular-section in the Home template. */
.desktop-popular-sidebar{display:block}

@media(min-width:901px){
  body.has-app-sidebar .page:has(.family-dashboard){
    --home-workspace-max:var(--app-workspace-max);
    --home-gutter:28px;
    width:min(var(--home-workspace-max),calc(100% - var(--app-sidebar-width) - 2 * var(--home-gutter)));
    max-width:var(--home-workspace-max);
    margin-left:calc(var(--app-sidebar-width) + max(var(--home-gutter),(100% - var(--app-sidebar-width) - var(--home-workspace-max))/2));
    margin-right:0;
  }
}
@media(min-width:1401px){
  body.has-app-sidebar .page:has(.family-dashboard){
    --home-workspace-max:calc(var(--app-workspace-max) + 318px);
    --home-gutter:36px;
  }
  .dashboard-with-sidebar{grid-template-columns:minmax(0,1fr) 300px;gap:18px}
  /* Greeting actions belong to the main column, not the combined rail width. */
  .dashboard-welcome{width:calc(100% - 318px)}
  .dashboard-popular-sidebar-card{position:sticky;top:18px}
}

/* v1.0.1 — Pantry quantity-first inventory */
.pantry-inventory-row{
    display:grid;
    grid-template-columns:minmax(150px,.7fr) minmax(420px,1.8fr) auto;
    grid-template-areas:"name edit delete";
    align-items:end;
}
.pantry-item-name{grid-area:name}
.pantry-inline-edit,.pantry-readonly-detail{grid-area:edit}
.pantry-item-delete-form{grid-area:delete;align-self:center}
.pantry-inline-edit{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin:0}
.pantry-inline-edit label{margin:0;font-size:11px;font-weight:800;color:var(--muted)}
.pantry-inline-edit input{margin-top:4px}.pantry-inline-edit .btn{white-space:nowrap}
.pantry-readonly-detail{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:800px){
    .pantry-inline-edit{grid-template-columns:1fr}
    /* Item name and delete share a top row (delete stays reachable next to
       what it deletes instead of stranded below a full-width Save button);
       the edit/readonly detail area spans full width beneath it. */
    .pantry-inventory-row{
        grid-template-columns:1fr auto;
        grid-template-areas:"name delete" "edit edit";
        align-items:center;
        row-gap:8px;
    }
    .pantry-item-delete-form{align-self:start}
    .pantry-inline-edit{width:100%}
    .pantry-inline-edit .btn{width:100%}
    .pantry-item-delete-form .cart-delete{
        padding:6px 10px;
        font-size:22px;
        line-height:1;
    }
    /* "What Can I Make?" and "Clear Pantry" were squeezing side by side and
       wrapping their labels -- each .btn is already width:100%, it just
       needs its own row. */
    .pantry-actions{flex-direction:column}
}

/* v1.1.1.91 — Phase 4B: Pantry paired-row "Add What You Have" entry.
   Ingredient/Amount are structurally paired per row instead of two
   separately-scrolled textareas, so there is nothing left to misalign. */
.pantry-rows{display:grid;gap:8px;margin-bottom:10px}
.pantry-rows-header,.pantry-row-entry{
    display:grid;
    grid-template-columns:1.4fr 1fr auto;
    gap:8px;
    align-items:center;
}
.pantry-rows-header{
    padding:0 2px;
    font-size:11px;
    font-weight:800;
    color:var(--muted);
}
.pantry-rows-header span:last-child{grid-column:2}
.pantry-row-remove{justify-self:center;line-height:1}
.pantry-add-row{margin-bottom:10px}
@media(max-width:600px){
    .pantry-rows-header{display:none}
    .pantry-row-entry{
        grid-template-columns:1fr auto;
        grid-template-areas:"ingredient remove" "amount amount";
        row-gap:6px;
    }
    .pantry-row-entry input[data-pantry-row-ingredient]{grid-area:ingredient}
    .pantry-row-entry input[data-pantry-row-amount]{grid-area:amount}
    .pantry-row-entry .pantry-row-remove{grid-area:remove;align-self:center}
}


/* v1.0.2 — Contact & Feedback */
.contact-page{width:min(760px,100%);max-width:1120px;margin:0 auto;padding:18px 14px 50px}
@media (min-width:901px){
  .contact-page{width:100%;padding:22px 0 54px}
}
.contact-hero{text-align:center}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.contact-form-card{padding:20px}
.contact-form-heading{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:18px}
.contact-form-heading h2{margin:0 0 4px}
.contact-mail-status{font-size:.7rem;font-weight:900;padding:5px 8px;border-radius:999px;white-space:nowrap}
.contact-mail-status.ready{background:#edf7ef;color:#23643c}
.contact-mail-status.offline{background:#fff0ed;color:#8a3c2d}
.contact-form{display:grid;gap:10px}
.contact-form>label{font-weight:800}
.contact-type-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:4px}
.contact-type-option{cursor:pointer;margin:0}
.contact-type-option input{position:absolute;opacity:0;pointer-events:none}
.contact-type-option > span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px;border:1px solid var(--border);border-radius:11px;background:#fff;text-align:center;font-size:.78rem}
.contact-type-option input:checked+span{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);background:#f1f8f3;color:var(--primary)}
.contact-form textarea{resize:vertical;min-height:180px}
.contact-form-hints{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.76rem;margin-top:-4px}
.contact-reply-note{padding:10px 12px;border-radius:10px;background:#f4f7f3;font-size:.82rem;line-height:1.4}
.contact-send-button{justify-self:start;min-width:170px}
.contact-context-card{position:sticky;top:18px;padding:18px}
.contact-context-card h2{margin-top:0;font-size:1.05rem}
.contact-context-card>p{color:var(--muted);font-size:.84rem}
.contact-context-list{display:grid;gap:9px;margin:15px 0}
.contact-context-list>div{display:grid;grid-template-columns:28px 1fr;gap:7px;align-items:center;padding:8px 0;border-top:1px solid var(--border);font-size:.82rem}
.contact-context-list>div:first-child{border-top:0}
.contact-context-list span{font-size:1.05rem}
.contact-success-card{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.contact-success-card>div:nth-child(2){flex:1}
.contact-success-card h2,.contact-success-card p{margin:0}
.help-hero-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:14px}

@media(max-width:820px){
  .contact-layout{grid-template-columns:1fr}
  .contact-context-card{position:static}
  .contact-type-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .contact-form-heading,.contact-success-card{align-items:stretch;flex-direction:column}
  .contact-type-grid{grid-template-columns:1fr}
  .contact-form-hints{flex-direction:column}
  .contact-send-button{width:100%}
}

/* v1.0.3 — Editable Admin Sales Pitch */
.sales-pitch-edit-form{display:grid;gap:9px;margin-top:16px}
.sales-pitch-edit-form textarea{width:100%;min-height:340px;resize:vertical;line-height:1.55;font:inherit}
.sales-pitch-editor-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sales-pitch-preview-wrap{margin-top:18px;border-top:1px solid var(--border);padding-top:14px}
.sales-pitch-preview-wrap summary{cursor:pointer;font-weight:800}
.sales-pitch-preview{white-space:pre-wrap;margin-top:12px}
.sales-pitch-reset-row{display:flex;justify-content:flex-end;margin-top:12px}
@media(max-width:600px){.sales-pitch-editor-footer{align-items:stretch;flex-direction:column}.sales-pitch-editor-footer .btn{width:100%}}


/* v1.0.4 — Recipe import + detail polish */
.recipe-photo-hero{background:#eef4ef;display:flex;align-items:center;justify-content:center;max-height:430px;overflow:hidden}
.recipe-photo-hero img{width:100%;height:clamp(260px,32vw,430px);max-height:430px;object-fit:contain;object-position:center}
.recipe-instruction-steps{margin:0;padding-left:1.55rem;display:grid;gap:.72rem;font-size:14px;line-height:1.65}
.recipe-instruction-steps li{padding-left:.2rem}
.recipe-instruction-steps li::marker{font-weight:900;color:var(--primary)}
@media(max-width:600px){.recipe-photo-hero img{height:260px}.recipe-instruction-steps{font-size:13px;padding-left:1.4rem}}


/* v1.0.6 — Flexible manual meal scheduling */
.manual-meal-scope-bar{display:grid;grid-template-columns:1fr 1fr;max-width:560px;margin:0 0 8px}
.manual-meal-scope-bar a{display:flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:850;color:var(--muted)}
.manual-meal-scope-bar a.active{background:var(--primary);color:#fff}
.manual-meal-scope-note{margin:0 0 14px;color:var(--muted);font-size:.82rem}
.manual-meal-category-badges{display:flex;gap:5px;flex-wrap:wrap;margin:3px 0 5px}
.manual-meal-category-badges span{font-size:.67rem;font-weight:800;padding:3px 6px;border-radius:999px;background:#f0f4f1;color:var(--muted)}
@media(max-width:520px){.manual-meal-scope-bar{max-width:none;width:100%}}

/* v1.0.7 */
.auth-text-link{display:block;text-align:center;margin-top:10px;font-weight:800}
.verification-resend-card{margin-top:12px;display:grid;gap:10px}
.email-verification-status{margin:6px 0 12px;font-size:.78rem;font-weight:850}
.email-verification-status.verified{color:#217a46}.email-verification-status.pending{color:#9a5c12}

/* v1.0.8 — Recipe form safety */
.form-preserved-notice{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:#f4f8f5;border:1px solid var(--border);font-size:.82rem;font-weight:800}

/* v1.0.9 — Calendar Quick Add */
.calendar-first-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}
.calendar-type-card,.calendar-create-card{display:flex;flex-direction:column;align-items:stretch}
/* Phase 3B: visually promote the single most-used path (Pick Existing
   Meal) among six otherwise equally-weighted cards -- styling only, no
   markup/structure change to any of the other five. */
.choice-method-card-primary{border:2px solid var(--primary);background:#f2f9f4}
.choice-method-card-primary .choice-method-icon{font-size:40px}
.calendar-quick-entry-form{display:grid;gap:8px;margin-top:auto}
.calendar-quick-entry-form input[type="text"]{width:100%}
.calendar-create-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.calendar-create-actions .btn{flex:1}
.create-and-schedule-note{display:flex;flex-direction:column;gap:3px;margin:0 0 14px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#f4f8f5}
.create-and-schedule-note span{font-size:.82rem;color:var(--muted)}
@media(max-width:700px){.calendar-first-choice-grid{grid-template-columns:1fr}.calendar-create-actions{flex-direction:column}}

/* v1.0.10 — Who's Cooking + meal reminders */
.calendar-cook-line{display:block;margin-top:3px;font-size:.68rem;font-weight:750;opacity:.84}
.calendar-cook-editor{display:grid;gap:8px;text-align:left;margin:12px 0 16px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#f8faf8}
.calendar-cook-editor select,.calendar-cook-editor input{width:100%}
.calendar-reminder-toggle{display:flex;align-items:flex-start;gap:8px;margin-top:3px}
.calendar-reminder-toggle input{width:auto;margin-top:3px}
.calendar-reminder-toggle span{display:grid;gap:2px}
.calendar-reminder-toggle small{font-size:.72rem;color:var(--muted)}
.calendar-reminder-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.calendar-reminder-fields label{grid-row:1}
.calendar-reminder-fields input,.calendar-reminder-fields select{grid-row:2}
@media(max-width:520px){.calendar-reminder-fields{grid-template-columns:1fr}.calendar-reminder-fields label,.calendar-reminder-fields input,.calendar-reminder-fields select{grid-row:auto}}
.meal-cook-badge{display:inline-block;margin:6px 0;font-size:.78rem;font-weight:800;color:var(--muted)}

/* v1.0.11 — flexible reminder lead time */
.calendar-reminder-fields{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;align-items:start}
.calendar-reminder-time-block,.calendar-reminder-lead-block{display:grid;gap:6px}
.calendar-reminder-lead-inputs{display:flex;gap:10px;align-items:end}
.calendar-reminder-lead-inputs label{display:flex;align-items:center;gap:6px;font-weight:700}
.calendar-reminder-lead-inputs input{width:76px}
.calendar-reminder-lead-block small{font-size:.72rem;color:var(--muted)}
@media(max-width:560px){
  .calendar-reminder-fields{grid-template-columns:1fr}
  .calendar-reminder-lead-inputs{flex-wrap:wrap}
}

/* v1.0.12 — Product Analytics */
.product-analytics-card{display:grid;gap:18px}
.product-analytics-columns{align-items:start}
.analytics-funnel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0}
.analytics-funnel>div{padding:12px;border:1px solid var(--border);border-radius:10px;background:#f8faf8;text-align:center}
.analytics-funnel strong{display:block;font-size:1.35rem}
.analytics-funnel span{display:block;margin-top:3px;font-size:.72rem;color:var(--muted);font-weight:750}
.analytics-retention-wait,.analytics-retention-result{padding:14px;border:1px solid var(--border);border-radius:12px;background:#f8faf8}
.analytics-retention-result strong{font-size:2rem}
.feature-adoption-block{margin-top:2px}
.feature-adoption-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.feature-adoption-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px}
.feature-adoption-row>div:first-child{display:flex;align-items:center;gap:7px}
.feature-adoption-value{white-space:nowrap;font-weight:850}
.feature-adoption-value small{color:var(--muted);font-weight:700}
.dashboard-family-row-analytics{grid-template-columns:minmax(150px,1.6fr) .55fr .9fr .8fr .7fr .65fr .55fr}
.family-activation-pill{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:.68rem;font-weight:850}
.family-activation-pill.active{background:#e7f5eb;color:#217a46}
.family-activation-pill.inactive{background:#f4f4f4;color:var(--muted)}
.email-delivery-tip{padding:10px 12px;border-radius:10px;background:#fff8e8;border:1px solid #ead8a7}
.admin-email-status{margin-top:4px;font-size:.76rem}
.email-status{font-weight:750}.email-status.verified{color:#217a46}.email-status.pending{color:#9a5c12}.email-status.missing{color:var(--muted)}
@media(max-width:800px){
  .analytics-funnel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-adoption-grid{grid-template-columns:1fr}
  .dashboard-family-row-analytics{grid-template-columns:minmax(120px,1.4fr) .55fr .8fr .75fr .65fr .6fr .55fr;font-size:.78rem}
}
@media(max-width:560px){
  .analytics-funnel{grid-template-columns:1fr 1fr}
  .dashboard-family-table{overflow-x:auto}
  .dashboard-family-row-analytics{min-width:760px}
}

/* v1.0.13 — self-service account deletion */
.account-danger-zone{margin-top:18px;border-color:#d8a5a5}
.account-danger-zone h2,.delete-account-card h2{margin-top:0}
.btn.danger{background:#a52a2a;color:#fff;border-color:#a52a2a}
.btn.danger:hover{filter:brightness(.94)}
.delete-account-warning{padding:14px;border:1px solid #d8a5a5;border-radius:12px;background:#fff6f6;margin:12px 0 18px}
.delete-account-warning p:last-child{margin-bottom:0}

/* v1.0.13.1 — cleaner account profile + family ownership transfer */
.profile-picture-details{margin:14px 0 22px}
.profile-picture-details>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center}
.profile-picture-details>summary::-webkit-details-marker{display:none}
.profile-picture-change-panel{margin-top:16px;padding-top:16px;border-top:1px solid var(--border, #d8e2dc)}
.family-owner-card{margin-top:18px}
.owner-transfer-details>summary{list-style:none;cursor:pointer;display:inline-flex}
.owner-transfer-details>summary::-webkit-details-marker{display:none}
.owner-transfer-body{margin-top:16px;max-width:720px}
.owner-transfer-body select{width:100%}

/* v1.0.17 — installed/mobile UX polish */
.calendar-conflict-card{max-width:520px}
.calendar-conflict-message{margin:3px 0 14px;color:var(--muted);text-align:center}
.calendar-conflict-actions{display:grid;gap:9px}
.calendar-conflict-actions .btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px}
.calendar-conflict-actions .btn small{font-size:.7rem;font-weight:650;opacity:.88}

/* The desktop dashboard keeps its roomy photography. Installed/mobile layouts
   trade some hero-image height for faster scanning of Breakfast/Lunch/Dinner. */

/* v1.0.19 — responsive Today cards
   Desktop remains unchanged. Wider mobile/tablet screens use multiple compact
   columns so meal photography keeps natural card proportions instead of
   stretching into panoramic banners. Narrow phones remain one-column. */

/* Tablet / Fold landscape & other roomy app viewports */
@media (min-width:700px) and (max-width:1100px){
  .dashboard-today-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }
  .dashboard-meal-photo{
    width:calc(100% - 20px);
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:cover;
    margin:0 10px;
  }
  .dashboard-meal-label{padding:10px 12px 6px}
  .dashboard-meal-copy{padding:8px 12px 4px;min-height:0}
  .dashboard-meal-copy h3{
    font-size:18px;
    line-height:1.15;
    margin-bottom:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .dashboard-meal-actions{padding:4px 12px 11px}
  .dashboard-empty-meal{min-height:205px}
}

/* Mid-width portrait tablets / narrow Fold layouts: two balanced columns. */
@media (min-width:560px) and (max-width:699px){
  .dashboard-today-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .dashboard-meal-photo{
    width:calc(100% - 20px);
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:cover;
    margin:0 10px;
  }
  .dashboard-meal-label{padding:9px 12px 5px}
  .dashboard-meal-copy{padding:8px 12px 4px;min-height:0}
  .dashboard-meal-copy h3{font-size:18px;line-height:1.18;margin-bottom:4px}
  .dashboard-meal-actions{padding:4px 12px 10px}
  .dashboard-empty-meal{min-height:205px}
}

/* Normal phones: one column, but cap the photo width so it never becomes an
   ultra-wide banner on unusually wide devices. */
@media (max-width:559px){
  .dashboard-today-grid{grid-template-columns:1fr}
  .dashboard-meal-photo{
    width:min(calc(100% - 20px),460px);
    height:auto;
    aspect-ratio:16 / 9;
    object-fit:cover;
    margin:0 auto;
  }
  .dashboard-meal-label{padding:9px 12px 5px}
  .dashboard-meal-copy{padding:8px 12px 4px;min-height:0}
  .dashboard-meal-copy h3{font-size:18px;line-height:1.18;margin-bottom:4px}
  .dashboard-meal-actions{padding:4px 12px 10px}
  .dashboard-meal-actions .btn{min-height:38px}
  .dashboard-empty-meal{
    min-height:0;
    padding:8px 14px 10px;
    justify-content:flex-start;
  }
  .dashboard-empty-meal .dashboard-empty-icon{
    font-size:28px;
    line-height:1;
    margin:0 0 2px;
  }
  .dashboard-empty-meal h3{margin:2px 0 1px;font-size:17px}
  .dashboard-empty-meal p{margin:0 0 6px}
}

/* v1.0.20 — network/offline foundation */
.network-status-banner{
  position:sticky;top:0;z-index:10000;
  padding:9px 14px;text-align:center;
  background:#FFF4D6;color:#5B4517;
  border-bottom:1px solid #E4CD8D;
  font-size:.82rem;font-weight:800
}
.network-status-banner[hidden]{display:none!important}


/* v1.0.21 — touch/navigation readiness
   Applied only on coarse-pointer devices (phones/tablets/touchscreens). */
@media (pointer:coarse) {
  .btn,
  button,
  select,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height:44px;
  }

  .mobile-menu a,
  .dashboard-change-link,
  .dashboard-panel-heading a,
  .calendar-empty-slot,
  .calendar-meal-card,
  .dashboard-tomorrow-row,
  .dashboard-makesoon-item {
    min-height:44px;
  }

  .dashboard-change-link,
  .dashboard-panel-heading a {
    display:inline-flex;
    align-items:center;
    padding:8px 4px;
    margin:-8px -4px;
  }

  .calendar-meal-card,
  .calendar-empty-slot {
    touch-action:manipulation;
  }

  input,
  select,
  textarea {
    font-size:max(16px, 1em);
  }
}

/* Installed-app polish. This class is added only when MealCrew is actually
   running in standalone/PWA mode. */
.mealcrew-standalone body {
  overscroll-behavior-y:none;
}

/* v1.0.22 — deep-link audit */
.deep-link-audit-list{display:grid;gap:8px}
.deep-link-audit-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px;border:1px solid var(--border);border-radius:10px}
.deep-link-audit-row>div{display:grid;gap:4px;min-width:0}
.deep-link-audit-row code{font-size:.78rem;overflow-wrap:anywhere;color:var(--muted)}
.deep-link-audit-status{white-space:nowrap;font-size:.75rem;font-weight:850}
.deep-link-audit-status.good{color:#217a46}
.deep-link-audit-status.bad{color:#9b2c2c}
@media(max-width:650px){.deep-link-audit-row{align-items:flex-start;flex-direction:column}.deep-link-audit-status{white-space:normal}}

/* v1.0.24 — branded standalone launch experience */
.mealcrew-launch-screen{
  display:none;
  position:fixed;
  inset:0;
  z-index:2147483646;
  background:#F4F8F5;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.mealcrew-launching .mealcrew-launch-screen{display:flex}
.mealcrew-launch-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  color:#103D2D;
}
.mealcrew-launch-inner img{
  width:108px;
  height:108px;
  border-radius:26px;
  box-shadow:0 8px 28px rgba(16,61,45,.12);
  margin-bottom:4px;
}
.mealcrew-launch-inner strong{
  font-size:2rem;
  line-height:1;
  letter-spacing:-.02em;
}
.mealcrew-launch-inner span{
  color:#66776E;
  font-size:.9rem;
  font-weight:700;
}
.mealcrew-launch-screen.mealcrew-launch-hide{
  opacity:0;
  transition:opacity .22s ease;
}

/* v1.0.26 — local form recovery */
.draft-recovery-banner{position:sticky;top:0;z-index:1002;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:9px 14px;background:#eef7ef;border-bottom:1px solid #c8ddcb;color:#174f35;font-size:.86rem;font-weight:800;text-align:center}.draft-recovery-banner[hidden]{display:none}.draft-recovery-banner button{border:0;background:transparent;color:#315f4b;text-decoration:underline;font:inherit;font-size:.78rem;cursor:pointer;padding:2px 4px}

/* v1.0.27 — public legal pages */
.footer-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer-links>a{font-size:.76rem}
.legal-page{max-width:900px;margin-inline:auto;line-height:1.65}
.legal-page h2{margin:26px 0 7px;color:#163C2D;font-size:1.15rem}
.legal-page p{margin:0 0 12px;color:#42534B}
.legal-heading p{color:var(--muted)}
@media(max-width:650px){
  footer{gap:8px;align-items:center;padding:0 16px 28px;box-sizing:border-box}
  .footer-links{width:100%;justify-content:center;gap:10px;text-align:center}
  .footer-version{flex-basis:100%;text-align:center}
}

/* v1.0.31 — app permission / browser security audit */
.permission-audit-list{display:grid;gap:10px}
.permission-audit-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px;border:1px solid var(--border);border-radius:12px}
.permission-audit-copy{min-width:0}
.permission-audit-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.permission-audit-copy p{margin:5px 0 0;color:var(--muted);line-height:1.45}
.permission-audit-pill{font-size:.7rem;font-weight:850;border-radius:999px;padding:3px 8px;background:#eef3ef}
.permission-audit-pill.good{color:#217a46;background:#edf8f0}
.permission-audit-pill.bad{color:#9b2c2c;background:#fff0f0}
.permission-audit-check{font-size:1.2rem;font-weight:900;color:#217a46}
.admin-inline-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}


/* Staging environment identity */
.staging-environment-banner {
  position: sticky;
  top: 0;
  z-index: 10050;
  width: 100%;
  padding: 8px 14px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .04em;
  background: #fff3cd;
  color: #5f4500;
  border-bottom: 1px solid #e3c75f;
  box-sizing: border-box;
}


/* ============================================================
   Onboarding Stage 2 — Existing-user offer
   ============================================================ */
.onboarding-offer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(10, 28, 21, .58);
    backdrop-filter: blur(4px);
}
.onboarding-offer-card {
    width: min(540px, 100%);
    background: #fff;
    border: 1px solid rgba(16, 61, 45, .14);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(7, 31, 22, .28);
    padding: 34px;
    text-align: center;
}
.onboarding-offer-icon { font-size: 42px; line-height: 1; margin-bottom: 12px; }
.onboarding-offer-kicker {
    color: #527365;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 8px;
}
.onboarding-offer-card h2 { margin: 0 0 12px; font-size: clamp(1.55rem, 4vw, 2rem); }
.onboarding-offer-card p { color: #4e625a; line-height: 1.55; margin: 0 auto 12px; max-width: 460px; }
.onboarding-offer-card .onboarding-offer-note { font-size: .92rem; color: #667a72; }
.onboarding-offer-actions { display: grid; gap: 10px; margin-top: 24px; }
.onboarding-offer-actions .btn { width: 100%; justify-content: center; }
.onboarding-no-thanks {
    border: 0;
    background: transparent;
    color: #667a72;
    text-decoration: underline;
    cursor: pointer;
    padding: 8px;
    font: inherit;
}
.getting-started-page { max-width: 900px; margin: 0 auto; }
.getting-started-hero {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 24px;
}
.getting-started-icon { font-size: 48px; line-height: 1; }
.getting-started-hero h1 { margin: 2px 0 8px; }
.getting-started-hero p { margin: 0; color: #52655d; max-width: 680px; line-height: 1.55; }
.getting-started-card {
    background: #fff;
    border: 1px solid #dce8e1;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 8px 24px rgba(16, 61, 45, .06);
}
.getting-started-card h2 { margin-top: 0; }
.getting-started-card p { color: #52655d; line-height: 1.55; }
.getting-started-principles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
}
.getting-started-principles > div {
    background: #f7faf8;
    border: 1px solid #dce8e1;
    border-radius: 16px;
    padding: 18px;
}
.getting-started-principles strong,
.getting-started-principles span { display: block; }
.getting-started-principles span { margin-top: 6px; color: #667a72; font-size: .92rem; line-height: 1.4; }
@media (max-width: 700px) {
    .onboarding-offer-backdrop { padding: 14px; align-items: end; }
    .onboarding-offer-card { padding: 26px 20px 22px; border-radius: 22px; }
    .getting-started-hero { gap: 12px; }
    .getting-started-icon { font-size: 38px; }
    .getting-started-principles { grid-template-columns: 1fr; }
}


/* ============================================================
   Onboarding Stage 3 — state-aware Home checklist
   ============================================================ */
.getting-started-dashboard {
    margin: 0 0 22px;
    padding: 24px;
    border: 1px solid #cfe1d6;
    background: linear-gradient(135deg, #ffffff 0%, #f4faf6 100%);
    box-shadow: 0 10px 28px rgba(16, 61, 45, .08);
}
.getting-started-dashboard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}
.getting-started-dashboard-head h2 { margin: 2px 0 6px; }
.getting-started-dashboard-head p { margin: 0; color: #5c7067; max-width: 720px; line-height: 1.5; }
.getting-started-progress-copy {
    min-width: 92px;
    text-align: right;
}
.getting-started-progress-copy strong {
    display: block;
    color: #103d2d;
    font-size: 1.35rem;
}
.getting-started-progress-copy span { color: #6a7d75; font-size: .8rem; }
.getting-started-progress-track {
    height: 8px;
    margin: 18px 0;
    overflow: hidden;
    border-radius: 999px;
    background: #dfeae4;
}
.getting-started-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #1f7449;
    transition: width .2s ease;
}
.getting-started-step-list { display: grid; gap: 10px; }
.getting-started-step {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #dce8e1;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}
.getting-started-step:hover { border-color: #a9c8b5; background: #fbfefc; }
.getting-started-step.is-done { background: #f2f8f4; }
.getting-started-step.is-optional { border-style: dashed; }
.getting-started-step-status {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e5efe9;
    color: #1c6643;
    font-weight: 800;
}
.getting-started-step.is-done .getting-started-step-status {
    background: #1f7449;
    color: #fff;
}
.getting-started-step-copy strong,
.getting-started-step-copy small { display: block; }
.getting-started-step-copy small { margin-top: 3px; color: #687b73; line-height: 1.35; }
.getting-started-step-copy em {
    margin-left: 6px;
    color: #6a7d75;
    font-size: .72rem;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.getting-started-step-action { color: #1c6643; font-weight: 700; white-space: nowrap; }
.getting-started-dashboard-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}
.getting-started-dashboard-actions form { margin: 0; }
.getting-started-remaining { color: #687b73; font-size: .9rem; }
.getting-started-dismiss {
    border: 0;
    background: transparent;
    padding: 8px;
    color: #687b73;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
@media (max-width: 700px) {
    .getting-started-dashboard { padding: 18px; }
    .getting-started-dashboard-head { display: block; }
    .getting-started-progress-copy { margin-top: 12px; text-align: left; }
    .getting-started-step { grid-template-columns: 36px minmax(0, 1fr); }
    .getting-started-step-action { grid-column: 2; white-space: normal; }
    .getting-started-dashboard-actions { align-items: flex-start; flex-direction: column; }
}

.joined-family-role-note {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: #f2f8f4;
    color: #3a544a;
    font-size: .92rem;
    line-height: 1.45;
}
.joined-family-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 18px 0 22px;
    padding: 14px 18px;
    border: 1px solid #dce8e1;
    border-radius: 14px;
    background: #f7faf8;
}
.joined-family-stats span { color: #52655d; font-size: .92rem; }
.joined-family-stats strong { margin-right: 4px; color: #103d2d; font-size: 1.1rem; }
.joined-family-ready { margin-top: 20px; text-align: right; }
.joined-family-ready .btn { min-width: 260px; }
@media (max-width: 700px) {
    .joined-family-stats { gap: 8px 16px; padding: 12px 14px; }
    .joined-family-ready .btn { width: 100%; min-width: 0; }
}


.getting-started-step.is-locked {
    opacity: .58;
    background: #f6f8f7;
    border-style: dashed;
    cursor: default;
}
.getting-started-step.is-locked:hover {
    border-color: #dce8e1;
    background: #f6f8f7;
}
.getting-started-step.is-locked .getting-started-step-status {
    background: #e8ecea;
    color: #748078;
}
.getting-started-step.is-locked .getting-started-step-action {
    color: #7b8780;
    font-weight: 600;
}

.getting-started-compact {
    max-width: 980px;
    margin: 12px auto 14px;
    padding: 10px 14px;
    border: 1px solid #d7e7dd;
    border-radius: 12px;
    background: #f3faf6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.getting-started-compact-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.getting-started-compact-copy span {
    color: #64756c;
    font-size: .9rem;
}
@media (max-width: 700px) {
    .getting-started-compact {
        margin: 10px 12px 12px;
        align-items: flex-start;
        flex-direction: column;
    }
}

.getting-started-slot-actions,
.getting-started-compact-slots {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.getting-started-slot-actions a,
.getting-started-compact-slots a {
    text-decoration: none;
    border: 1px solid #cfe1d6;
    border-radius: 9px;
    background: #fff;
    color: #155c39;
    font-weight: 700;
    padding: 7px 10px;
    white-space: nowrap;
}
.getting-started-slot-actions a:hover,
.getting-started-compact-slots a:hover {
    background: #eaf5ee;
}
.getting-started-compact-here {
    color: #416d56;
    font-weight: 700;
    white-space: nowrap;
}
@media (max-width: 700px) {
    .getting-started-slot-step {
        align-items: flex-start;
    }
    .getting-started-slot-actions,
    .getting-started-compact-slots {
        justify-content: flex-start;
    }
}


/* Community Recipes — v1.0.37.0 */
.recipe-scope-tabs {
    max-width: 980px;
    margin: 0 auto 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.recipe-scope-tabs a {
    padding: 11px 12px;
    border: 1px solid #d8e4dc;
    border-radius: 10px;
    background: #eef4f0;
    color: #40564b;
    text-align: center;
    text-decoration: none;
    font-weight: 800;
}
.recipe-scope-tabs a.active {
    background: #1f7449;
    border-color: #1f7449;
    color: #fff;
}
.community-sharing-controls,
.recipe-discovery-intro {
    max-width: 980px;
    margin: 0 auto 16px;
}
.community-sharing-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
}
.community-sharing-controls > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.community-sharing-controls span,
.recipe-discovery-intro span { color: #66796f; }
.community-sharing-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.community-sharing-buttons form { margin: 0; }
.recipe-discovery-intro {
    padding: 14px 16px;
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}
.recipe-owner-line {
    margin: 6px 0 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    color: #53675d;
    font-size: .88rem;
}
.recipe-share-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: .74rem;
    font-weight: 800;
}
.recipe-share-badge.community { background: #e2f3e8; color: #17613b; }
.recipe-share-badge.friend { background: #e8f0f7; color: #315e7f; }
.recipe-share-badge.private { background: #eef1ef; color: #617168; }
.recipe-share-badge.mine { background: #f1f5f2; color: #496257; }
.community-recipe-card .recipe-card-actions form { margin: 0; }
.community-detail-photo {
    max-width: 760px;
    margin: 0 auto 16px;
    padding: 0;
    overflow: hidden;
}
.community-detail-photo img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    display: block;
}
.recipe-discovery-empty { padding: 22px; }
.community-share-option { margin-top: 10px; }
@media (max-width: 760px) {
    .recipe-scope-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .community-sharing-controls {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* v1.0.37.4 — TRUE Recipes viewport centering
   Center the PRIMARY recipe column on the browser viewport.
   The Top 10 panel sits outside that centered column and therefore does not
   pull the recipe controls left or right. */
@media (min-width: 1450px) {
    .recipe-viewport-center {
        width: min(820px, calc(100vw - 80px));
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        left: auto;
    }

    .recipe-viewport-center .heading,
    .recipe-viewport-center .recipe-scope-tabs,
    .recipe-viewport-center .recipe-library-layout,
    .recipe-viewport-center .recipe-discovery-intro,
    .recipe-viewport-center .recipe-period-filters,
    .recipe-viewport-center .recipe-type-filters,
    .recipe-viewport-center .search,
    .recipe-viewport-center .recipe-list {
        width: 100%;
        max-width: none;
    }

    .recipe-viewport-center .recipe-library-layout {
        display: block;
        position: relative;
    }

    .recipe-viewport-center .recipe-library-main {
        width: 100%;
        min-width: 0;
    }

    .recipe-viewport-center .popular-meals-sidebar {
        position: absolute;
        left: calc(100% + 22px);
        top: 0;
        width: 270px;
    }

    .recipe-viewport-center .popular-meals-card {
        position: sticky;
        top: 18px;
    }

    .recipe-viewport-center > .heading {
        text-align: center;
    }

    .recipe-viewport-center > .heading p {
        text-align: center;
    }
}

/* At narrower desktop widths keep the existing responsive two-column layout
   so nothing is forced off-screen. */
@media (min-width: 901px) and (max-width: 1449px) {
    .recipe-viewport-center {
        position: static;
        width: 100%;
        max-width: none;
        margin: 0;
    }
}

@media (max-width: 900px) {
    .recipe-viewport-center {
        position: static;
        width: 100%;
        max-width: none;
        margin: 0;
    }
}

/* v1.0.40 — Recipes live filtering */
[data-live-recipe-filters] {
  transition: opacity .14s ease;
}
[data-live-recipe-filters].recipe-live-loading {
  opacity: .58;
  pointer-events: none;
}
[data-live-recipe-filters].recipe-live-loading .recipe-list {
  min-height: 140px;
}

/* v1.0.41 — Recipes filter declutter */
.recipe-primary-search { margin: 0 0 12px; }
.recipe-core-filters { display: grid; gap: 8px; margin-bottom: 10px; }
.recipe-filter-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 8px; }
.recipe-library-sort-row.compact-sort { margin: 0; display: flex; align-items: center; gap: 8px; }
.recipe-library-sort-row.compact-sort select { min-width: 220px; }
.recipe-advanced-filters { position: relative; }
.recipe-advanced-filters > summary,
.recipe-bulk-sharing > summary { list-style: none; cursor: pointer; user-select: none; }
.recipe-advanced-filters > summary::-webkit-details-marker,
.recipe-bulk-sharing > summary::-webkit-details-marker { display: none; }
.recipe-advanced-filters > summary { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--card); border-radius: 12px; padding: 10px 14px; font-weight: 800; }
.filter-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: var(--green); color: #fff; font-size: .78rem; padding: 0 6px; }
.recipe-advanced-filter-panel { margin-top: 8px; padding: 14px; border: 1px solid var(--border); background: var(--card); border-radius: 14px; box-shadow: 0 10px 30px rgba(16,61,45,.07); }
.recipe-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 8px 0 12px; }
.recipe-active-filters a { text-decoration: none; border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 6px 10px; font-size: .82rem; font-weight: 700; color: var(--text); }
.recipe-active-filters a.clear-all { color: var(--muted); background: transparent; }
.recipe-bulk-sharing { padding: 0; overflow: hidden; }
.recipe-bulk-sharing > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.recipe-bulk-sharing > summary span:first-child { display: flex; flex-direction: column; gap: 2px; }
.recipe-bulk-sharing > summary small { color: var(--muted); font-weight: 500; }
.recipe-summary-hint { color: var(--green); font-weight: 800; }
.community-sharing-expanded { border-top: 1px solid var(--border); padding: 12px 16px 15px; }
.community-sharing-expanded p { margin: 0 0 10px; color: var(--muted); }
@media (max-width: 720px) {
  .recipe-filter-toolbar { align-items: stretch; flex-direction: column; }
  .recipe-library-sort-row.compact-sort { width: 100%; }
  .recipe-library-sort-row.compact-sort select { min-width: 0; width: 100%; }
  .recipe-advanced-filters > summary { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* v1.0.42 — global live search & filters */
[data-live-filter-region] {
    transition: opacity .14s ease;
}
[data-live-filter-region].live-filter-loading {
    opacity: .68;
}
.pantry-live-search,
.shopping-live-search {
    margin: 0 0 14px;
}
@media (max-width: 480px) {
    /* The search input and its button were squeezing into a single row and
       clipping the placeholder text on narrow phones -- stack them instead. */
    .pantry-live-search { flex-wrap: wrap; }
    .pantry-live-search input,
    .pantry-live-search button { flex: 1 1 100%; }
}

/* v1.0.43 — reliable live search + What Can I Make search */
.make-filter-grid .make-search-field {
  grid-column: 1 / -1;
}
.make-filter-grid .make-search-field input[type="search"] {
  width: 100%;
}

/* v1.0.46 workflow polish */
.today-meal-empty-icon {
  font-size: 2rem;
  margin: .35rem 0 .2rem;
}
.inline-save-status {
  min-height: 1.25rem;
  margin-top: .45rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--green, #2f6b4f);
}
.ingredient-cart-form {
  margin-top: .55rem;
}

/* v1.0.46.1 Make Soon + calendar sharing polish */
.calendar-sharing-form {
  margin-top: 1rem;
}
.friends-sharing-card .calendar-sharing-form {
  width: min(100%, 520px);
}
.calendar-sharing-button {
  width: 100%;
  max-width: 520px;
  min-height: 48px;
  font-weight: 800;
}
.friends-sharing-card .calendar-sharing-button {
  display: block;
  width: 100%;
  max-width: none;
}
.calendar-sharing-explainer {
  margin-top: .65rem;
  color: var(--muted, #66736d);
  line-height: 1.45;
  max-width: 760px;
}
.idea-make-soon-form {
  display: inline-flex;
  margin: 0;
}


/* v1.0.52 — single recipe sharing selector */
.sharing-level-options {
    display: grid;
    gap: .75rem;
    margin-top: .5rem;
}
.sharing-level-option {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border, #d8ddd9);
    border-radius: 14px;
    cursor: pointer;
}
.sharing-level-option:has(input:checked) {
    border-color: currentColor;
    box-shadow: 0 0 0 1px currentColor inset;
}
.sharing-level-option input {
    margin-top: .2rem;
}
.sharing-level-option span {
    display: grid;
    gap: .2rem;
}
.sharing-level-option small {
    opacity: .78;
}
.sharing-level-options.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
    .sharing-level-options.compact {
        grid-template-columns: 1fr;
    }
}


/* v1.0.52.1 — sharing selector alignment + compact layout */
.sharing-level-field {
    margin-top: .4rem;
}
.sharing-level-field > label {
    display: block;
    margin-bottom: .45rem;
}
.sharing-level-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}
.sharing-level-option {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start !important;
    justify-content: start !important;
    column-gap: .65rem;
    min-height: 76px;
    padding: .8rem .9rem;
    margin: 0 !important;
    text-align: left;
}
.sharing-level-option input[type="radio"] {
    width: 18px !important;
    height: 18px;
    min-width: 18px;
    padding: 0;
    margin: .15rem 0 0 !important;
    accent-color: var(--primary);
}
.sharing-level-option span {
    min-width: 0;
}
.sharing-level-option strong {
    display: block;
    line-height: 1.2;
}
.sharing-level-option small {
    display: block;
    margin-top: .25rem;
    line-height: 1.35;
}
.recipe-sharing-state-button {
    white-space: nowrap;
}
.recipe-sharing-control .sharing-level-options {
    margin-bottom: .6rem;
}
@media (max-width: 760px) {
    .sharing-level-options,
    .sharing-level-options.compact {
        grid-template-columns: 1fr;
    }
    .sharing-level-option {
        min-height: 0;
    }
}


/* v1.0.52.2 — inline sharing cycle */
.inline-sharing-cycle {
    margin: 0;
}
.inline-sharing-cycle .recipe-sharing-state-button {
    width: 100%;
}


/* v1.0.54 — invisible signup bot honeypot */
.signup-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0.01 !important;
    pointer-events: none !important;
}
.signup-honeypot input {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
}


/* v1.0.55 — signup alignment */
.signup-form-card,
.signup-back-link {
    width: min(820px, 100%);
    box-sizing: border-box;
}
.signup-back-link {
    margin-top: 0;
    margin-right: auto;
}


/* v1.0.55.1 — logged-out signup viewport centering */
.signup-page-shell {
    width: min(820px, calc(100vw - 40px));
    margin-left: auto;
    margin-right: auto;
}
.signup-page-shell .heading,
.signup-page-shell .signup-form-card,
.signup-page-shell .signup-back-link {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}
.signup-page-shell .signup-back-link {
    margin-left: 0;
    margin-right: 0;
}
@media (min-width: 901px) {
    body:not(.app-shell-authenticated) .page:has(.signup-page-shell) {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
@media (max-width: 900px) {
    .signup-page-shell {
        width: 100%;
    }
}


/* v1.0.56 — live security posture */
.security-posture-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.security-posture-summary > div {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    background: #F4F8F5;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.security-posture-summary strong {
    font-size: 20px;
}
.security-posture-summary span {
    color: var(--muted);
    font-size: 12px;
}
.security-live-label,
.security-manual-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    padding: 3px 6px;
    border-radius: 999px;
}
.security-live-label {
    background: #DDEFE6;
    color: #155A37;
}
.security-manual-label {
    background: #EEF1F2;
    color: #59646A;
}
@media (max-width:720px) {
    .security-posture-summary { grid-template-columns: 1fr; }
}

/* v1.0.56 — center logged-out footer with signup workspace */
body:has(.signup-page-shell) footer {
    width: min(820px, calc(100vw - 40px)) !important;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (max-width:900px) {
    body:has(.signup-page-shell) footer {
        width: calc(100% - 28px) !important;
    }
}

/* v1.0.62 — Breakfast / Lunch / Dinner Top 10 switcher */
.popular-period-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  margin:10px 0 8px;
  padding:3px;
  border:1px solid var(--border);
  border-radius:11px;
  background:#f4f7f4;
}
.popular-period-tab{
  min-width:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  padding:7px 4px;
  font:inherit;
  font-size:.67rem;
  font-weight:850;
  line-height:1.1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.popular-period-tab:hover{background:#eaf2ec;color:var(--text)}
.popular-period-tab.active{
  background:#fff;
  color:var(--green);
  box-shadow:0 1px 4px rgba(20,60,35,.12);
}
.popular-period-tab:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.popular-period-panel[hidden]{display:none!important}
.dashboard-popular-card .popular-period-tabs{margin-top:9px}
@media(max-width:360px){
  .popular-period-tab{font-size:.62rem;padding-inline:2px}
  .popular-period-tab span:first-child{display:none}
}

/* v1.0.64 — Top 10 rolling time windows */
.popular-window-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  margin:0 0 10px;
}
.popular-window-tab{
  min-width:0;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:var(--muted);
  padding:5px 5px;
  font:inherit;
  font-size:.63rem;
  font-weight:850;
  line-height:1.15;
  cursor:pointer;
}
.popular-window-tab:hover{
  background:#f4f8f5;
  color:var(--text);
}
.popular-window-tab.active{
  background:#e7f3eb;
  border-color:#b9d8c3;
  color:var(--green);
}
.popular-window-tab:focus-visible{
  outline:2px solid var(--green);
  outline-offset:1px;
}


/* v1.0.68 — Community moderation */
.moderation-state{display:inline-flex;border-radius:999px;padding:3px 8px;font-size:.72rem;font-weight:850}
.moderation-state.pending{background:#fff5d8;color:#765600}.moderation-state.approved{background:#e7f3eb;color:#145c38}.moderation-state.rejected{background:#fde8e8;color:#8c2626}
.moderation-rejection-note,.moderation-rejected-reason{background:#fff4f4;border:1px solid #f1caca;border-radius:10px;padding:9px 11px;color:#792828}
.moderation-list{display:grid;gap:16px;margin-top:18px}.moderation-card{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px}
.moderation-card-media img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px}.moderation-meta{display:flex;flex-wrap:wrap;gap:6px 12px;color:var(--muted);font-size:.78rem}
.moderation-review-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;margin:14px 0}
.moderation-actions,.admin-user-role-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.moderation-reject-form{display:flex;gap:8px;flex:1}.moderation-reject-form input{flex:1}
.moderation-empty{text-align:center;padding:34px}@media(max-width:760px){.moderation-card,.moderation-review-grid{grid-template-columns:1fr}.moderation-reject-form{flex-direction:column}}

/* v1.0.68.4 — moderation review UX */
.moderation-rejection-note{display:flex;flex-direction:column;gap:3px}
.moderation-rejection-note strong{font-size:.82rem}
.moderation-rejection-note span{font-size:.8rem}
.moderation-rejection-note small{font-size:.75rem;opacity:.82}
.moderation-actions{align-items:stretch}
.moderation-approve-form{display:flex;align-items:flex-end}
.moderation-reject-form{display:grid;grid-template-columns:1fr;gap:7px;min-width:min(100%,480px);padding:12px;border:1px solid #eed0d0;border-radius:12px;background:#fff8f8}
.moderation-reject-form label{font-size:.8rem;font-weight:800;color:#6b2727}
.moderation-reject-form label span{font-weight:500;color:var(--muted)}
.moderation-reject-form textarea{width:100%;min-height:76px;resize:vertical;box-sizing:border-box}
.moderation-reject-form .btn{width:100%}
.moderation-instructions{line-height:1.55}

/* v1.0.68.5 — moderation/share polish */
.recipe-sharing-toast{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:2200;
  max-width:min(420px,calc(100vw - 32px));
  padding:12px 16px;
  border-radius:12px;
  background:#173d2d;
  color:#fff;
  font-weight:800;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .18s ease,transform .18s ease;
}
.recipe-sharing-toast.visible{opacity:1;transform:translateY(0)}
.recipe-sharing-toast.community-pending{background:#214b39}
.recipe-sharing-toast.toast-error{background:var(--danger)}
.admin-family-card[hidden],.admin-user-row[hidden],.admin-search-empty[hidden]{display:none !important}
@media(max-width:760px){
  .recipe-sharing-toast{right:16px;left:16px;bottom:16px;max-width:none}
}

/* v1.0.69 — moderation history + owner attention */
.moderation-attention-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;border-color:#e5b2b2;background:#fff8f8;margin-bottom:14px}
.moderation-attention-banner>div{display:flex;flex-direction:column;gap:3px}
.moderation-attention-banner strong{color:#812d2d}
.moderation-attention-banner span{font-size:.82rem;color:var(--muted)}
.moderation-history-alert{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;background:#fff5df;border:1px solid #ead39b;border-radius:10px;padding:8px 10px;margin:6px 0 10px;color:#6e5011}
.moderation-history-alert span{font-size:.78rem}
.moderation-history{margin:8px 0 14px;border:1px solid #dbe5df;border-radius:10px;background:#f9fcfa}
.moderation-history summary{cursor:pointer;padding:9px 11px;font-weight:800}
.moderation-history-list{display:grid;gap:1px;border-top:1px solid #e1e9e4}
.moderation-history-event{padding:8px 11px;background:#fff}
.moderation-history-event>div{display:flex;justify-content:space-between;gap:12px}
.moderation-history-event span,.moderation-history-event small{font-size:.74rem;color:var(--muted)}
.moderation-history-event.rejected strong{color:#992f2f}
.moderation-history-event.approved strong{color:#17623c}
@media(max-width:760px){
  .moderation-attention-banner{align-items:stretch;flex-direction:column}
  .moderation-attention-banner .btn{width:100%;text-align:center}
  .moderation-history-event>div{flex-direction:column;gap:2px}
}

/* v1.0.69.1 — rejected-only review filter */
.moderation-filter-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff8f8;border-color:#e5b2b2;margin-bottom:14px}
.moderation-filter-banner>div{display:flex;flex-direction:column;gap:3px}
.moderation-filter-banner strong{color:#812d2d}
.moderation-filter-banner span{font-size:.82rem;color:var(--muted)}
@media(max-width:760px){
  .moderation-filter-banner{flex-direction:column;align-items:stretch}
  .moderation-filter-banner .btn{width:100%;text-align:center}
}

/* v1.0.70 — family activation onboarding */
.getting-started-family-step em{font-style:normal;font-size:.68rem;margin-left:6px;padding:2px 7px;border-radius:999px;background:#e7f3eb;color:#145c38;text-transform:uppercase;letter-spacing:.04em}
.getting-started-family-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.getting-started-family-actions form{margin:0}
.getting-started-solo-skip{border:0;background:transparent;color:var(--muted);font:inherit;font-size:.75rem;text-decoration:underline;cursor:pointer;padding:2px 4px}
.getting-started-solo-skip:hover{color:var(--text)}
@media(max-width:760px){
  .getting-started-family-actions{align-items:stretch;width:100%}
  .getting-started-family-actions .btn{text-align:center}
}

/* v1.0.71 — email verification soft gate */
.email-verification-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:9px 18px;
  background:#fff6d9;
  border-bottom:1px solid #ead28c;
  color:#5f4a0d;
  position:relative;
  z-index:1050;
}
.email-verification-banner>div{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px}
.email-verification-banner strong{font-size:.84rem}
.email-verification-banner span{font-size:.79rem}
.email-verification-banner form{margin:0}
@media(max-width:760px){
  .email-verification-banner{align-items:stretch;flex-direction:column;gap:7px;padding:9px 12px}
  .email-verification-banner>div{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .email-verification-banner .btn{width:100%;text-align:center}
}

/* v1.0.71.2 — staging verification test harness */
.email-verification-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.email-verification-actions form{margin:0}
.email-verification-staging-note{
  font-size:.72rem;
  font-weight:800;
  padding:4px 8px;
  border-radius:999px;
  background:#f0e3a9;
  color:#66500f;
}
@media(max-width:760px){
  .email-verification-actions{display:grid;grid-template-columns:1fr}
  .email-verification-actions .btn{width:100%}
  .email-verification-staging-note{text-align:center}
}

/* v1.0.71.3 — contextual email verification UX */

.verification-required-panel[hidden]{display:none!important}
.account-verification-actions,
.verification-required-panel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:12px;
  margin:9px 0 14px;
  border:1px solid #ead28c;
  border-radius:12px;
  background:#fff9e7;
}
.account-verification-actions>div:first-child,
.verification-required-panel>div:first-child{display:flex;flex-direction:column;gap:3px}
.account-verification-actions small,
.verification-required-panel small{color:var(--muted)}
.verification-required-panel p{margin:2px 0 0}
.verification-required-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.verification-required-actions form{margin:0}

.verification-modal[hidden]{display:none!important}
.verification-modal{position:fixed;inset:0;z-index:4000;display:grid;place-items:center;padding:20px}
.verification-modal-backdrop{position:absolute;inset:0;background:rgba(16,29,23,.56)}
.verification-modal-dialog{
  position:relative;
  width:min(520px,100%);
  z-index:1;
  background:#fff;
  border:1px solid #d9e4dd;
  border-radius:18px;
  padding:26px;
  box-shadow:0 24px 70px rgba(0,0,0,.3);
  text-align:center;
}
.verification-modal-icon{font-size:2.2rem;margin-bottom:7px}
.verification-modal-dialog h2{margin:0 0 8px}
.verification-modal-dialog p{margin:6px 0}
.verification-modal-close{
  position:absolute;right:10px;top:8px;border:0;background:transparent;
  font-size:1.7rem;line-height:1;cursor:pointer;color:var(--muted)
}
.verification-modal-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}
.verification-modal-actions form{margin:0}
body.verification-modal-open{overflow:hidden}

@media(max-width:760px){
  .account-verification-actions,.verification-required-panel{
    flex-direction:column;align-items:stretch
  }
  .verification-required-actions,.account-verification-actions .button-row{
    display:grid;grid-template-columns:1fr
  }
  .verification-required-actions .btn,.account-verification-actions .btn{
    width:100%;text-align:center
  }
  .verification-modal-dialog{padding:24px 16px 18px}
  .verification-modal-actions{display:grid;grid-template-columns:1fr}
  .verification-modal-actions .btn{width:100%}
}

/* v1.0.72 — Google Sign-In */
.google-signin-button{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff!important;color:#273238!important;border:1px solid #cdd6d1!important;
  text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.06)
}
.google-signin-button:hover{background:#f8faf9!important}
.google-g-mark{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-family:Arial,sans-serif;font-weight:900;color:#4285f4;background:#fff
}
.google-signup-button{width:min(100%,560px);margin:0 auto}

/* v1.0.72.2 — tappable Top 10 meals */
.popular-meal-row,.dashboard-popular-row{position:relative}
.popular-meal-hitbox{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:8px;
  text-decoration:none;
}
.popular-meal-row:has(.popular-meal-hitbox),
.dashboard-popular-row:has(.popular-meal-hitbox){cursor:pointer}
.popular-meal-row:has(.popular-meal-hitbox):hover,
.dashboard-popular-row:has(.popular-meal-hitbox):hover{background:rgba(44,112,72,.055)}
.popular-meal-row:has(.popular-meal-hitbox):focus-within,
.dashboard-popular-row:has(.popular-meal-hitbox):focus-within{
  outline:2px solid var(--green);
  outline-offset:2px;
}



/* v1.0.73 — Friends / Family Home rework */
.shared-family-home-v2 .shared-family-profile-hero { margin-bottom:0; }
.shared-family-stat-grid-v2 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.shared-family-section { margin:0; }
.shared-family-view-only { color:var(--muted); font-size:12px; font-weight:800; }
.shared-family-member-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:12px; }
.shared-family-member-card { min-width:0; padding:14px 10px; border:1px solid var(--border); border-radius:16px; background:#F8FBF9; text-align:center; display:grid; gap:8px; place-items:center; }
.shared-family-member-avatar { width:64px; height:64px; border-radius:50%; overflow:hidden; background:#E8F1EB; display:grid; place-items:center; font-size:30px; }
.shared-family-member-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.shared-family-member-card strong { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shared-family-recipe-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.shared-family-recipe-card { min-width:0; display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; align-items:center; padding:10px; border:1px solid var(--border); border-radius:16px; text-decoration:none; background:#F8FBF9; }
.shared-family-recipe-card:hover { border-color:var(--secondary); background:#F2F8F4; }
.shared-family-recipe-photo { width:72px; height:60px; border-radius:12px; overflow:hidden; background:#EAF3ED; display:grid; place-items:center; font-size:26px; }
.shared-family-recipe-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.shared-family-recipe-card strong,.shared-family-recipe-card small { display:block; }
.shared-family-recipe-card strong { line-height:1.2; }
.shared-family-recipe-card small { color:var(--muted); margin-top:4px; }
.shared-family-upcoming-meal { display:flex; align-items:center; justify-content:flex-end; gap:10px; text-align:right; }
.shared-family-upcoming-meal a { font-size:12px; font-weight:800; color:var(--primary); }
.shared-family-connection-tools summary { cursor:pointer; font-weight:900; }
.shared-family-connection-tools p { color:var(--muted); }
.shared-family-connection-tools form { margin:0; }
@media(max-width:720px) {
  .shared-family-stat-grid-v2 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .shared-family-stat-grid-v2 .shared-family-stat { padding:12px 8px; }
  .shared-family-stat-grid-v2 .shared-family-stat > strong { font-size:18px; }
  .shared-family-stat-grid-v2 .shared-family-stat > small { font-size:11px; }
  .shared-family-recipe-grid { grid-template-columns:1fr; }
  .shared-family-upcoming-meal { justify-content:flex-start; text-align:left; flex-wrap:wrap; }
}
@media(max-width:430px) {
  .shared-family-member-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shared-family-stat-grid-v2 { grid-template-columns:1fr; }
}


/* v1.0.73.2 — Friends / Family Home polish */
.shared-recipe-detail-photo{max-width:760px;margin:0 auto 12px;padding:0;overflow:hidden;border-radius:20px;background:#EEE8DE}
.shared-recipe-detail-photo img{display:block;width:100%;max-height:430px;object-fit:cover}
.shared-recipe-detail-photo.stock-photo img{max-height:300px;object-fit:contain;padding:18px}
#shared-family-today{scroll-margin-block:120px}


/* v1.0.73.3 — Shared recipe detail alignment */
.shared-recipe-detail-content{max-width:var(--content-width-standard);margin:0 auto 12px}

/* v1.0.75 — hosting readiness / migration runbook */
.runbook-list {
  margin: 0.75rem 0 0;
  padding-left: 1.4rem;
}
.runbook-list li {
  margin: 0.65rem 0;
  line-height: 1.55;
}

/* v1.1 activation + progressive discovery */
.activation-celebration,.feature-discovery-card,.first-recipe-hero,.feature-guide-page{background:var(--card,#fff);border:1px solid var(--border,#dfe7e2);border-radius:18px;padding:22px;margin-bottom:20px;box-shadow:0 8px 24px rgba(16,61,45,.07)}.activation-celebration,.feature-discovery-card{display:flex;gap:18px;align-items:flex-start}.activation-celebration-icon,.feature-discovery-icon,.feature-guide-icon,.first-recipe-icon{font-size:2.2rem;line-height:1}.feature-discovery-copy{flex:1}.feature-discovery-actions,.feature-guide-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}.feature-discovery-actions form,.feature-guide-actions form{margin:0}.feature-discovery-dismiss{border:0;background:none;text-decoration:underline;cursor:pointer;color:var(--muted,#65736c);padding:8px}.first-recipe-page{max-width:980px;margin:0 auto}.first-recipe-hero{text-align:center}.first-recipe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.first-recipe-option{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;background:var(--card,#fff);border:1px solid var(--border,#dfe7e2);border-radius:18px;padding:22px;min-height:220px;box-shadow:0 8px 24px rgba(16,61,45,.05)}.first-recipe-option.featured{border-width:2px}.first-recipe-option strong{font-size:1.15rem}.first-recipe-option p{flex:1;color:var(--muted,#65736c)}.first-recipe-note{text-align:center;margin-top:18px}.feature-guide-page{max-width:700px;margin:20px auto;text-align:center}.feature-guide-lead{font-size:1.08rem;line-height:1.65}.feature-guide-note{margin:18px 0;padding:14px;border-radius:12px;background:rgba(16,61,45,.06)}@media(max-width:760px){.first-recipe-grid{grid-template-columns:1fr}.activation-celebration,.feature-discovery-card{flex-direction:column}.first-recipe-option{min-height:0}}


/* v1.1.1.2 public visitor education & conversion */
.public-discovery{scroll-margin-top:1rem}
.discovery-heading{margin-bottom:1.5rem}
.mealcrew-fit-card{
  max-width:1100px;
  margin:0 auto 3rem;
  padding:2rem;
  border:1px solid #cbd9d1;
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 35px rgba(16,61,45,.07)
}
.fit-step{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:1.1rem;
  padding:1.25rem 0
}
.fit-step+.fit-step{border-top:1px solid #e2e9e5}
.fit-step-number{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#14633f;
  color:#fff;
  font-weight:900;
  font-size:1.05rem
}
.fit-step.muted{opacity:.68}
.fit-step h3{margin:.05rem 0 .45rem;font-size:1.55rem}
.fit-step-hint{margin:.1rem 0 1rem;color:#607168}
.fit-options{display:grid;gap:.8rem}
.fit-size-options{grid-template-columns:repeat(5,minmax(0,1fr))}
.fit-pain-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.fit-options button{
  min-height:108px;
  border:2px solid #d5e0da;
  border-radius:16px;
  background:#f8faf9;
  padding:1rem;
  cursor:pointer;
  font:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  transition:border-color .15s,transform .15s,background .15s,box-shadow .15s
}
.fit-options button span{font-size:1.9rem;line-height:1}
.fit-options button strong{font-size:1rem}
.fit-options button:hover{
  border-color:#57906e;
  transform:translateY(-2px);
  box-shadow:0 5px 14px rgba(16,61,45,.08)
}
.fit-options button.selected{
  border-color:#14633f;
  background:#e9f5ee;
  box-shadow:0 0 0 3px rgba(20,99,63,.09)
}
.fit-result{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:1.1rem;
  margin-top:1.25rem;
  padding:1.6rem;
  border-radius:18px;
  background:#edf7f1;
  border:1px solid #bad7c5
}
.fit-result-check{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#14633f;
  color:white;
  font-size:1.5rem;
  font-weight:900
}
.fit-result h3{font-size:1.55rem;margin:.2rem 0 .45rem}
.fit-benefits{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.65rem;
  margin:1rem 0
}
.fit-benefits span{
  background:white;
  border:1px solid #dbe7e0;
  border-radius:11px;
  padding:.8rem;
  font-weight:700
}
.fit-result-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.public-feature-heading{scroll-margin-top:1rem}
.public-feature-list{
  max-width:980px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:1rem
}
.public-feature-detail-card{
  padding:0;
  overflow:hidden;
  width:auto;
  min-width:0
}
.public-feature-detail-card summary{
  list-style:none;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  gap:1rem;
  align-items:center;
  padding:1.15rem 1.2rem;
  cursor:pointer
}
.public-feature-detail-card summary::-webkit-details-marker{display:none}
.public-feature-detail-card summary .public-feature-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:12px;
  background:#f4efe8;
  font-size:1.5rem
}
.public-feature-detail-card summary strong{
  display:block;
  font-size:1.08rem
}
.public-feature-detail-card summary small{
  display:block;
  margin-top:.25rem;
  font-weight:400;
  line-height:1.4;
  color:#607168
}
.public-feature-detail-card summary>b{
  font-size:.86rem;
  white-space:nowrap;
  color:#14633f
}
.public-feature-detail-card[open]{
  grid-column:auto;
  border-color:#57906e
}
.public-feature-detail-card[open] summary{background:#f0f7f3}
.public-feature-detail-card[open] summary>b{font-size:0}
.public-feature-detail-card[open] summary>b:after{
  content:"Close ↑";
  font-size:.86rem
}
.feature-expanded{
  padding:1.35rem 1.5rem 1.5rem;
  border-top:1px solid #dbe5df
}
.feature-expanded h3{margin:.1rem 0 .55rem;font-size:1.4rem}
.feature-example,.mini-calendar{
  margin:1rem 0;
  padding:1rem;
  border-radius:12px;
  background:#f5f8f6;
  font-weight:650
}
.mini-calendar{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem
}
.mini-calendar span{
  background:white;
  border:1px solid #e0e8e3;
  border-radius:10px;
  padding:.85rem;
  line-height:1.7
}
.mini-calendar b{
  display:block;
  color:#14633f;
  margin-bottom:.25rem
}

@media(max-width:900px){
  .fit-size-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fit-pain-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .mealcrew-fit-card{padding:1.1rem}
  .fit-step{grid-template-columns:1fr}
  .fit-step-number{width:34px;height:34px}
  .fit-size-options,.fit-pain-options{grid-template-columns:1fr}
  .fit-options button{
    min-height:68px;
    flex-direction:row;
    justify-content:flex-start;
    text-align:left
  }
  .fit-result{grid-template-columns:1fr}
  .fit-benefits{grid-template-columns:1fr}
  .fit-result-actions{display:grid}
  .public-feature-detail-card summary{
    grid-template-columns:48px minmax(0,1fr)
  }
  .public-feature-detail-card summary>b{
    grid-column:2;
    justify-self:start
  }
  .mini-calendar{grid-template-columns:1fr}
}


/* v1.1.1.3 landing details compatibility overrides.
   public-feature-card is an older shared class that defaults to a 42px + 1fr
   grid in other MealCrew surfaces. Landing <details> cards must be normal blocks. */
.public-discovery .public-feature-list > details.public-feature-card.public-feature-detail-card{
  display:block;
  grid-template-columns:none;
  padding:0;
  width:100%;
  min-width:0;
}
.public-discovery .public-feature-detail-card > summary{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.public-discovery .public-feature-detail-card > summary > span:nth-child(2){
  min-width:0;
  width:auto;
}
.public-discovery .public-feature-detail-card > summary > span:nth-child(2) strong,
.public-discovery .public-feature-detail-card > summary > span:nth-child(2) small{
  width:auto;
  max-width:none;
  min-width:0;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
}
.public-discovery .public-feature-detail-card > .feature-expanded{
  display:block;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  position:static;
}


/* v1.1.1.6 — keep the shared sticky topbar below the staging identity banner.
   Without this offset, the topbar scrolls underneath the sticky staging banner
   and public Log In / Create Account controls appear clipped in half. */
:root{
  --staging-banner-height:37px;
}
body.is-staging .topbar{
  top:var(--staging-banner-height);
}
@media(max-width:600px){
  :root{
    --staging-banner-height:37px;
  }
}


/* v1.1.1.16 — multiple meals + family eater assignments */
.eater-assignment{border:1px solid var(--border,#d7e1da);border-radius:12px;padding:.8rem;margin:.75rem 0;background:#f8fbf9}
.eater-assignment legend{font-weight:900;padding:0 .3rem}
.eater-assignment-head{display:flex;justify-content:space-between;gap:.75rem;align-items:center;margin-bottom:.65rem;font-size:.88rem}
.eater-select-all{border:0;background:transparent;color:#0f6843;font-weight:800;cursor:pointer;text-decoration:underline}
.eater-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
/* Root cause of the v90 "Who's eating?" overflow: this base .eater-choice
   (used by the shared _eater_assignment.html macro on the Change Meal /
   Type Something cards) had no min-width:0, and its trailing name <span>
   had no shrink/truncate rules at all. A flex item defaults to
   min-width:auto, so even though .eater-checklist's grid track could
   shrink (minmax(0,1fr)), the row itself refused to shrink below
   checkbox+dot+full-name's combined natural width and spilled its
   content out the right edge of the choice card -- exactly what real
   iPad testing showed. The v90 fix for the *other* eater-picker
   (.calendar-inline-eater-choice, Calendar's own inline editor) never
   touched this selector because it's a separate component. This mirrors
   the same already-proven-working pattern used there, in
   .pick-meal-card's own scoped override below, and in
   .calendar-quick-entry-form's <=700px rule further down. */
.eater-choice{display:flex;align-items:center;gap:.45rem;min-width:0;background:#fff;border:1px solid #dce5df;border-radius:9px;padding:.55rem .65rem;font-weight:800}
.eater-choice input[type="checkbox"]{width:16px;height:16px;flex:0 0 16px;margin:0;padding:0}
.eater-choice-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eater-color-dot,.calendar-eater i{width:.7rem;height:.7rem;border-radius:50%;background:var(--member-color);display:inline-block;flex:0 0 auto}
.assignment-conflict-modal[hidden]{display:none!important}
.assignment-conflict-modal{position:fixed;inset:0;z-index:2200;display:grid;place-items:center;padding:1rem}
.assignment-conflict-backdrop{position:absolute;inset:0;background:rgba(12,30,22,.55)}
.assignment-conflict-card{position:relative;z-index:1;background:#fff;border-radius:18px;padding:1.3rem;max-width:560px;width:min(100%,560px);box-shadow:0 24px 70px rgba(0,0,0,.25)}
.assignment-conflict-actions{display:grid;gap:.6rem;margin-top:1rem}
.assignment-conflict-actions .btn{height:auto;min-height:48px;display:flex;flex-direction:column;align-items:center}
.assignment-conflict-actions small{display:block;font-weight:500;margin-top:.15rem}
.current-slot-meals{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.current-slot-meals span{background:#f1f6f3;border-radius:999px;padding:.35rem .6rem;font-weight:800}
.calendar-period-group{display:grid;gap:3px;grid-template-columns:1fr;position:relative}
.calendar-period-group.calendar-period-count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.calendar-period-group.calendar-period-count-3,
.calendar-period-group.calendar-period-count-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.calendar-period-group .calendar-meal-card{min-width:0}
.calendar-period-group .event-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.calendar-eaters{display:flex!important;gap:.22rem;align-items:center;flex-wrap:wrap}
.calendar-eater{display:inline-flex;align-items:center;gap:.18rem;font-size:.68rem;font-weight:800;min-width:0}
.calendar-everyone{font-size:.68rem;font-weight:900;color:#4f6859}
.calendar-add-another{display:flex;align-items:center;justify-content:center;min-height:18px;border:1px dashed #b8c9bf;border-radius:7px;color:#17633f;text-decoration:none;font-weight:900;font-size:.8rem;background:#fbfdfc}
.calendar-period-count-2 .calendar-add-another,
.calendar-period-count-3 .calendar-add-another,
.calendar-period-count-4 .calendar-add-another{grid-column:1/-1}
@media(max-width:760px){
  .eater-checklist{grid-template-columns:minmax(0,1fr)}
  .calendar-period-group,
  .calendar-period-group.calendar-period-count-2,
  .calendar-period-group.calendar-period-count-3,
  .calendar-period-group.calendar-period-count-4{grid-template-columns:1fr}
  .calendar-period-count-2 .calendar-add-another,
  .calendar-period-count-3 .calendar-add-another,
  .calendar-period-count-4 .calendar-add-another{grid-column:auto}
}


/* v1.1.1.18 — cleaner multi-meal cards + deliberate eater selection */
.eater-choice input[type="checkbox"]{accent-color:#17633f}
.eater-select-all{min-width:6.3rem;text-align:right}

.calendar-period-group{
  align-items:stretch;
}
.calendar-period-group.calendar-period-count-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.calendar-period-group.calendar-period-count-3,
.calendar-period-group.calendar-period-count-4{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.calendar-period-group .calendar-meal-card{
  padding:.38rem .42rem;
  min-height:64px;
  border-radius:9px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:.3rem;
  align-items:start;
}

.calendar-period-group .calendar-meal-card .event-icon{
  margin-top:.08rem;
  font-size:.9rem;
}

.calendar-period-group .calendar-meal-card .event-copy{
  min-width:0;
}

.calendar-period-group .calendar-meal-card .event-period{
  font-size:.55rem;
  letter-spacing:.04em;
  margin-bottom:.05rem;
  opacity:.72;
}

.calendar-period-group .calendar-meal-card .event-copy strong{
  font-size:.78rem;
  line-height:1.05;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:1.6em;
}

.calendar-eaters{
  margin-top:.18rem;
  display:flex!important;
  align-items:center;
  gap:.28rem;
  min-width:0;
}

.calendar-eater-dots{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}

.calendar-eater-dot{
  width:.52rem;
  height:.52rem;
  border-radius:50%;
  background:var(--member-color);
  display:inline-block;
  border:1px solid rgba(255,255,255,.9);
  margin-left:-.08rem;
}
.calendar-eater-dot:first-child{margin-left:0}

.calendar-eater-names{
  font-size:.62rem;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  color:#40554a;
  font-weight:800;
}

.calendar-everyone{
  font-size:.62rem;
  line-height:1;
  font-weight:900;
  color:#40554a;
}

.calendar-period-group.calendar-period-count-2 .calendar-meal-card small:not(.calendar-eaters),
.calendar-period-group.calendar-period-count-3 .calendar-meal-card small:not(.calendar-eaters),
.calendar-period-group.calendar-period-count-4 .calendar-meal-card small:not(.calendar-eaters){
  font-size:.58rem;
  line-height:1.05;
}

.calendar-period-group .calendar-add-another{
  min-height:16px;
  padding:0;
  font-size:.72rem;
  background:transparent;
}

@media (max-width:760px){
  .calendar-period-group .calendar-meal-card{
    min-height:auto;
  }
  .calendar-eater-names{
    white-space:normal;
  }
}


/* v1.1.1.20 — assignment runtime + meal modal eater summary */
.calendar-cook-editor[hidden]{display:none!important}
.calendar-modal-eaters{border:1px solid #d9e3dd;background:#f8fbf9;border-radius:12px;padding:.75rem .8rem;margin:.75rem 0}
.calendar-modal-eater-list{display:flex;flex-wrap:wrap;gap:.42rem;margin-top:.5rem}
.calendar-modal-eater-chip{display:inline-flex;align-items:center;gap:.38rem;background:#fff;border:1px solid #dbe4de;border-radius:999px;padding:.34rem .55rem;font-weight:800}
.calendar-modal-eater-chip i{width:.68rem;height:.68rem;border-radius:50%;background:var(--member-color);display:inline-block}
.calendar-modal-everyone{font-weight:900;color:#17633f;background:#eaf5ee;border-radius:999px;padding:.34rem .6rem}


/* v1.1.1.21 — occurrence eater editing + MealCrew remove confirmation */
.calendar-modal-eaters-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.calendar-edit-eaters{font-weight:900;color:#17633f;text-decoration:underline}
#calendarMealCopy[hidden],
#calendarMealSwap[hidden],
.calendar-cook-editor[hidden]{display:none!important}

.occurrence-eater-edit-form{margin-top:.75rem}
.occurrence-eater-edit-form .eater-assignment{margin-bottom:.55rem}

.mealcrew-confirm-modal[hidden]{display:none!important}
.mealcrew-confirm-modal{position:fixed;inset:0;z-index:2600;display:grid;place-items:center;padding:1rem}
.mealcrew-confirm-backdrop{position:absolute;inset:0;background:rgba(12,30,22,.58)}
.mealcrew-confirm-card{position:relative;z-index:1;width:min(100%,430px);background:#fff;border-radius:18px;padding:1.3rem;box-shadow:0 24px 70px rgba(0,0,0,.28);text-align:center}
.mealcrew-confirm-card h2{margin:.25rem 0 .5rem}
.mealcrew-confirm-card p{margin:.25rem 0 1rem;color:#52675c}
.mealcrew-confirm-actions{display:grid;gap:.55rem}
.mealcrew-confirm-actions .btn{width:100%}


/* v1.1.1.22 — inline eater editing + modal stacking fix */
.calendar-edit-eaters{border:0;background:transparent;padding:0;cursor:pointer;font:inherit}
.calendar-inline-eater-editor{margin-top:.7rem;padding-top:.7rem;border-top:1px solid #dce5df}
.calendar-inline-eater-editor[hidden]{display:none!important}
.calendar-inline-eater-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.calendar-inline-eater-choice{display:flex;align-items:center;gap:.4rem;min-width:0;background:#fff;border:1px solid #dce5df;border-radius:9px;padding:.48rem .55rem;font-weight:800}
/* Checkbox and color dot must never shrink; WebKit's native checkbox
   rendering is noticeably larger than Chromium's by default, so an
   explicit size keeps the row's layout math the same across browsers
   instead of ceding unpredictable width to whichever browser's native
   control happens to be biggest. */
.calendar-inline-eater-choice input[type="checkbox"]{width:16px;height:16px;flex:0 0 16px;margin:0;padding:0}
/* The name is the one flexible part of the row -- it must be able to
   shrink below its own text's natural width (flex items default to
   min-width:auto, which refuses to shrink at all) and truncate with an
   ellipsis rather than push content outside the row/modal. */
.calendar-inline-eater-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-inline-eater-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem;margin-top:.55rem}
#calendarEaterConflictModal{z-index:2750}
#calendarRemoveConfirm{z-index:2800}
@media(max-width:560px){
  /* minmax(0,1fr) -- not a bare 1fr -- is required here, not just on the
     desktop rule above: a bare 1fr track's implicit minimum is auto
     (content-based), so a track can't shrink below an overflowing row's
     natural width. That reintroduces the exact overflow this rule exists
     to prevent once the grid collapses to a single column on mobile. */
  .calendar-inline-eater-grid{grid-template-columns:minmax(0,1fr)}
  .calendar-inline-eater-actions{grid-template-columns:1fr}
}


/* v1.1.1.23 — inline eater conflict modal stacking */
#calendarEaterConflictModal{
  z-index:2850;
}


/* v1.1.1.24 — occurrence-aware Calendar actions */
#calendarMealCopy,
#calendarMealSwap,
.calendar-cook-editor{
  display:block;
}

.calendar-period-group.calendar-period-count-3,
.calendar-period-group.calendar-period-count-4{
  gap:2px;
}
.calendar-period-group.calendar-period-count-3 .calendar-meal-card,
.calendar-period-group.calendar-period-count-4 .calendar-meal-card{
  padding:.3rem .34rem;
}
.calendar-period-group.calendar-period-count-3 .calendar-eater-names,
.calendar-period-group.calendar-period-count-4 .calendar-eater-names{
  display:none;
}


/* v1.1.1.26 — occupied-slot drop target + cook modal overflow polish */
.calendar-meal-modal-card{
  box-sizing:border-box;
  width:min(460px,calc(100vw - 28px));
  overflow-x:hidden;
}
.calendar-cook-editor,
.calendar-reminder-fields,
.calendar-reminder-time-block,
.calendar-reminder-lead-block,
.calendar-reminder-lead-inputs{
  min-width:0;
}
.calendar-cook-editor select,
.calendar-cook-editor input{
  max-width:100%;
  box-sizing:border-box;
}
.calendar-reminder-fields{
  grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);
}
.calendar-reminder-lead-inputs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  align-items:end;
}
.calendar-reminder-lead-inputs label{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:5px;
  align-items:center;
}
.calendar-reminder-lead-inputs input{
  width:100%;
  min-width:0;
}
.calendar-add-another.calendar-drop-active{
  background:#e8f5ed;
  border-color:var(--primary);
  color:var(--primary);
}
@media(max-width:560px){
  .calendar-meal-modal-card{
    width:100%;
  }
  .calendar-reminder-fields{
    grid-template-columns:1fr;
  }
  .calendar-reminder-lead-inputs{
    grid-template-columns:1fr 1fr;
  }
}


/* v1.1.1.27 — reminder layout + anchored calendar returns */
.calendar-reminder-fields{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.calendar-reminder-time-block,
.calendar-reminder-lead-block{
  display:grid;
  gap:6px;
}
.calendar-reminder-time-block input{
  width:100%;
}
.calendar-reminder-lead-inputs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.calendar-reminder-lead-inputs label{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  align-items:stretch;
}
.calendar-reminder-lead-inputs label span{
  font-size:.76rem;
  font-weight:850;
  color:var(--muted);
}
.calendar-reminder-lead-inputs input{
  width:100%;
}
.calendar-reminder-lead-block small{
  line-height:1.25;
}
.calendar-day:target{
  outline:3px solid rgba(31,126,72,.38);
  outline-offset:-3px;
  animation:calendarTargetFade 1.8s ease forwards;
}
@keyframes calendarTargetFade{
  0%,55%{outline-color:rgba(31,126,72,.48)}
  100%{outline-color:transparent}
}


/* v1.1.1.28 — inline eater validation */
.eater-assignment-validation{
  min-height:0;
  margin-top:.35rem;
  color:#9d2424;
  font-weight:800;
  font-size:.86rem;
}
.eater-assignment-validation:empty{
  display:none;
}
.eater-assignment-validation:not(:empty){
  display:block;
  background:#fff0f0;
  border:1px solid #efc7c7;
  border-radius:8px;
  padding:.48rem .6rem;
}
.eater-allergy-warning{
  margin-top:.35rem;
  padding:.48rem .6rem;
  background:#fff0f0;
  border:1px solid #efc7c7;
  border-radius:8px;
  color:#9d2424;
  font-weight:800;
  font-size:.86rem;
}
.eater-allergy-warning[hidden]{
  display:none;
}




/* v1.1.1.42 — multiple recipe photos */
.additional-photo-picker{
  margin-top:.8rem;
  padding-top:.8rem;
  border-top:1px solid var(--line,#d9e3dc);
}
.additional-photo-picker input[type="file"]{
  width:100%;
  margin-top:.35rem;
}
.recipe-photo-strip{
  display:flex;
  gap:.6rem;
  overflow-x:auto;
  padding:.65rem .15rem .25rem;
  margin:-.1rem auto 1rem;
  max-width:980px;
  scrollbar-width:thin;
}
.recipe-photo-thumb{
  position:relative;
  flex:0 0 92px;
  width:92px;
  height:72px;
  padding:0;
  border:2px solid transparent;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(31,55,43,.08);
}
.recipe-photo-thumb.active{
  border-color:#1f7549;
}
.recipe-photo-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.recipe-photo-thumb span{
  position:absolute;
  left:5px;
  bottom:5px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(16,61,45,.88);
  color:#fff;
  font-size:.68rem;
  font-weight:800;
}
.recipe-photo-manager{
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}
.recipe-photo-manager-heading{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
}
.recipe-photo-manager-heading h3{
  margin:.1rem 0 .25rem;
}
.recipe-photo-manager-heading p{
  margin:0;
}
.recipe-photo-count{
  flex:0 0 auto;
  padding:.35rem .6rem;
  border-radius:999px;
  background:#edf5f0;
  font-weight:800;
}
.recipe-photo-upload-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.65rem;
  align-items:center;
  margin-top:1rem;
}
.recipe-photo-upload-form input[type="file"]{
  min-width:0;
}
.recipe-photo-manage-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.8rem;
  margin-top:1rem;
}
.recipe-photo-manage-card{
  border:1px solid var(--line,#d9e3dc);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.recipe-photo-manage-card>img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.recipe-photo-manage-actions{
  display:grid;
  gap:.45rem;
  padding:.6rem;
}
.recipe-photo-manage-actions form{
  margin:0;
}
.recipe-photo-manage-actions .btn{
  width:100%;
}
.recipe-photo-order-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.4rem;
}
@media (max-width:640px){
  .recipe-photo-upload-form{
    grid-template-columns:1fr;
  }
  .recipe-photo-manager-heading{
    align-items:center;
  }
  .recipe-photo-manage-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* v1.1.1.43 — recipe gallery polish */
.recipe-photo-hidden-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.compact-photo-upload{display:flex;align-items:center;gap:.75rem;margin-top:1rem}
.compact-photo-upload .btn{width:auto;flex:0 0 auto}
.recipe-photo-upload-hint{color:#65766d;font-size:.84rem}
.recipe-photo-manage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.7rem;margin-top:1rem}
.recipe-photo-manage-card{border:1px solid var(--line,#d9e3dc);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 7px rgba(31,55,43,.06)}
.recipe-photo-manage-image{position:relative;aspect-ratio:1/1;overflow:hidden;background:#eef4f0}
.recipe-photo-manage-image img{width:100%;height:100%;display:block;object-fit:cover}
.recipe-photo-cover-badge{position:absolute;left:.45rem;bottom:.45rem;padding:.2rem .45rem;border-radius:999px;background:rgba(16,61,45,.9);color:white;font-size:.68rem;font-weight:800}
.recipe-photo-manage-caption{padding:.55rem;text-align:center;font-size:.78rem;font-weight:800;color:#496057}
.recipe-photo-manage-actions{display:grid;grid-template-columns:1fr auto 1fr;gap:.35rem;align-items:center;padding:.45rem}
.recipe-photo-manage-actions form{margin:0}
.recipe-photo-order-actions{display:flex;gap:.25rem}
.recipe-photo-icon-button{display:flex;align-items:center;justify-content:center;width:100%;min-width:34px;height:34px;padding:0;border:1px solid #d5e0d9;border-radius:9px;background:#f6f9f7;color:#234d38;font-weight:900;cursor:pointer}
.recipe-photo-icon-button:hover:not(:disabled){background:#e8f2ec}
.recipe-photo-icon-button:disabled{opacity:.35;cursor:default}
.recipe-photo-cover-button{color:#7a5a00}
.recipe-photo-remove-button{color:#a52727}
.recipe-photo-remove-modal[hidden]{display:none!important}
.recipe-photo-remove-modal{position:fixed;inset:0;z-index:10020;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(20,38,29,.58)}
.recipe-photo-remove-dialog{width:min(410px,calc(100vw - 2rem));text-align:center}
.recipe-photo-remove-dialog h2{margin:.25rem 0 .45rem}
.recipe-photo-remove-dialog p{margin:0 0 1rem}
.recipe-photo-remove-dialog form{display:grid;gap:.55rem}
.recipe-photo-remove-dialog .btn{width:100%}
@media (max-width:640px){.compact-photo-upload{align-items:flex-start;flex-direction:column}.recipe-photo-manage-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:430px){.recipe-photo-manage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* v1.1.1.44 — recipe photo control clarity */
.recipe-photo-manage-actions{display:grid;grid-template-columns:1fr;gap:.45rem;padding:.55rem}
.recipe-photo-cover-form{width:100%}
.recipe-photo-order-actions{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.recipe-photo-control{display:flex;align-items:center;justify-content:center;gap:.38rem;width:100%;min-height:38px;padding:.48rem .65rem;border:1px solid #d3ded7;border-radius:9px;background:#f4f8f5;color:#234d38;font-size:.78rem;font-weight:800;line-height:1;cursor:pointer}
.recipe-photo-control:hover:not(:disabled){background:#e7f1eb;border-color:#b9cfc0}
.recipe-photo-control:disabled{opacity:.38;cursor:default}
.recipe-photo-cover-button{background:#eaf4ed;color:#185c38;border-color:#c8ddcf}
.recipe-photo-remove-button{background:#fff1f1;color:#a52525;border-color:#efd1d1}
.recipe-photo-remove-button:hover{background:#fde5e5!important;border-color:#e5bcbc!important}
.recipe-photo-remove-modal[hidden]{display:none!important}
.recipe-photo-remove-modal{position:fixed!important;inset:0!important;z-index:2147483000!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:20px!important;background:rgba(18,35,27,.64)!important;backdrop-filter:blur(2px)}
.recipe-photo-remove-dialog{position:relative!important;display:block!important;width:min(430px,calc(100vw - 32px))!important;max-width:430px!important;margin:0!important;padding:26px 24px 22px!important;border:1px solid #d8e3dc!important;border-radius:20px!important;background:#fff!important;color:#173327!important;text-align:center!important;box-shadow:0 22px 60px rgba(0,0,0,.28)!important;opacity:1!important;transform:none!important}
.recipe-photo-remove-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 auto 8px;border-radius:50%;background:#fff0f0;font-size:1.65rem}
.recipe-photo-remove-kicker{margin-bottom:.35rem;color:#8b3030;font-size:.72rem;font-weight:900;letter-spacing:.1em}
.recipe-photo-remove-dialog h2{margin:.15rem 0 .5rem!important;font-size:1.45rem!important;color:#173327!important}
.recipe-photo-remove-dialog p{margin:0 0 1.1rem!important;color:#66756d!important;font-size:.92rem!important;line-height:1.45!important}
.recipe-photo-remove-dialog form{display:grid!important;gap:.55rem!important;margin:0!important}
.recipe-photo-remove-dialog .btn{width:100%!important;min-height:44px!important}
@media (min-width:900px){.recipe-photo-manage-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}}


/* v1.1.1.45 — family member color controls */
.family-member-color-summary{
  display:flex;
  align-items:center;
  gap:.38rem;
  margin-top:.35rem;
  color:#617168;
  font-size:.8rem;
  font-weight:700;
}
.family-member-color-dot{
  width:12px;
  height:12px;
  flex:0 0 12px;
  border-radius:999px;
  background:var(--member-color,#2E7D32);
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(29,57,42,.18);
}
.family-color-editor{
  flex:0 0 auto;
  position:relative;
}
.family-color-editor>summary{
  list-style:none;
  cursor:pointer;
  white-space:nowrap;
}
.family-color-editor>summary::-webkit-details-marker{
  display:none;
}
.family-color-editor[open]{
  width:min(460px,100%);
}
.family-color-form{
  margin-top:.55rem;
  padding:.7rem;
  border:1px solid #d9e4dd;
  border-radius:12px;
  background:#f8fbf9;
}
.family-color-palette{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.4rem;
}
.family-color-choice{
  position:relative;
  display:flex;
  align-items:center;
  gap:.4rem;
  min-width:0;
  padding:.42rem .48rem;
  border:1px solid #d8e2dc;
  border-radius:9px;
  background:#fff;
  cursor:pointer;
}
.family-color-choice:hover{
  background:#f0f6f2;
}
.family-color-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.family-color-choice:has(input:checked){
  border-color:#1f7549;
  box-shadow:0 0 0 2px rgba(31,117,73,.13);
  background:#eef7f1;
}
.family-color-swatch{
  width:18px;
  height:18px;
  flex:0 0 18px;
  border-radius:999px;
  background:var(--swatch-color);
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(25,52,38,.2);
}
.family-color-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.76rem;
  font-weight:800;
}
.family-color-form-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:.6rem;
}
@media (max-width:700px){
  .family-member-row{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .family-color-editor{
    width:100%;
  }
  .family-color-editor>summary{
    width:100%;
    text-align:center;
  }
  .family-color-palette{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:430px){
  .family-color-palette{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* v1.1.1.46 — family color row alignment + unique colors */
.family-member-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.5rem;
  flex-wrap:wrap;
  margin-left:auto;
}
.family-member-actions .family-color-editor{
  width:auto;
  flex:0 0 auto;
}
.family-member-actions .family-color-editor[open]{
  width:min(460px,100%);
  flex-basis:100%;
}
.family-member-actions .family-color-editor>summary{
  min-width:132px;
  text-align:center;
}
.family-member-actions .role-form{
  margin:0;
}
@media (max-width:760px){
  .family-member-actions{
    width:100%;
    justify-content:flex-start;
    margin-left:0;
  }
  .family-member-actions .family-color-editor{
    width:100%;
  }
  .family-member-actions .family-color-editor>summary{
    width:100%;
  }
}


/* v1.1.1.47 — inline family-color validation */
.family-color-inline-error{
  display:flex;
  align-items:flex-start;
  gap:.45rem;
  margin-bottom:.65rem;
  padding:.6rem .7rem;
  border:1px solid #efc6c6;
  border-radius:9px;
  background:#fff0f0;
  color:#8f2727;
  font-size:.8rem;
  font-weight:800;
  line-height:1.35;
}
.family-member-row:target{scroll-margin-top:120px}
.family-color-editor[data-family-color-error-target]>summary{border-color:#d99b9b}


/* v1.1.1.48 — unique family colors beyond the curated palette */
.family-color-custom-choice{grid-column:span 2}
.family-color-custom-input{
  width:30px;height:24px;flex:0 0 30px;padding:0;border:0;
  border-radius:6px;background:transparent;cursor:pointer;
}
.family-color-custom-input::-webkit-color-swatch-wrapper{padding:0}
.family-color-custom-input::-webkit-color-swatch{
  border:2px solid #fff;border-radius:999px;
  box-shadow:0 0 0 1px rgba(25,52,38,.22);
}
.family-color-custom-input::-moz-color-swatch{
  border:2px solid #fff;border-radius:999px;
  box-shadow:0 0 0 1px rgba(25,52,38,.22);
}


/* v1.1.1.49 — visible custom family color picker */
.family-color-custom-choice{
  grid-column:span 2;
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:.45rem;
}
.family-color-custom-preview{
  width:20px;
  height:20px;
  border-radius:999px;
  background:var(--custom-preview-color,#345E4A);
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(25,52,38,.22);
}
.family-color-custom-button{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  white-space:nowrap;
  min-height:30px;
  padding:.3rem .55rem;
  border:1px solid #cfdad3;
  border-radius:8px;
  background:#eef4f0;
  color:#214d38;
  font-size:.72rem;
  font-weight:800;
  cursor:pointer;
}
.family-color-custom-button:hover{
  background:#e3eee7;
}
.family-color-custom-button:focus-within{
  outline:3px solid rgba(31,117,73,.28);
  outline-offset:2px;
}
.family-color-custom-input{
  position:absolute!important;
  inset:-1px!important;
  width:calc(100% + 2px)!important;
  height:calc(100% + 2px)!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
.family-color-custom-choice:has(.family-color-custom-radio:checked){
  border-color:#1f7549;
  box-shadow:0 0 0 2px rgba(31,117,73,.13);
  background:#eef7f1;
}
@media (max-width:430px){
  .family-color-custom-choice{
    grid-column:span 2;
    grid-template-columns:auto auto 1fr;
  }
  .family-color-custom-button{
    grid-column:1 / -1;
    width:100%;
  }
}


/* v1.1.1.50 — family color visibility polish
   Increase member-color indicators roughly 1.5x so they remain useful as
   visual identity cues on dense Calendar cards and Family/member controls. */
.eater-color-dot,
.calendar-eater i{
  width:1rem;
  height:1rem;
}
.calendar-eater-dot{
  width:.78rem;
  height:.78rem;
  border-width:1px;
  margin-left:-.1rem;
}
.calendar-modal-eater-chip i{
  width:1rem;
  height:1rem;
}
.family-member-color-dot{
  width:18px;
  height:18px;
  flex-basis:18px;
}


/* v1.1.1.51 — calendar card alignment cleanup */
.calendar-period-group .calendar-meal-card{
  grid-template-columns:minmax(0,1fr);
  column-gap:0;
  align-items:start;
  text-align:left;
}
.calendar-period-group .calendar-meal-card .event-copy{
  width:100%;
  min-width:0;
  text-align:left;
}
.calendar-period-group .calendar-meal-card .event-period,
.calendar-period-group .calendar-meal-card .event-copy strong,
.calendar-period-group .calendar-meal-card .calendar-eaters,
.calendar-period-group .calendar-meal-card .event-copy small{
  text-align:left;
}
.calendar-modern .calendar-empty-slot{justify-content:flex-start}
.calendar-modern .calendar-empty-slot .calendar-empty-plus{margin-left:auto}


/* v1.1.1.54 — Getting Started chosen-recipe continuity */
.onboarding-target-recipe{
  border-color:#55a978;
  box-shadow:0 0 0 2px rgba(38,132,78,.10);
}
.onboarding-target-label{
  display:inline-flex;
  margin-bottom:.35rem;
  padding:.2rem .42rem;
  border-radius:999px;
  background:#eaf6ee;
  color:#1f6c40;
  font-size:.72rem;
  font-weight:800;
}


/* v1.1.1.55 — Shopping / cover-photo smoke cleanup */
.recipe-photo-cover-actions{padding:0 .45rem .45rem}
.recipe-photo-cover-actions .recipe-photo-control{width:100%}
.shopping-confirm-modal[hidden]{display:none!important}
.shopping-confirm-modal{position:fixed;inset:0;z-index:10030;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(20,38,29,.58)}
.shopping-confirm-dialog{width:min(430px,calc(100vw - 2rem));padding:1.2rem;border-radius:18px;background:#fff;box-shadow:0 18px 60px rgba(15,35,25,.26);text-align:center}
.shopping-confirm-icon{font-size:2rem}
.shopping-confirm-kicker{margin-top:.2rem;font-size:.72rem;font-weight:900;letter-spacing:.08em;color:#52685d}
.shopping-confirm-dialog h2{margin:.3rem 0 .5rem}
.shopping-confirm-dialog p{margin:0 0 1rem;color:#52685d}
.shopping-confirm-actions{display:grid;gap:.5rem}
.shopping-confirm-actions .btn{width:100%}
@media (max-width:760px){
  .cart-add-form{grid-template-columns:1fr 1fr}
  .cart-add-form input[name="item_name"]{grid-column:1/-1}
  .cart-add-form button[type="submit"]{grid-column:2/3}
}
@media (max-width:480px){
  .cart-add-form{grid-template-columns:1fr}
  .cart-add-form input[name="item_name"],.cart-add-form button[type="submit"]{grid-column:1}
}


/* v1.1.1.58 — existing-account Join Another Family */
.family-join-card{margin-top:1rem}
.family-join-heading,.family-join-code-card,.family-join-preview-card,.family-join-back{max-width:820px;margin-left:auto;margin-right:auto}
.family-join-code-form{margin-top:.8rem}
.family-join-code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.65rem;align-items:end}
.family-join-code-row input{text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.family-join-preview-card{display:grid;gap:1rem}
.family-join-preview-icon{font-size:2rem}
.family-join-change-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.family-join-change-grid>div,.family-join-info,.family-join-warning,.family-join-blocked,.family-join-recipes-option{
  border:1px solid #d8e3dc;border-radius:14px;padding:.85rem;background:#f8fbf9
}
.family-join-change-grid strong,.family-join-change-grid span,.family-join-info strong,.family-join-info span,.family-join-warning strong,.family-join-warning span,.family-join-blocked strong,.family-join-blocked span{
  display:block
}
.family-join-change-grid span,.family-join-info span,.family-join-warning span,.family-join-blocked span{margin-top:.25rem;color:#52685d}
.family-join-warning{background:#fff8e6;border-color:#ead7a4}
.family-join-blocked{background:#fff0f0;border-color:#e7bcbc}
.family-join-recipes-option{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer}
.family-join-recipes-option input{margin-top:.25rem;transform:scale(1.15)}
.family-join-recipes-option span,.family-join-recipes-option small{display:block}
.family-join-recipes-option small{margin-top:.25rem;color:#52685d}
.family-join-actions{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.family-join-back{margin-top:.75rem}
@media(max-width:680px){
  .family-join-code-row,.family-join-change-grid,.family-join-actions{grid-template-columns:1fr}
}

/* v1.1.1.61 — Leave Family */
.family-leave-card{margin-top:1rem}
.family-join-confirm-form>input[name="family_name"]{width:100%;margin:.4rem 0 1rem}

/* v1.1.1.64 — flexible categories + bulk recipe type manager */
.recipe-type-manager-page{max-width:980px;margin:0 auto}
.recipe-type-manager-intro{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.recipe-type-manager-intro p{margin:.3rem 0 0}
.recipe-type-summary{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.recipe-type-summary span{padding:.4rem .7rem;border:1px solid #d8e3dc;border-radius:999px;background:#f7faf8}
.recipe-type-manager-toolbar{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;gap:.75rem;align-items:center}
.recipe-type-manager-toolbar label{margin:0}.recipe-type-manager-toolbar input{margin:0}
.recipe-type-manager-list{display:grid;gap:.55rem;margin-top:.75rem}
.recipe-type-manager-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,250px);align-items:center;gap:1rem;padding:.8rem 1rem}
.recipe-type-manager-copy strong,.recipe-type-manager-copy span{display:block}
.recipe-type-manager-copy span{margin-top:.2rem;color:#65766d;font-size:.88rem}
.recipe-type-manager-row select{width:100%;margin:0}
.sticky-save-bar{position:sticky;bottom:.75rem;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;padding:.8rem 1rem;border:1px solid #cad9cf;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(0,0,0,.10)}
@media(max-width:700px){.recipe-type-manager-intro,.sticky-save-bar{align-items:stretch;flex-direction:column}.recipe-type-manager-toolbar,.recipe-type-manager-row{grid-template-columns:1fr}}


/* v1.1.1.68 — Official MealCrew Recipe Library */
.recipe-share-badge.official {
  background: rgba(33,122,70,.11);
  border: 1px solid rgba(33,122,70,.28);
  color: #185c36;
}
.official-recipe-heading .recipe-share-badge {
  display: inline-flex;
  vertical-align: middle;
  margin-right: .35rem;
}


/* v1.1.1.74 — mobile eater layout + touch-safe calendar cards */
@media(max-width:700px){
  .calendar-quick-entry-form .eater-choice input[type="checkbox"]{
    width:1.25rem;
    height:1.25rem;
    flex:0 0 1.25rem;
    margin:0;
  }
  .calendar-quick-entry-form .eater-choice{
    min-width:0;
    overflow:hidden;
  }
  .calendar-quick-entry-form .eater-choice > span:last-child{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* ============================================================
   v1.1.1.75 — Unified MealCrew default meal/recipe artwork
   All meal and recipe surfaces use one neutral branded placeholder when no
   custom photo exists. Ingredient stock artwork remains separate.
   ============================================================ */
.mealcrew-default-photo img,
.recipe-card-photo.stock-photo img,
.recipe-photo-hero.stock-photo img,
.idea-card-photo.stock-photo img,
.shared-recipe-detail-photo.stock-photo img {
  object-fit: contain;
  background: #f2f8f1;
  padding: 8px;
}

/* v1.1.1.79.1 — public source-rating discovery polish */
.source-rating-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.source-rating-filters a{text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:6px 9px;color:#647278;background:#F8FBF9;font-size:9px;font-weight:850}
.source-rating-filters a.active{background:var(--primary);color:white;border-color:var(--primary)}
.recipe-card-source-ratings{min-width:150px;text-align:center;padding:9px 10px;border:1px solid #DCE7DF;border-radius:10px;background:#F7FAF8;font-size:15px;line-height:1.35;color:var(--muted)}
.recipe-card-my-source-rating{color:var(--text);margin-bottom:4px;font-size:16px}
.recipe-card-global-source-rating{font-size:14px}
.recipe-card-my-source-rating strong{color:var(--primary)}
.recipe-card-my-source-rating span[title]{color:#B24656;font-weight:900}
.recipe-card-global-source-rating strong{color:#8A6916}
@media(max-width:700px){.recipe-card-source-ratings{min-width:0;width:100%;text-align:left}.source-rating-filters a{flex:1 1 auto;text-align:center}}


/* v1.1.1.79.3 — inline source ratings on discovery cards */
.recipe-card-source-rating-form{margin:0}
.recipe-card-my-source-rating{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}
.recipe-card-rating-label{font-weight:900;color:var(--primary)}
.recipe-card-rating-stars{display:flex;gap:0;margin:0;flex-wrap:nowrap}
.recipe-card-rating-stars .star-choice span{font-size:21px}
.recipe-card-rating-stars .star-choice{display:inline-flex}
.recipe-card-clear-rating{margin-left:5px;font-size:10px}
.recipe-card-clear-rating span{cursor:pointer;text-decoration:underline}
.recipe-card-favorite-toggle{display:inline-flex;align-items:center;cursor:pointer;color:#B24656;font-size:20px;line-height:1}
.recipe-card-favorite-toggle input{position:absolute;opacity:0;pointer-events:none}
.recipe-card-favorite-toggle:not(:has(input:checked)){color:#C9C1B4}
.recipe-card-rating-save-status{min-height:13px;margin-top:3px;font-size:10px;color:var(--muted);font-weight:800}
@media(max-width:700px){.recipe-card-my-source-rating{justify-content:flex-start}}


/* v1.1.1.79.4 — reliable button-based rating controls */
.rating-stars .star-choice {
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    padding:0;
    margin:0;
    font:inherit;
    cursor:pointer;
}
.rating-stars .star-choice:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
    border-radius:4px;
}
.clear-rating-button {
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    margin-left:8px;
    padding:2px 3px;
    color:var(--muted);
    font:inherit;
    font-size:11px;
    text-decoration:underline;
    cursor:pointer;
}
.clear-rating-button[hidden] {
    display:none !important;
}
.recipe-card-clear-rating {
    margin-left:5px;
    font-size:11px;
}


/* v1.1.1.79.5 — consistent recipe-card rating controls */
.recipe-card-household-ratings {
    width:100%;
}


/* ==========================================================
   v1.1.1.80 — Weighted Top 10 presentation cleanup
   ========================================================== */

.popular-meal-row,
.dashboard-popular-row {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
}

.popular-rank {
    margin-top: 1px;
}

.popular-meal-copy {
    min-width: 0;
    gap: 4px;
}

.popular-meal-name {
    display: block;
    min-width: 0;
    font-size: .88rem;
    font-weight: 850;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popular-meal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 7px;
    min-width: 0;
    color: var(--muted);
    font-size: .70rem;
    line-height: 1.25;
}

.popular-meal-rating {
    color: inherit;
    font-weight: 800;
    white-space: nowrap;
}

.popular-meal-made {
    white-space: nowrap;
}

.popular-library-badge {
    position: relative;
    z-index: 3;
    white-space: nowrap;
}


/* ----------------------------------------------------------
   Mobile / reflow safety
   Desktop sidebar positioning must NEVER leak into mobile.
   ---------------------------------------------------------- */
@media (max-width: 900px) {

    .recipe-viewport-center {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        left: auto !important;
        transform: none !important;
    }

    .recipe-viewport-center .recipe-library-layout {
        display: block;
        position: static;
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
    }

    .recipe-viewport-center .recipe-library-main {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        min-width: 0;
    }

    .recipe-viewport-center .popular-meals-sidebar {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 18px auto 0;
    }

    .recipe-viewport-center .popular-meals-card {
        position: static !important;
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
    }

    .popular-meals-list {
        grid-template-columns: 1fr;
    }

    .popular-meal-row {
        grid-template-columns: 30px minmax(0, 1fr);
        width: 100%;
    }
}


/* Narrow phones */
@media (max-width: 600px) {

    .popular-meals-card {
        padding: 14px;
    }

    .popular-meal-row {
        padding: 10px 2px;
    }

    .popular-meal-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .popular-meal-meta {
        gap: 4px 6px;
    }

    .popular-meals-footnote {
        margin-top: 12px;
    }
}

/* v1.1.1.80 — Mobile app-shell horizontal overflow guard
   Prevent document-level horizontal panning without disabling pinch zoom. */
@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        position: relative;
    }

    .page,
    .topbar,
    footer {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* v1.1.1.80.3 — Keep recipe import aligned with the add/edit form */
@media (min-width:900px){
  .recipe-import-card{
    max-width:820px;
  }
}

/* v1.1.1.80.3 — Center the Add/Edit Item editor within the desktop workspace */
@media (min-width:900px){
  .item-editor-width{
    width:100%;
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
  }
}

/* v1.2 — Allergies & Dietary Restrictions */
.account-dietary-section,.family-dietary-section,.dietary-allergen-field{
    margin:18px 0 2px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#F6F9F7;
}
.dietary-allergen-field{margin:10px 0 16px;background:#FBF8F1}
.dietary-tag-checks label,.allergen-tag-checks label{min-width:140px}
.allergen-conflict-badges{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.allergen-conflict-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 9px;
    border-radius:999px;
    font-size:.76rem;
    font-weight:800;
}
.allergen-conflict-badge.declared{background:#fde8e8;color:#8c2626}
.allergen-conflict-badge.detected{background:#fff5d8;color:#765600}
.recipe-dietary-detail{margin-top:18px}
.recipe-dietary-detail-row{margin:10px 0}
.recipe-dietary-detail-label{display:block;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:4px}
.dietary-tag-badges{display:flex;flex-wrap:wrap;gap:6px}
.dietary-tag-badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:.76rem;font-weight:800;background:#e7f0ea;color:#2b5f43}
.recipe-dietary-detail-disclaimer{margin-top:10px}

.recipe-edit-delete-action {
    margin: 8px auto 0;
}

.recipe-edit-delete-action .btn {
    width: 100%;
}

@media (min-width: 901px) {
    .recipe-import-url-page {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* MealCrew System Admin roadmap: four-view organization. */
.roadmap-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 760px) {
    .roadmap-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* === MealCrew Nutrition Card === */

.nutrition-card {
    padding: 16px 18px;
    margin-bottom: 12px;
}

.nutrition-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.nutrition-card-header h2 {
    margin: 2px 0 0;
    color: #103D2D;
    font-size: 23px;
}

.nutrition-toggle {
    display: flex;
    gap: 6px;
    padding: 4px;
    border-radius: 10px;
    background: var(--surface-soft, #f2f4f2);
}

[data-nutrition-view][hidden] {
    display: none !important;
}

.nutrition-toggle-button {
    appearance: none;
    border: 0;
    border-radius: 8px;
    padding: 8px 16px;
    background: transparent;
    color: var(--muted, #66736d);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.nutrition-toggle-button.active {
    background: #4f8764;
    color: #fff;
}

.nutrition-values {
    display: grid;
    grid-template-columns: minmax(150px, 0.65fr) minmax(320px, 1.75fr);
    gap: 18px;
    align-items: center;
}

.nutrition-calorie-block {
    padding-right: 18px;
    border-right: 1px solid var(--border);
}

.nutrition-calorie-number {
    color: #103D2D;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
}

.nutrition-calorie-label {
    margin-top: 7px;
    color: var(--muted, #66736d);
    font-size: 14px;
}

.nutrition-primary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.nutrition-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nutrition-stat-label {
    color: var(--muted, #66736d);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.nutrition-stat strong {
    color: #103D2D;
    font-size: 20px;
}

.nutrition-secondary-row {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: -4px;
    color: var(--muted, #66736d);
    font-size: 13px;
}

.nutrition-secondary-row strong {
    color: var(--text, #24332d);
}

.nutrition-status {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--muted, #66736d);
    font-size: 12px;
    line-height: 1.5;
}

.nutrition-status strong {
    color: #103D2D;
}

.nutrition-status > span::before {
    content: " · ";
}

.nutrition-unavailable {
    max-width: 640px;
}

.nutrition-unavailable-title {
    margin-bottom: 7px;
    color: #103D2D;
    font-size: 17px;
    font-weight: 800;
}

.nutrition-unavailable p {
    margin: 5px 0;
    color: var(--muted, #66736d);
    line-height: 1.5;
}

.nutrition-progress-text {
    font-size: 12px;
}

@media (max-width: 700px) {
    .nutrition-card {
        padding: 18px 16px;
    }

    .nutrition-card-header {
        display: block;
        margin-bottom: 16px;
    }

    .nutrition-card-header h2 {
        font-size: 20px;
    }

    .nutrition-toggle {
        width: 100%;
        margin-top: 14px;
    }

    .nutrition-toggle-button {
        flex: 1;
        padding: 9px 10px;
    }

    .nutrition-values {
        display: block;
    }

    .nutrition-calorie-block {
        padding: 0 0 16px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .nutrition-calorie-number {
        font-size: 36px;
    }

    .nutrition-primary-grid {
        margin-top: 16px;
    }

    .nutrition-stat strong {
        font-size: 18px;
    }

    .nutrition-secondary-row {
        margin-top: 16px;
    }

    .nutrition-status {
        margin-top: 16px;
    }

    .nutrition-status > span {
        display: block;
        margin-top: 2px;
    }

    .nutrition-status > span::before {
        content: "";
    }
}


/* === Official Recipe Lower Alignment === */

.official-recipe-lower {
    margin-left: auto;
    margin-right: auto;
}

.official-recipe-lower > * {
    max-width: 100%;
}

.official-recipe-lower .preference-card {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.official-recipe-copy-form {
    width: 100%;
    margin: 0;
}

.official-recipe-copy-form .btn,
.official-recipe-back-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
}



/* === Official Recipe Standard Width === */

.shared-recipe-detail-content.content-width-standard,
.nutrition-card.content-width-standard,
.recipe-dietary-detail.content-width-standard {
    width: 100%;
    max-width: var(--content-width-standard);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}


/* Mobile meal-picker eater assignment containment.
   Keep the assignment form inside its recipe card instead of allowing
   flex intrinsic sizing to push member choices beyond the viewport. */
.recipe-card > form[data-eater-assignment-form] {
    min-width:0;
    max-width:100%;
}

@media(max-width:760px) {
    .recipe-card > form[data-eater-assignment-form] {
        width:100%;
        flex:1 1 100%;
    }

    .eater-assignment,
    .eater-checklist,
    .eater-choice {
        min-width:0;
        max-width:100%;
    }

    .eater-choice > span:last-child {
        min-width:0;
        overflow-wrap:anywhere;
    }
}

/* ============================================================
   PICK MEAL — FINAL CONSOLIDATED LAYOUT
   ============================================================ */

/* ---------- Card / meal information ---------- */

.pick-meal-card {
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    width:100%;
    max-width:640px;
    margin:0 auto;
    padding:14px 16px;
    gap:10px;
    align-items:stretch;
}

.pick-meal-info,
.pick-meal-heading-copy {
    width:100%;
    min-width:0;
}

.pick-meal-heading-row {
    display:block;
}

/* Distinct from "Who's eating? -> Edit" (deep inside the card's form,
   editing meal assignment) -- this belongs to the recipe/type badge area
   and edits the underlying recipe itself. flex-wrap lets it drop to its
   own line on narrow phones instead of crowding the type badge. */
.pick-meal-type-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:6px 10px;
}

.pick-meal-edit-recipe-link {
    font-size:11px;
    font-weight:800;
    color:var(--primary);
    text-decoration:none;
    white-space:nowrap;
}

.pick-meal-edit-recipe-link:hover {
    text-decoration:underline;
}

.pick-meal-title-row {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:7px;
    width:100%;
    margin:3px 0 4px;
}

.pick-meal-title-row h2 {
    flex:0 1 auto;
    min-width:0;
    margin:0;
}

/* Real recipe photo only. No placeholder image. */
.pick-meal-thumbnail {
    display:block;
    width:52px;
    height:42px;
    flex:0 0 52px;
    object-fit:cover;
    border-radius:8px;
}

/* Quiet inline metadata:
   meal name -> last made/time/pantry -> thumbnail */
.pick-meal-title-row .pick-meal-context {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0;
    margin:0;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
}

.pick-meal-title-row .pick-meal-context span {
    display:inline-flex;
    align-items:center;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:inherit;
    font-size:11px;
    line-height:1.25;
    white-space:nowrap;
}

.pick-meal-title-row .pick-meal-context span + span::before {
    content:"·";
    margin:0 6px;
    color:var(--muted);
}


/* ---------- Scheduling action panel ---------- */

.pick-meal-card > form[data-eater-assignment-form] {
    display:grid;
    grid-template-columns:max-content max-content minmax(0, 1fr);
    grid-template-areas:
        "serves add ."
        "summary summary summary"
        "edithead edithead edithead"
        "fieldset fieldset fieldset";
    align-items:center;
    gap:9px 12px;

    width:100%;
    min-width:0;
    padding:10px 12px;

    border:1px solid var(--border);
    border-radius:12px;
    background:#f7faf8;
}

.pick-meal-card .pick-serving-choice {
    grid-area:serves;
    display:flex;
    align-items:center;
    gap:8px;
    width:auto;
    margin:0;
}

.pick-meal-card .pick-serving-choice input {
    width:70px;
}

.pick-meal-card > form[data-eater-assignment-form] > .btn {
    grid-area:add;
    justify-self:start;
    align-self:center;
    margin:0;
}


/* ---------- Collapsed eater summary ---------- */

.pick-eater-summary {
    grid-area:summary;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    min-width:0;
    padding-top:9px;
    border-top:1px solid var(--border);
}

.pick-eater-summary-text {
    min-width:0;
    font-size:13px;
}

.pick-eater-summary-text strong {
    font-weight:800;
}

.pick-eater-edit,
.pick-eater-done {
    flex:0 0 auto;
    border:0;
    padding:2px 0;
    background:transparent;
    color:var(--primary);
    font:inherit;
    font-weight:850;
    text-decoration:underline;
    cursor:pointer;
}

.pick-eater-summary[hidden] {
    display:none !important;
}


/* ---------- Expanded eater editor ---------- */

.pick-eater-edit-head {
    grid-area:edithead;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding-top:9px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:11px;
    font-weight:900;
}

.pick-eater-edit-head[hidden] {
    display:none !important;
}

.pick-meal-card .eater-assignment {
    grid-area:fieldset;
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
}

/* Pick Meal supplies its own compact heading. */
.pick-meal-card .eater-assignment legend,
.pick-meal-card .eater-assignment-head {
    display:none;
}

/* Collapsed by default. */
.pick-meal-card .eater-checklist {
    display:none;
}

/* Edit mode. */
.pick-meal-card form[data-eater-assignment-form].pick-eaters-editing .eater-checklist {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px 10px;
    width:100%;
    margin-top:0;
}

.pick-meal-card form[data-eater-assignment-form].pick-eaters-editing .eater-choice {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:7px;

    width:100%;
    min-width:0;
    max-width:100%;
    margin:0;
    padding:7px 9px;

    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;

    font-weight:700;
    line-height:1.2;
    cursor:pointer;
}

.pick-meal-card form[data-eater-assignment-form].pick-eaters-editing .eater-choice input[type="checkbox"] {
    width:16px;
    height:16px;
    flex:0 0 16px;
    margin:0;
}

.pick-meal-card form[data-eater-assignment-form].pick-eaters-editing .eater-color-dot {
    display:inline-block;
    flex:0 0 auto;
}

.pick-meal-card form[data-eater-assignment-form].pick-eaters-editing .eater-choice > span:last-child {
    min-width:0;
    white-space:nowrap;
    overflow:visible;
    overflow-wrap:normal;
    word-break:normal;
}

/* Hidden while collapsed; visible only when editing. */
.pick-meal-card form[data-eater-assignment-form]:not(.pick-eaters-editing) .eater-color-dot {
    display:none;
}

/* Existing validation/allergy behavior remains available. */
.pick-meal-card .eater-assignment-validation,
.pick-meal-card .eater-allergy-warning {
    width:100%;
}


/* ---------- Desktop meal browser ---------- */

@media(min-width:1000px) {
    /* Widen ONLY Pick Meal. Other MealCrew pages are unchanged. */
    .page:has(.pick-meal-card) {
        width:min(1120px, 100%);
    }

    .page:has(.pick-meal-card) .recipe-list {
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:14px;
        align-items:start;
    }

    .pick-meal-card {
        width:100%;
        max-width:none;
        margin:0;
        height:100%;
    }
}


/* ---------- Mobile ---------- */

@media(max-width:760px) {
    .pick-meal-card {
        width:100%;
        max-width:100%;
        padding:13px 14px;
        gap:9px;
    }

    .pick-meal-title-row {
        gap:7px;
    }

    .pick-meal-thumbnail {
        width:48px;
        height:40px;
        flex-basis:48px;
    }

    .pick-meal-title-row .pick-meal-context,
    .pick-meal-title-row .pick-meal-context span {
        font-size:11px;
    }

    .pick-meal-card > form[data-eater-assignment-form] {
        grid-template-columns:max-content max-content minmax(0, 1fr);
        grid-template-areas:
            "serves add ."
            "summary summary summary"
            "edithead edithead edithead"
            "fieldset fieldset fieldset";
        gap:10px 12px;
        padding:11px 12px;
    }

    .pick-meal-card form[data-eater-assignment-form].pick-eaters-editing .eater-checklist {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px 10px;
    }

    .pick-eater-summary-text {
        font-size:13px;
    }
}



/* Pick Meal period tabs are true in-page filters, not navigation links. */
.pick-meal-period-filters button {
    border: 0;
    background: transparent;
    text-align: center;
    font: inherit;
    font-weight: 900;
    color: var(--muted);
    padding: 9px 6px;
    border-radius: 9px;
    cursor: pointer;
}

.pick-meal-period-filters button.active {
    background: white;
    color: var(--primary);
}

/* True Pick Meal client-side filtering must win over card layout display rules. */
.pick-meal-card[hidden] {
    display: none !important;
}


/* Calendar household meal-color settings */
.family-calendar-colors-section{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.family-meal-color-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:14px 0 10px;
}
.family-meal-color-choice{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "name name name"
    "preview picker value";
  align-items:center;
  gap:9px;
  padding:13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}
.family-meal-color-name{
  grid-area:name;
  font-weight:900;
}
.family-meal-color-preview{
  grid-area:preview;
  width:34px;
  height:34px;
  border-radius:9px;
  background:var(--meal-preview-color);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.family-meal-color-input{
  grid-area:picker;
  width:54px;
  height:36px;
  padding:2px;
  margin:0;
  cursor:pointer;
}
.family-meal-color-value{
  grid-area:value;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  font-family:monospace;
}
@media(max-width:650px){
  .family-meal-color-grid{grid-template-columns:1fr}
}

/* v1.1.1.84.9 — occurrence-specific Meal Prep Reminders */
.meal-prep-reminder-section{display:grid;gap:10px;text-align:left;margin:12px 0 16px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#f8faf8}
.meal-prep-reminder-head,.meal-prep-recipient-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.meal-prep-reminder-head>div{display:grid;gap:2px}
.meal-prep-reminder-head small,.meal-prep-help{font-size:.76rem;color:var(--muted)}
.meal-prep-reminder-list{display:grid;gap:8px}
.meal-prep-reminder-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface,#fff)}
.meal-prep-reminder-copy{display:grid;gap:3px;min-width:0}
.meal-prep-reminder-copy strong{overflow-wrap:anywhere}
.meal-prep-reminder-copy small{color:var(--muted)}
.meal-prep-reminder-actions{display:flex;gap:8px;flex:0 0 auto}
.meal-prep-delete{color:var(--danger,#9f2f2f)}
.meal-prep-empty{padding:8px 0;color:var(--muted);font-size:.86rem}
.meal-prep-empty[hidden],.meal-prep-reminder-form[hidden]{display:none!important}
.meal-prep-reminder-form{display:grid;gap:8px;padding-top:10px;border-top:1px solid var(--border)}
.meal-prep-reminder-form>input,.meal-prep-reminder-form>select{width:100%}
.meal-prep-time-row{display:grid;grid-template-columns:minmax(90px,.7fr) minmax(180px,1.3fr);gap:8px}
.meal-prep-time-row input,.meal-prep-time-row select{width:100%}
.meal-prep-recipient-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.meal-prep-recipient-choice{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface,#fff);cursor:pointer}
.meal-prep-recipient-choice input{width:auto!important;margin:0}
.meal-prep-form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.calendar-reminder-time-block>small{font-size:.72rem;color:var(--muted)}
@media(max-width:520px){
  .meal-prep-reminder-head{align-items:stretch;flex-direction:column}
  .meal-prep-reminder-head .btn{width:100%}
  .meal-prep-reminder-row{align-items:flex-start;flex-direction:column}
  .meal-prep-reminder-actions{width:100%;justify-content:flex-end}
  .meal-prep-time-row{grid-template-columns:1fr}
  .meal-prep-recipient-grid{grid-template-columns:1fr}
}
[data-meal-management-card]{cursor:pointer}
[data-meal-management-card]:focus-visible{outline:3px solid var(--accent,#3f7f68);outline-offset:3px}

/* v1.1.1.85.0 — multi-day Family Event placement correction.
   Desktop Month/Week bars live inside the affected week row, below the date
   headings. Mobile Week becomes a vertical day list, so each affected day
   receives its own compact continuation chip instead of a detached 7-column
   banner above the list.

   v1.1.1.86.0 — "+Event" now renders in normal flow immediately below the
   date heading (calendar.html moved it to its own .calendar-day-add-actions
   sibling, out of the padded .calendar-events container), so each
   --calendar-multiday-top offset below is pushed down by that row's own
   height -- the spanning bar(s) now start below "+Event" instead of
   overlapping/preceding it. .calendar-events' own padding-top formula is
   unchanged: it only ever needed to clear the bars' own height, and now
   naturally starts lower because .calendar-day-add-actions precedes it in
   flow. */
.calendar-week-block {
  position: relative;
  --calendar-multiday-lane-height: 20px;
  --calendar-multiday-top: 83px;
}
.calendar-week-block .calendar-week-row {
  position: relative;
  z-index: 1;
}
.calendar-week-block.has-multiday .calendar-events {
  padding-top: calc((var(--multi-lanes, 1) * var(--calendar-multiday-lane-height)) + 4px);
}
.calendar-week-block .calendar-multiday-row {
  position: absolute;
  z-index: 4;
  top: var(--calendar-multiday-top);
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 18px;
  gap: 2px 0;
  padding: 0;
  background: transparent;
  border: 0;
  pointer-events: none;
}
.calendar-week-block .calendar-multiday-bar {
  pointer-events: auto;
}
.calendar-mobile-multiday-events {
  display: none;
}

/* Month has the compact date header, so its bar lane sits a little higher
   than Week while still remaining inside the date row. */
.calendar-modern.month .calendar-week-block {
  --calendar-multiday-top: 78px;
}

@media (max-width: 760px) {
  /* Mobile Month remains a real seven-column grid. Keep the continuous bars
     aligned to their actual dates inside each week row. */
  .calendar-modern.month .calendar-week-block {
    --calendar-multiday-top: 50px;
    --calendar-multiday-lane-height: 15px;
  }
  .calendar-modern.month .calendar-week-block .calendar-multiday-row {
    grid-auto-rows: 14px;
    gap: 1px 0;
  }
  .calendar-modern.month .calendar-week-block.has-multiday .calendar-events {
    padding-top: calc((var(--multi-lanes, 1) * 15px) + 2px);
  }

  /* Mobile Week stacks one day per row. A horizontal seven-column bar cannot
     remain semantically attached to those dates, so hide it and render the
     same segment as a compact chip inside every affected day. */
  .calendar-modern.week .calendar-multiday-row {
    display: none !important;
  }
  .calendar-modern.week .calendar-week-block.has-multiday .calendar-events {
    padding-top: 0;
  }
  .calendar-modern.week .calendar-mobile-multiday-events {
    display: grid;
    gap: 4px;
    margin: 0 0 2px;
  }
  .calendar-mobile-multiday-event {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid rgba(127,127,127,.18);
    border-left-width: 4px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
  }
  .calendar-mobile-multiday-event strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}