/* ─── Cascade Layers ──────────────────────────────────────────────────────── */
@layer reset, tokens, base, layout, components, utilities;

/* ─── Custom Property Animations ─────────────────────────────────────────── */
@property --cal-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(100% 0 0);
}

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* Brand */
    --green-900: oklch(28% 0.1 145);
    --green-800: oklch(36% 0.12 145);
    --green-700: oklch(44% 0.14 145);
    --green-600: oklch(52% 0.16 145);
    --green-500: oklch(60% 0.17 145);
    --green-400: oklch(68% 0.16 145);
    --green-300: oklch(76% 0.14 145);
    --green-200: oklch(84% 0.1 145);
    --green-100: oklch(92% 0.06 145);
    --green-50:  oklch(96% 0.03 145);

    /* Neutrals */
    --neutral-950: oklch(12% 0.01 145);
    --neutral-900: oklch(18% 0.01 145);
    --neutral-700: oklch(38% 0.01 145);
    --neutral-500: oklch(58% 0.01 145);
    --neutral-300: oklch(78% 0.01 145);
    --neutral-200: oklch(88% 0.01 145);
    --neutral-100: oklch(94% 0.01 145);
    --neutral-50:  oklch(97% 0.005 145);

    /* Semantic */
    --color-brand:      var(--green-600);
    --color-brand-dark: var(--green-700);
    --color-brand-pale: var(--green-50);
    --color-bg:         var(--neutral-50);
    --color-surface:    oklch(100% 0 0);
    --color-text:       var(--neutral-900);
    --color-muted:      var(--neutral-500);
    --color-border:     var(--neutral-200);
    --color-danger:     oklch(55% 0.22 25);
    --color-danger-bg:  oklch(96% 0.06 25);

    /* Category colors */
    --cat-breakfast: oklch(78% 0.15 80);
    --cat-lunch:     oklch(68% 0.17 155);
    --cat-dinner:    oklch(60% 0.2 280);
    --cat-snack:     oklch(74% 0.16 50);
    --cat-dessert:   oklch(72% 0.2 0);
    --cat-other:     oklch(65% 0.08 200);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Radii */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.08), 0 1px 2px oklch(0% 0 0 / 0.05);
    --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.1), 0 2px 4px oklch(0% 0 0 / 0.06);
    --shadow-lg: 0 10px 30px oklch(0% 0 0 / 0.12), 0 4px 8px oklch(0% 0 0 / 0.06);

    /* Transitions */
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 400ms;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg:      oklch(14% 0.02 145);
      --color-surface: oklch(18% 0.02 145);
      --color-text:    oklch(92% 0.01 145);
      --color-muted:   oklch(60% 0.01 145);
      --color-border:  oklch(28% 0.02 145);
      --color-brand-pale: oklch(22% 0.04 145);
    }
  }
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    scroll-behavior: smooth;
  }

  body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    min-block-size: 100dvh;
    -webkit-font-smoothing: antialiased;
  }

  img, svg { display: block; max-inline-size: 100%; }
  button { cursor: pointer; font: inherit; border: none; background: none; }
  input, select, textarea { font: inherit; }
  a { color: inherit; }
  ul, ol { list-style: none; }
}

/* ─── Base ────────────────────────────────────────────────────────────────── */
@layer base {
  h1 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; line-height: 1.2; text-wrap: balance; }
  h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 600; text-wrap: balance; }
  h3 { font-size: 1.125rem; font-weight: 600; }

  ::selection { background: color-mix(in oklch, var(--color-brand) 30%, transparent); }

  :focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  ::placeholder { color: var(--color-muted); opacity: 0.7; }

  scrollbar-color: var(--color-border) transparent;
  scrollbar-width: thin;
}

