:root {
    --wb-ink: #202a2c;
    --wb-muted: #697476;
    --wb-line: #dce3de;
    --wb-page: #f2f5f1;
    --wb-card: #ffffff;
    --wb-green: #6ea900;
    --wb-green-dark: #3d6500;
    --wb-coral: #d85f4b;
    --wb-gold: #dda31d;
    --wb-takeout: #00a88f;
}

body { overflow-x: hidden; }

.wb-page,
.wb-page * { box-sizing: border-box; }

.wb-page {
    min-height: 78vh;
    padding: 196px 18px 72px;
    color: var(--wb-ink);
    font-family: "DM Sans", sans-serif;
    background-color: var(--wb-page);
    background-image: linear-gradient(rgba(32, 42, 44, .045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(32, 42, 44, .045) 1px, transparent 1px);
    background-size: 32px 32px;
}

.wb-page-inner {
    width: min(100%, 1720px);
    margin: 0 auto;
}

.wb-workspace { width: 100%; }
.wb-csrf { display: none; }

.wb-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.wb-toolbar-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.wb-save-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--wb-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: var(--wb-ink);
    font-size: .76rem;
    font-weight: 700;
}

.wb-save-state { color: var(--wb-green-dark); }
.wb-save-state i { color: var(--wb-green); }
.wb-save-state.is-saving { color: var(--wb-gold); }
.wb-save-state.is-saving i { color: var(--wb-gold); }
.wb-save-state.is-error { color: #9d3328; border-color: #edc8c2; background: #fff3f1; }
.wb-save-state.is-error i { color: var(--wb-coral); }

.wb-icon-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--wb-line);
    border-radius: 50%;
    background: var(--wb-card);
    color: var(--wb-ink);
    cursor: pointer;
}

.wb-icon-button:hover,
.wb-icon-button:focus-visible {
    border-color: var(--wb-green);
    color: var(--wb-green-dark);
    outline: 3px solid rgba(110, 169, 0, .16);
}

.wb-board-frame {
    height: clamp(480px, 64vh, 700px);
    overflow: hidden;
    border: 1px solid #d6ddd8;
    border-radius: 8px;
    background: rgba(232, 237, 232, .88);
    box-shadow: 0 18px 48px rgba(32, 42, 44, .10);
}

.wb-board-scroll {
    width: 100%;
    height: 100%;
    padding: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: #aab6ac transparent;
    scrollbar-width: thin;
}

.wb-board-scroll:focus-visible {
    outline: 3px solid rgba(110, 169, 0, .2);
    outline-offset: -3px;
}

.wb-board {
    display: flex;
    align-items: stretch;
    gap: 12px;
    height: 100%;
    min-width: max-content;
    min-height: 0;
}

.wb-loading {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 18px;
    color: var(--wb-muted);
    font-size: .86rem;
}

.wb-day {
    --day-accent: #aab6ac;
    position: relative;
    display: flex;
    flex: 0 0 246px;
    flex-direction: column;
    width: 246px;
    height: 100%;
    min-height: 0;
    padding: 0 10px 12px;
    border-top: 4px solid var(--day-accent);
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    border-radius: 8px;
    background: rgba(248, 250, 248, .92);
}

.wb-day.is-cook-day {
    --day-accent: var(--wb-green);
    border-right: 1px solid rgba(110, 169, 0, .3);
    border-bottom: 1px solid rgba(110, 169, 0, .3);
    border-left: 1px solid rgba(110, 169, 0, .3);
    background: #eef7e5;
    box-shadow: 0 6px 18px rgba(77, 124, 15, .1);
}

.wb-day-head {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    min-height: 86px;
    padding: 11px 2px 9px;
    border-bottom: 1px solid var(--wb-line);
}

.wb-day-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.wb-day-title {
    margin: 0;
    color: var(--wb-ink);
    font-family: "Fraunces", serif;
    font-size: 1.02rem;
    line-height: 1.2;
}

.wb-cook-day-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--wb-green-dark);
    font-size: .58rem;
    font-weight: 800;
    text-transform: uppercase;
}

.wb-cook-day-tag i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(110, 169, 0, .14);
    font-size: .72rem;
}

.wb-day-metrics {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid #dce4dd;
    border-radius: 6px;
    background: rgba(255, 255, 255, .72);
}

.wb-day-total-label {
    color: #77827b;
    font-size: .54rem;
    font-weight: 800;
    text-transform: uppercase;
}

.wb-day-metric-values {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.wb-day-calories {
    color: var(--wb-green-dark);
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}

.wb-day-count {
    color: #536057;
    font-size: .6rem;
    font-weight: 700;
    white-space: nowrap;
}

.wb-card-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 10px 3px 2px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-color: #aab6ac transparent;
    scrollbar-width: thin;
}

.wb-meal-card {
    --category-accent: #7b8780;
    --category-soft: #eef2ef;
    --category-ink: #4e5b53;
    position: relative;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 34px minmax(0, 1fr) 27px;
    gap: 9px;
    min-height: 88px;
    padding: 10px 9px;
    border: 1px solid #dfe5e1;
    border-radius: 8px;
    background: var(--wb-card);
    box-shadow: 0 3px 9px rgba(32, 42, 44, .07);
}

.wb-meal-card[data-category="user_created"] {
    --category-accent: var(--wb-coral);
    --category-soft: #fff0ed;
    --category-ink: #9d3328;
}
.wb-meal-card[data-category="assembly"] {
    --category-accent: var(--wb-green);
    --category-soft: #eef7dc;
    --category-ink: #4d7c0f;
}
.wb-meal-card[data-category="batcher"] {
    --category-accent: var(--wb-gold);
    --category-soft: #fff5cd;
    --category-ink: var(--wb-gold);
}
.wb-meal-card[data-category="takeout"] {
    --category-accent: var(--wb-takeout);
    --category-soft: #dcf8f2;
    --category-ink: #007668;
}
.wb-meal-card[data-category="research"] {
    --category-accent: var(--wb-coral);
    --category-soft: #fff0ed;
    --category-ink: #9d3328;
}
.wb-meal-card[data-category="pantry"] {
    --category-accent: #8b5cf6;
    --category-soft: #f1ecfe;
    --category-ink: #6d28d9;
}

.wb-meal-card:hover {
    border-color: #cbd5cd;
    box-shadow: 0 7px 16px rgba(32, 42, 44, .11);
}

.wb-card-image,
.wb-card-image-fallback {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    object-fit: cover;
    background: #edf2eb;
}

.wb-card-image-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--category-accent);
    font-size: .83rem;
}

.wb-card-body { min-width: 0; }

.wb-card-kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 7px;
    margin-bottom: 4px;
}