/* ─── Layout ──────────────────────────────────────────────────────────────── */
@layer layout {
  #app {
    display: contents;
  }

  .page-app {
    display: grid;
    grid-template-rows: auto 1fr;
    min-block-size: 100dvh;
  }

  .main-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-4);
    max-inline-size: 1100px;
    margin-inline: auto;
    inline-size: 100%;
  }

  @media (min-width: 900px) {
    .main-content {
      padding: var(--space-8);
    }
  }
}

/* ─── Components ──────────────────────────────────────────────────────────── */
@layer components {

  /* ── App Header ── */
  .app-header {
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-border);
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);

    & .header-inner {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      padding: var(--space-3) var(--space-4);
      max-inline-size: 1100px;
      margin-inline: auto;
    }

    & .header-logo {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--color-brand);
      text-decoration: none;

      & svg { flex-shrink: 0; }
    }

    & .header-nav {
      display: flex;
      align-items: center;
      gap: var(--space-1);
    }

    & .nav-link {
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-full);
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--color-muted);
      text-decoration: none;
      transition: background var(--dur-fast), color var(--dur-fast);

      &:hover { color: var(--color-text); background: var(--color-bg); }

      &.active {
        color: var(--color-brand);
        background: color-mix(in oklch, var(--color-brand) 12%, transparent);
      }
    }

    & .header-spacer { flex: 1; }

    @media (max-width: 720px) {
      & .header-inner { flex-wrap: wrap; }
      & .header-nav {
        order: 3;
        flex-basis: 100%;
        padding-block-end: var(--space-1);
      }
    }

    & .header-user {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      font-size: 0.875rem;
      color: var(--color-muted);
    }
  }

  /* ── Auth Page ── */
  .auth-page {
    display: grid;
    place-items: center;
    min-block-size: 100dvh;
    padding: var(--space-4);
    background: var(--color-bg);
  }

  .auth-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
    inline-size: 100%;
    max-inline-size: 400px;
    border: 1px solid var(--color-border);

    & .auth-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
      margin-block-end: var(--space-8);
      text-align: center;

      & .logo-icon {
        inline-size: 64px;
        block-size: 64px;
        background: var(--color-brand);
        border-radius: var(--radius-lg);
        display: grid;
        place-items: center;
        color: white;
      }

      & h1 { font-size: 1.5rem; }
      & p { color: var(--color-muted); font-size: 0.9rem; }
    }

    & .auth-note {
      margin-block-start: var(--space-6);
      color: var(--color-muted);
      font-size: 0.8rem;
      text-align: center;
    }
  }

  .pow-captcha {
    margin-block-end: var(--space-4);
    display: grid;
    gap: var(--space-2);
  }

  .pow-captcha-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    font-size: 0.85rem;
    color: var(--color-muted);

    & span:last-child {
      font-variant-numeric: tabular-nums;
      color: var(--color-text);
    }
  }

  .pow-progress {
    block-size: 0.5rem;
    border-radius: var(--radius-full, 999px);
    background: color-mix(in oklch, var(--color-brand) 12%, var(--color-border));
    overflow: hidden;
  }

  .pow-progress-bar {
    block-size: 100%;
    inline-size: 0%;
    background: var(--color-brand);
    transition: inline-size 120ms ease-out;
  }

  /* ── Form Fields ── */
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-block-end: var(--space-4);

    & label {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--color-text);
    }

    & input:not([type="checkbox"]):not([type="radio"]), & select, & textarea {
      padding: var(--space-3) var(--space-4);
      border: 1.5px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-surface);
      color: var(--color-text);
      font-size: 0.9375rem;
      transition: border-color var(--dur-fast) var(--ease-smooth),
                  box-shadow var(--dur-fast) var(--ease-smooth);
      inline-size: 100%;

      &:focus {
        outline: none;
        border-color: var(--color-brand);
        box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-brand) 20%, transparent);
      }
    }

    & textarea {
      resize: vertical;
      min-block-size: 80px;
    }
  }

  /* ── Buttons ── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--dur-fast) var(--ease-smooth);
    white-space: nowrap;
    flex-shrink: 0;

    &:disabled { opacity: 0.5; cursor: not-allowed; }
  }

  .btn-primary {
    background: var(--color-brand);
    color: white;
    box-shadow: 0 1px 3px oklch(0% 0 0 / 0.15);

    &:hover:not(:disabled) {
      background: var(--color-brand-dark);
      box-shadow: var(--shadow-sm);
      transform: translateY(-1px);
    }

    &:active:not(:disabled) { transform: translateY(0); }
  }

  .btn-ghost {
    background: transparent;
    color: var(--color-muted);
    border: 1.5px solid var(--color-border);

    &:hover:not(:disabled) {
      background: var(--color-bg);
      color: var(--color-text);
      border-color: var(--color-muted);
    }
  }

  .btn-danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1.5px solid color-mix(in oklch, var(--color-danger) 25%, transparent);

    &:hover:not(:disabled) {
      background: var(--color-danger);
      color: white;
    }
  }

  .btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: 0.8125rem;
  }

  .btn-full { inline-size: 100%; justify-content: center; }

  .btn-icon {
    padding: var(--space-2);
    border-radius: var(--radius-md);
  }

  .link-btn {
    color: var(--color-brand);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;

    &:hover { color: var(--color-brand-dark); }
  }

  /* ── Error / Alert ── */
  .error-msg {
    padding: var(--space-3) var(--space-4);
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    margin-block-end: var(--space-4);
    border: 1px solid color-mix(in oklch, var(--color-danger) 20%, transparent);
  }

  /* ── Calendar Section ── */
  .calendar-section {
    container-type: inline-size;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
  }

  .calendar-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-end: var(--space-5);

    & h2 {
      flex: 1;
      text-align: center;
      font-size: 1.125rem;
    }
  }

  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
  }

  .cal-dow {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
    padding-block: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .cal-day {
    --cal-bg: var(--color-surface);
    background: var(--cal-bg);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    min-block-size: 80px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: border-color var(--dur-fast) var(--ease-smooth),
                background var(--dur-base) var(--ease-smooth),
                box-shadow var(--dur-fast) var(--ease-smooth);
    position: relative;
    overflow: hidden;

    &.empty {
      background: transparent;
      cursor: default;
      pointer-events: none;
    }

    &:not(.empty):hover {
      border-color: var(--color-brand);
      box-shadow: var(--shadow-sm);
      --cal-bg: var(--color-brand-pale);
    }

    /* Today: badge on the day number only — not a full-cell highlight,
       so it stays distinct from selection / drag-over. */
    &.today .day-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: 1.5rem;
      block-size: 1.5rem;
      border-radius: var(--radius-full);
      background: var(--color-brand);
      color: oklch(100% 0 0);
      font-weight: 700;
    }

    &.drag-over {
      border-color: var(--color-brand);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-brand) 25%, transparent);
      --cal-bg: var(--color-brand-pale);
    }

    &:has(.meal-chip) .day-num { margin-block-end: var(--space-1); }
    &:has(.meal-chip) .day-heading { margin-block-end: var(--space-1); }

    @container (max-width: 500px) {
      min-block-size: 60px;
      padding: var(--space-1);
    }
  }

  .day-num {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1;
  }

  .meal-chip {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.3;
    margin-block-start: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-inline-size: 100%;

    &.cat-breakfast { background: color-mix(in oklch, var(--cat-breakfast) 20%, transparent); color: oklch(40% 0.15 80); }
    &.cat-lunch     { background: color-mix(in oklch, var(--cat-lunch) 20%, transparent);     color: oklch(35% 0.17 155); }
    &.cat-dinner    { background: color-mix(in oklch, var(--cat-dinner) 25%, transparent);    color: oklch(35% 0.18 280); }
    &.cat-snack     { background: color-mix(in oklch, var(--cat-snack) 20%, transparent);     color: oklch(40% 0.16 50); }
    &.cat-dessert   { background: color-mix(in oklch, var(--cat-dessert) 20%, transparent);   color: oklch(40% 0.18 0); }
    &.cat-other     { background: color-mix(in oklch, var(--cat-other) 20%, transparent);     color: oklch(35% 0.08 200); }

    @container (max-width: 500px) {
      display: none;
      &:first-of-type { display: flex; }
    }
  }

  .meal-chip-dot {
    inline-size: 5px;
    block-size: 5px;
    border-radius: var(--radius-full);
    background: currentColor;
    flex-shrink: 0;
  }

  .more-meals {
    font-size: 0.6rem;
    color: var(--color-muted);
    margin-block-start: 1px;
    font-weight: 500;
  }

  /* ── Meals Library Section ── */
  .meals-section {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
  }

  .section-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-end: var(--space-5);
    flex-wrap: wrap;

    & h2 { flex: 1; }
  }

  .section-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
  }

  .search-bar {
    display: flex;
    gap: var(--space-2);
    margin-block-end: var(--space-4);

    & input {
      flex: 1;
      padding: var(--space-2) var(--space-3);
      border: 1.5px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-bg);
      font-size: 0.875rem;
      color: var(--color-text);
      transition: border-color var(--dur-fast);

      &:focus { outline: none; border-color: var(--color-brand); }
    }
  }

  .meal-filters {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-block-end: var(--space-4);
  }

  .filter-chip {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1.5px solid var(--color-border);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: all var(--dur-fast);

    &:hover { border-color: var(--color-brand); color: var(--color-brand); }

    &.active {
      background: var(--color-brand);
      border-color: var(--color-brand);
      color: white;
    }
  }

  .meals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
  }

  .meal-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1.5px solid var(--color-border);
    cursor: default;
    transition: all var(--dur-fast) var(--ease-smooth);
    position: relative;

    &:hover {
      border-color: var(--color-brand);
      box-shadow: var(--shadow-sm);
      transform: translateY(-1px);
    }

    &.dragging {
      opacity: 0.5;
      cursor: grabbing;
    }

    & .meal-card-header {
      display: flex;
      align-items: flex-start;
      gap: var(--space-2);
      margin-block-end: var(--space-2);
    }

    & .meal-card-name {
      font-size: 0.9375rem;
      font-weight: 600;
      flex: 1;
      word-break: break-word;
    }

    & .meal-card-desc {
      font-size: 0.8125rem;
      color: var(--color-muted);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    & .meal-card-footer {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin-block-start: var(--space-3);
      flex-wrap: wrap;
    }

    & .meal-card-actions {
      display: flex;
      gap: var(--space-1);
    }
  }

  .category-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.02em;

    &.cat-breakfast { background: color-mix(in oklch, var(--cat-breakfast) 20%, transparent); color: oklch(40% 0.15 80); }
    &.cat-lunch     { background: color-mix(in oklch, var(--cat-lunch) 20%, transparent);     color: oklch(35% 0.17 155); }
    &.cat-dinner    { background: color-mix(in oklch, var(--cat-dinner) 25%, transparent);    color: oklch(35% 0.18 280); }
    &.cat-snack     { background: color-mix(in oklch, var(--cat-snack) 20%, transparent);     color: oklch(40% 0.16 50); }
    &.cat-dessert   { background: color-mix(in oklch, var(--cat-dessert) 20%, transparent);   color: oklch(40% 0.18 0); }
    &.cat-other     { background: color-mix(in oklch, var(--cat-other) 20%, transparent);     color: oklch(35% 0.08 200); }
  }

  .empty-state {
    padding: var(--space-12) var(--space-8);
    text-align: center;
    color: var(--color-muted);

    & .empty-icon {
      font-size: 3rem;
      margin-block-end: var(--space-4);
      opacity: 0.5;
    }

    & p { font-size: 0.9375rem; max-inline-size: 280px; margin-inline: auto; }
    & p + p { margin-block-start: var(--space-2); font-size: 0.875rem; opacity: 0.75; }
  }

  /* ── Modal ── */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: oklch(0% 0 0 / 0.45);
    z-index: 200;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    backdrop-filter: blur(4px);
    animation: fade-in var(--dur-base) var(--ease-smooth) both;
  }

  .modal {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    inline-size: 100%;
    max-inline-size: 480px;
    max-block-size: 90dvh;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    animation: slide-up var(--dur-base) var(--ease-spring) both;
  }

  .modal-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-block-end: 1px solid var(--color-border);
    position: sticky;
    inset-block-start: 0;
    background: var(--color-surface);
    z-index: 1;

    & h3 { flex: 1; }
  }

  .modal-body {
    padding: var(--space-5) var(--space-6);
  }

  .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6) var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }

  /* Day plan modal specifics */
  .day-plan-date {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-block-end: var(--space-4);
  }

  .plan-entry {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    margin-block-end: var(--space-2);

    & .plan-entry-info { flex: 1; }
    & .plan-entry-name { font-weight: 500; font-size: 0.9375rem; }
    & .plan-entry-time { font-size: 0.8rem; color: var(--color-muted); text-transform: capitalize; }
  }

  .add-to-plan-form {
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }

  .add-to-plan-form h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-block-end: var(--space-3);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .meal-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-2);
    max-block-size: 220px;
    overflow-y: auto;
    padding: var(--space-2);
    margin-inline: calc(var(--space-2) * -1);
  }

  .meal-picker-item {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-border);
    cursor: pointer;
    text-align: left;
    transition: all var(--dur-fast);
    font-size: 0.875rem;
    font-weight: 500;

    &:hover { border-color: var(--color-brand); background: var(--color-brand-pale); }

    &.selected {
      border-color: var(--color-brand);
      background: var(--color-brand);
      color: white;
    }
  }

  /* ── Toast ── */
  #toast-container {
    position: fixed;
    inset-block-end: var(--space-6);
    inset-inline-end: var(--space-6);
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
  }

  .toast {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    animation: slide-in-right var(--dur-base) var(--ease-spring) both;
    max-inline-size: 320px;

    &.toast-success {
      background: oklch(30% 0.12 145);
      color: oklch(92% 0.06 145);
    }

    &.toast-error {
      background: oklch(30% 0.15 25);
      color: oklch(92% 0.06 25);
    }

    &.toast-info {
      background: var(--neutral-900);
      color: white;
    }

    &.fade-out {
      animation: fade-out var(--dur-base) var(--ease-smooth) both;
    }
  }

  /* ── Category select with colored dot ── */
  .category-option-dot {
    display: inline-block;
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--radius-full);
    margin-inline-end: 4px;
  }

  /* ── Divider ── */
  .divider {
    block-size: 1px;
    background: var(--color-border);
    margin-block: var(--space-4);
  }

  /* ── Large-screen layout enhancements ── */

  /* On small/medium screens: hide chips beyond the 3rd.
     .day-heading is child 1, chips start at child 2, so the 4th chip = :nth-child(5). */
  .cal-day .meal-chip:nth-child(n+5) {
    display: none;
  }

  /* The small-only "+N more" indicator is visible on small screens */
  .more-meals.small-only {
    display: block;
  }

  /* ── Month meal list (calendar list view) ── */
  .month-list-section {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
  }

  .month-meal-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .month-meal-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-border);
    background: var(--color-bg);
    cursor: grab;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);

    &:hover {
      border-color: var(--color-brand);
      box-shadow: var(--shadow-sm);
    }

    &.dragging { opacity: 0.5; cursor: grabbing; }

    & .month-meal-info { flex: 1; min-inline-size: 0; }
    & .month-meal-name {
      font-weight: 600;
      font-size: 0.9375rem;
      word-break: break-word;
    }
    & .month-meal-meta {
      font-size: 0.8125rem;
      color: var(--color-muted);
      margin-block-start: 2px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2);
    }
  }

  .rollover-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-block-end: var(--space-3);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--color-brand) 8%, var(--color-bg));
    border: 1px solid color-mix(in oklch, var(--color-brand) 20%, var(--color-border));

    & > div { min-inline-size: 0; inline-size: 100%; }
    & p { margin: 0; font-size: 0.875rem; }
    & .rollover-hint {
      color: var(--color-muted);
      font-size: 0.8125rem;
      margin-block-start: 2px;
    }
    & .btn { flex-shrink: 0; }
  }

  .unscheduled-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    background: color-mix(in oklch, var(--color-muted) 16%, transparent);
    color: var(--color-muted);
  }

  .leftover-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    background: color-mix(in oklch, var(--color-brand) 18%, transparent);
    color: var(--color-brand);
  }

  .meal-chip.is-leftover {
    border: 1px dashed color-mix(in oklch, currentColor 35%, transparent);
    font-style: italic;
  }

  .month-meal-item.is-leftover {
    border-style: dashed;
  }

  .plan-entry.is-leftover .plan-entry-name {
    font-style: italic;
  }

  .shadow-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px dotted color-mix(in oklch, var(--color-brand) 55%, transparent);
    background: color-mix(in oklch, var(--color-brand) 8%, transparent);
    color: var(--color-brand);
  }

  .meal-chip.is-shadow {
    opacity: 0.72;
    border: 1px dotted color-mix(in oklch, currentColor 55%, transparent);
    background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 3px,
      color-mix(in oklch, currentColor 10%, transparent) 3px,
      color-mix(in oklch, currentColor 10%, transparent) 5px
    );
  }

  .month-meal-item.is-shadow {
    border-style: dotted;
    background: color-mix(in oklch, var(--color-brand) 4%, var(--color-bg));
  }

  .plan-entry.is-shadow {
    border-style: dotted;
    border-color: color-mix(in oklch, var(--color-brand) 40%, var(--color-border));
    background: color-mix(in oklch, var(--color-brand) 5%, var(--color-bg));
  }

  .shadow-suggestions {
    margin-block: var(--space-4);
    padding-block-start: var(--space-3);
    border-block-start: 1px dashed var(--color-border);

    & h4 {
      font-size: 0.875rem;
      margin-block-end: 0.25rem;
    }
  }

  .cal-day.shadow-suggested {
    outline: 1px dotted var(--color-brand);
    outline-offset: -2px;
  }

  .leftovers-fields {
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border);
  }

  .leftover-toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    margin-block-end: var(--space-3);

    & input {
      margin-block-start: 0.2rem;
      accent-color: var(--color-brand);
    }
  }

  .leftovers-options {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--color-brand) 6%, var(--color-bg));
    border: 1px solid color-mix(in oklch, var(--color-brand) 16%, var(--color-border));
  }

  .cal-day.disabled {
    opacity: 0.35;
    pointer-events: none;
  }

  .cal-day.leftover-selected {
    outline: 2px solid var(--color-brand);
  }

  .day-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    flex-wrap: wrap;
  }

  .attr-badge-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }

  .attr-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: nowrap;

    &.compact {
      padding: 0 5px;
      font-size: 0.58rem;
    }

    &.attr-quick            { background: color-mix(in oklch, oklch(78% 0.16 80) 22%, transparent); color: oklch(42% 0.14 80); }
    &.attr-can_premake      { background: color-mix(in oklch, oklch(70% 0.14 180) 22%, transparent); color: oklch(38% 0.12 180); }
    &.attr-hands_off        { background: color-mix(in oklch, oklch(65% 0.16 250) 22%, transparent); color: oklch(38% 0.14 250); }
    &.attr-short_dinner_prep { background: color-mix(in oklch, oklch(74% 0.16 55) 22%, transparent); color: oklch(42% 0.14 55); }
    &.attr-no_dinner_prep   { background: color-mix(in oklch, oklch(62% 0.12 300) 22%, transparent); color: oklch(40% 0.12 300); }
    &.attr-gone_before_dinner { background: color-mix(in oklch, oklch(68% 0.12 20) 22%, transparent); color: oklch(42% 0.12 20); }
  }

  @media (prefers-color-scheme: dark) {
    .attr-badge.attr-quick { color: oklch(86% 0.12 80); }
    .attr-badge.attr-can_premake { color: oklch(82% 0.1 180); }
    .attr-badge.attr-hands_off { color: oklch(84% 0.1 250); }
    .attr-badge.attr-short_dinner_prep { color: oklch(86% 0.12 55); }
    .attr-badge.attr-no_dinner_prep { color: oklch(84% 0.1 300); }
    .attr-badge.attr-gone_before_dinner { color: oklch(86% 0.1 20); }
  }

  .meal-picker-item .attr-badge-row,
  .plan-entry-info .attr-badge-row {
    display: flex;
    margin-block-start: 4px;
  }

  .day-attr-editor {
    margin-block-end: var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--color-border);
  }

  .attr-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }

  .attr-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-border);
    background: var(--color-bg);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-muted);
    cursor: pointer;
    user-select: none;
    transition: all var(--dur-fast);

    & input {
      accent-color: var(--color-brand);
      margin: 0;
      inline-size: auto;
      padding: 0;
      border: none;
      box-shadow: none;
    }

    &:hover { border-color: var(--color-brand); color: var(--color-text); }

    &:has(input:checked),
    &.active {
      border-color: var(--color-brand);
      background: color-mix(in oklch, var(--color-brand) 12%, var(--color-bg));
      color: var(--color-text);
    }
  }

  .month-meal-actions {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
  }

  .share-kicker {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-block-end: var(--space-1);
  }

  .share-time-group {
    margin-block-end: var(--space-5);

    &:last-child { margin-block-end: 0; }
  }

  .share-time-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-2);
  }

  .share-meal-item {
    cursor: default;

    &:hover {
      border-color: var(--color-border);
      box-shadow: none;
    }
  }

  .main-content.layout-share {
    max-inline-size: 1100px;
  }

  .share-cal-day {
    cursor: default;

    &:hover {
      border-color: var(--color-border);
      box-shadow: none;
      transform: none;
    }
  }

  @media (min-width: 900px) {
    .main-content.layout-share {
      grid-template-columns: 1fr 320px;
      align-items: start;
    }
  }

  .share-link-text {
    flex: 1;
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text);
    overflow-wrap: anywhere;
    user-select: all;
  }

  @media (min-width: 1100px) {
    /* Two-column side-by-side layout on the calendar page */
    .main-content.layout-calendar {
      grid-template-columns: 1fr 360px;
      align-items: start;
      gap: var(--space-6);
    }

    /* Sidebar: sticky and independently scrollable */
    .layout-calendar .month-list-section {
      position: sticky;
      top: calc(64px + var(--space-6));
      max-block-size: calc(100dvh - 64px - var(--space-12));
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    /* Taller day cells — room for all meals */
    .cal-day {
      min-block-size: 130px;
      padding: var(--space-3);
    }

    /* Show ALL chips on large screens */
    .cal-day .meal-chip:nth-child(n+5) {
      display: flex;
    }

    /* Hide the small-screen "+N more" text */
    .more-meals.small-only {
      display: none;
    }

    /* Slightly wider chips to show full meal name */
    .meal-chip {
      font-size: 0.7rem;
      padding: 2px 6px;
      gap: 4px;
    }

    /* Meal time label on the chip dot becomes a tag */
    .meal-chip-dot {
      inline-size: 6px;
      block-size: 6px;
    }

    /* Slightly bigger day number */
    .day-num {
      font-size: 0.9375rem;
      margin-block-end: var(--space-1);
    }

    /* Calendar takes full panel height so the grid breathes */
    .calendar-section {
      align-self: start;
    }
  }

  /* ── Household UI ── */

  .household-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--color-brand) 12%, transparent);
    border: 1.5px solid color-mix(in oklch, var(--color-brand) 30%, transparent);
    color: var(--color-brand);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-fast);

    &:hover {
      background: color-mix(in oklch, var(--color-brand) 20%, transparent);
    }
  }

  .household-name {
    max-inline-size: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .member-count {
    background: var(--color-brand);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    min-inline-size: 18px;
    block-size: 18px;
    display: grid;
    place-items: center;
    padding-inline: 4px;
  }

  .household-empty-btn {
    gap: var(--space-1);
  }

  .header-divider {
    display: inline-block;
    inline-size: 1px;
    block-size: 18px;
    background: var(--color-border);
    flex-shrink: 0;
  }

  .cal-context-label {
    font-size: 0.75rem;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-block-start: 2px;
  }

  .section-subtitle {
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin-block-start: 2px;
  }

  .plan-entry-by {
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-block-start: 2px;
  }

  .meal-author {
    font-size: 0.75rem;
    color: var(--color-muted);
    font-style: italic;
  }

  .meal-card-footer .btn { margin-inline-start: 0; }

  /* Household modal */
  .household-welcome {
    text-align: center;
    padding: var(--space-4) 0 var(--space-6);

    & .household-welcome-icon {
      color: var(--color-brand);
      margin-block-end: var(--space-4);
      display: flex;
      justify-content: center;
    }

    & p {
      font-size: 0.9375rem;
      color: var(--color-muted);
      max-inline-size: 300px;
      margin-inline: auto;
      line-height: 1.5;
    }
  }

  .divider-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin-block: var(--space-2);

    &::before, &::after {
      content: '';
      flex: 1;
      block-size: 1px;
      background: var(--color-border);
    }
  }

  .invite-code-box {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-border);
  }

  .invite-code-text {
    flex: 1;
    font-family: ui-monospace, monospace;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-text);
    user-select: all;
    white-space: nowrap;
    font-variant-ligatures: none;
  }

  .field-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    display: block;
  }

  .member-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .member-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border-radius: var(--radius-md);
  }

  .member-avatar {
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--radius-full);
    background: var(--color-brand);
    color: white;
    display: grid;
    place-items: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
  }

  .member-username {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
  }

  .you-badge {
    font-size: 0.75rem;
    color: var(--color-muted);
    font-weight: 400;
  }

  .role-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--color-brand) 15%, transparent);
    color: var(--color-brand);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* ── Install Banner ── */
  .install-banner {
    background: var(--color-brand);
    color: white;
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: 0.875rem;
    animation: slide-down var(--dur-base) var(--ease-spring) both;

    & span { flex: 1; }
    & .install-actions { display: flex; gap: var(--space-2); }
  }
}

/* ─── Utilities ───────────────────────────────────────────────────────────── */
@layer utilities {
  .hidden { display: none !important; }
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }
  .mt-auto { margin-block-start: auto; }
  .text-center { text-align: center; }
  .text-muted { color: var(--color-muted); }
  .font-mono { font-family: ui-monospace, monospace; }
  .flex { display: flex; }
  .items-center { align-items: center; }
  .gap-2 { gap: var(--space-2); }
  .gap-3 { gap: var(--space-3); }
  .w-full { inline-size: 100%; }
}

/* ─── Animations ──────────────────────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── View Transitions ────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: fade-out var(--dur-base) var(--ease-smooth) both;
}

::view-transition-new(root) {
  animation: fade-in var(--dur-base) var(--ease-smooth) both;
}

/* ─── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .app-header, .btn, .modal-backdrop { display: none; }
  .cal-day { border: 1px solid #ccc; }
}