.wb-card-slot {
    color: #738078;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.wb-card-title {
    margin: 0;
    color: var(--wb-ink);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.wb-card-subtitle {
    margin: 3px 0 0;
    color: var(--wb-muted);
    font-size: .68rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.wb-card-facts,
.wb-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 7px;
    margin-top: 6px;
    color: #56625a;
    font-size: .63rem;
}

.wb-card-facts span { white-space: nowrap; }
.wb-card-facts i { margin-right: 3px; color: var(--category-accent); }

.wb-card-tag {
    padding: 2px 5px;
    border-radius: 4px;
    background: #eef2ed;
    color: #536057;
}

.wb-card-actions {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 3px;
}

.wb-card-add,
.wb-card-remove,
.wb-card-grip {
    align-self: start;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
}

.wb-card-add { color: var(--category-ink); cursor: pointer; }
.wb-card-remove { color: #a0a8a2; cursor: pointer; }
.wb-card-grip { color: #98a19a; cursor: grab; touch-action: none; }

.wb-card-add:hover,
.wb-card-add:focus-visible {
    background: var(--category-soft);
    color: var(--category-ink);
    outline: 2px solid color-mix(in srgb, var(--category-accent) 22%, transparent);
}

.wb-card-remove:hover,
.wb-card-remove:focus-visible {
    background: #fff0ed;
    color: #9d3328;
    outline: 2px solid rgba(216, 95, 75, .18);
}

.wb-card-grip:hover,
.wb-card-grip:focus-visible {
    background: #eef2ed;
    color: var(--wb-green-dark);
    outline: 2px solid rgba(110, 169, 0, .18);
}

.wb-card-grip:active { cursor: grabbing; }
.wb-sortable-ghost { opacity: .35; }
.wb-sortable-chosen { transform: rotate(.4deg); box-shadow: 0 12px 24px rgba(32, 42, 44, .16); }
.wb-sortable-drag { opacity: .96; }

.wb-card-footer {
    grid-column: 1 / -1;
    margin-top: 3px;
    padding: 2px;
    border: 1px solid #dfe6e0;
    border-radius: 6px;
    background: transparent;
    transition: background .15s ease, border-color .15s ease;
}

.wb-card-footer:hover {
    border-color: color-mix(in srgb, var(--category-accent) 32%, #dfe6e0);
    background: var(--category-soft);
}

.wb-log-form { width: 100%; }

.wb-log-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 24px;
    padding: 2px 7px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--category-accent);
    font-size: .63rem;
    font-weight: 800;
    cursor: pointer;
}

.wb-log-button:hover,
.wb-log-button:focus-visible {
    background: color-mix(in srgb, var(--category-accent) 10%, transparent);
    outline: 2px solid color-mix(in srgb, var(--category-accent) 26%, transparent);
}

.wb-card-prep-footer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 5px;
    color: var(--wb-gold);
    font-size: .62rem;
    font-weight: 800;
}

.wb-day-menu {
    position: fixed;
    z-index: 1095;
    width: 168px;
    padding: 6px;
    border: 1px solid #d6ddd8;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(32, 42, 44, .18);
}

.wb-day-menu[hidden] { display: none; }
.wb-day-menu-title { padding: 5px 7px 7px; color: #7b8580; font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.wb-day-menu-item { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px; border: 0; border-radius: 5px; background: transparent; color: var(--wb-ink); font-size: .7rem; font-weight: 700; text-align: left; cursor: pointer; }
.wb-day-menu-item i { color: var(--wb-green); }
.wb-day-menu-item .fa-kitchen-set { font-size: .85rem; }
.wb-day-menu-item.is-all { margin-bottom: 4px; border-bottom: 1px solid #e7ece8; border-radius: 5px 5px 0 0; }
.wb-day-menu-item:hover,
.wb-day-menu-item:focus-visible { background: #eef5e9; outline: none; }

.wb-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 3px 0;
    color: var(--wb-muted);
    font-size: .74rem;
    font-weight: 600;
}

.wb-summary-key { color: #9aa49c; }

@media (max-width: 760px) {
    .wb-page { padding: 112px 10px 54px; }
    .wb-toolbar { align-items: flex-start; flex-direction: column; gap: 14px; }
    .wb-toolbar-meta { justify-content: flex-start; }
    .wb-board-frame { height: min(68vh, 620px); min-height: 480px; }
    .wb-board-scroll { padding: 10px; scroll-snap-type: x proximity; }
    .wb-day { flex-basis: min(82vw, 270px); width: min(82vw, 270px); scroll-snap-align: start; }
}

/* Requirement 8: tighter calendar + card sizing for phones so a day column
   isn't oversized relative to the screen and cards stay easy to scan. */
@media (max-width: 480px) {
    .wb-board-frame { min-height: 420px; }
    .wb-day { flex-basis: min(88vw, 246px); width: min(88vw, 246px); padding: 0 8px 10px; }
    .wb-day-head { min-height: 72px; padding: 9px 2px 7px; gap: 6px; }
    .wb-day-title { font-size: .92rem; }
    .wb-day-metrics { padding: 5px 7px; }
    .wb-meal-card {
        grid-template-columns: 30px minmax(0, 1fr) 24px;
        gap: 7px;
        min-height: 76px;
        padding: 8px 7px;
    }
    .wb-meal-card.is-read-only { grid-template-columns: 30px minmax(0, 1fr); }
    .wb-card-image, .wb-card-image-fallback { width: 30px; height: 30px; }
    .wb-card-title { font-size: .78rem; }
    .wb-card-subtitle, .wb-card-facts, .wb-card-tags { font-size: .6rem; }
    .wb-card-add, .wb-card-remove, .wb-card-grip { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .wb-card-footer { transition: none; }
    .wb-meal-card { transition: none; }
}

.wb-meal-card.is-read-only {
    grid-template-columns: 34px minmax(0, 1fr);
}

.wb-card-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--category-soft);
    color: var(--category-ink);
    font-size: .56rem;
    font-weight: 800;
    text-transform: uppercase;
}

.wb-card-category-badge i { color: var(--category-accent); }