/* ===========================================
   8) MEAL PLANNING pills (grid-accordion)
   =========================================== */

/* Program & workout headings (kept as-is) */
#wktProgram, #mealProgram{
  font-weight:700; font-size:16px; line-height:1.2;
  color:#0b1320; margin-bottom:6px;
}
#wktTitle{
  font-weight:600; font-size:15px; line-height:1.2;
  color:var(--text);
}

/* Grid stack wrapper ensures equal spacing between each pill */
.planning-stack{
  display:grid;
  gap: var(--plan-gap); /* uses token defined at top */
}

/* Align pills under ✓ column from Workout row */
.planning-stack.meal-indent{ margin-left:34px; }

/* Pill wrapper container (the floating box around each pill) */
.pill-dropdown{
  border:1px solid var(--plan-pill-border);
  border-radius:10px;
  background: var(--plan-pill-bg);

  /* prevent Chrome "helpful" re-anchoring when expanding */
  overflow-anchor: none;

  /* permanent floating look */
  position: relative;
  transform: translateY(var(--pill-lift));
  box-shadow: var(--pill-shadow-const);
  overflow: visible; /* allows soft oval shadow */
}
/* Soft ground oval under each pill */
.pill-dropdown::before{
  content:"";
  position:absolute;
  left: var(--pill-oval-inset);
  right: var(--pill-oval-inset);
  bottom:-10px;
  height: var(--pill-oval-height);
  pointer-events:none;
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(0,0,0,.18), rgba(0,0,0,0) 70%);
  filter: blur(6px);
  opacity: var(--pill-oval-opacity);
  z-index:0;
}
/* keep all pill children above the oval */
.pill-dropdown > *{ position: relative; z-index:1; }

/* Header button (was <summary>, now <button>) */
.pill-toggle{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; cursor:pointer; user-select:none;

  padding: 8px 12px;
  border-radius:10px 10px 0 0;

  font-family: var(--plan-pill-font);
  font-size: var(--plan-pill-size);
  font-weight: var(--plan-pill-weight);
  color: var(--plan-pill-text);

  background: transparent;
  border: 0;
  -webkit-tap-highlight-color: transparent;

  /* NEW: ensures scrolled pill headers land below sticky header */
  scroll-margin-top: var(--sticky-offset);
}
@media (hover:hover){
  .pill-toggle:hover{ background: var(--plan-pill-hover); }
}

/* Label + meta cluster inside the header */
.pill-toggle .label{ font-weight:600; }
.pill-toggle .meta{
  margin-left:auto; margin-right:8px;
  font-size: var(--plan-meta-size);
  line-height:1.1;
  font-weight:500;
  color: var(--muted);
}
.pill-toggle .chev{
  font-size:14px;
  transform-origin:50% 50%;
  transition: transform .2s ease;
}
.pill-toggle[aria-expanded="true"] .chev{
  transform: rotate(180deg);
}

/* Optional: stronger shadow when open (wired in JS) */
.pill-dropdown.pill-open{
  box-shadow: var(--pill-shadow-strong);
  transform: none; /* cancel the tiny translate for iOS jitter */
}

/* Accordion panel always expands downward and pushes siblings down */
.pill-panel{
  position: static;                  /* IMPORTANT: keep in normal flow */
  display:grid;
  grid-template-rows: 0fr;           /* collapsed state */
  transition: grid-template-rows 200ms ease;

  background:#fff;
  border-top:1px solid var(--plan-pill-border);
  border-radius:0 0 10px 10px;
  margin-top:0;
}
/* hide inner content when collapsed */
.pill-panel > .inner{ overflow:hidden; }
/* expanded */
.pill-panel.is-open{ grid-template-rows: 1fr; }

/* Panel body content */
.pill-panel .content{
  padding:8px 10px;
  color:var(--muted);
  font-size:13px;
}

/* Week Meal Plan rows inside a panel */
.week-plan{ display:block; }
.week-plan .wp-row{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap:8px;
  padding:6px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.week-plan .wp-row:last-child{ border-bottom:none; }
.week-plan .wp-date{
  min-width:92px;
  font-weight:700;
  color:#0b1320;
}
.week-plan .wp-meals{
  color:var(--muted);
  font-size:13px;
  line-height:1.3;
}
.week-plan .wp-meal{ margin:2px 0; }

/* === ThriveChamp Meals — modals, sheets, disabled pills, polish ============== */

/* Generic buttons used by the modals (match your brand as needed) */
.btn { padding: 10px 14px; border-radius: 999px; border: 1px solid #e6e6e6; background:#fff; }
.btn:hover { box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.btn-primary { background: #20b278; color:#fff; border-color:#20b278; }
.btn-primary:hover { filter: brightness(0.98); }
.btn-ghost { background: transparent; }

/* Small pill buttons (e.g., “Use”) */
.btn-small { padding: 6px 10px; font-size: 13px; }

/* When a slot is locked, we disable the buttons; make that visually obvious */
button:disabled,
button[disabled] {
  opacity: .45 !important;
  cursor: not-allowed !important;
  filter: grayscale(15%);
  box-shadow: none !important;
}

/* Macro line under a meal title */
.js-meal-macros { color:#5b6b77; font-size: 13px; }
.js-meal-macros.is-empty { color:#a5b0b7; }

/* ---------- <dialog> base ---------- */
.tc-modal::backdrop,
.tc-sheet::backdrop { background: rgba(0,0,0,.25); }
.tc-modal, .tc-sheet { border: none; padding: 0; border-radius: 14px; }

/* Card look inside dialog */
.tc-card {
  min-width: 320px;
  max-width: 520px;
  background: #fff; color:#1d2730; 
  border-radius: 14px; padding: 16px 16px 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

.tc-title {
  font-weight: 700; font-size: 18px; margin: 4px 2px 10px;
}

.tc-body { margin: 8px 4px 12px; line-height: 1.5; color:#3b4852; }

.tc-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px;
}

/* Simple grid for custom macros form */
.tc-form .tc-grid {
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin:10px 0 4px;
}
.tc-form .tc-span-2 { grid-column: 1 / -1; }
.tc-form label { display:flex; flex-direction: column; gap:6px; font-size: 13px; }
.tc-form input {
  border:1px solid #e6eef2; border-radius: 10px; padding:10px 12px; font-size:14px;
}
.tc-form select {
  border:1px solid #e6eef2; border-radius: 10px; padding:10px 12px; font-size:14px;
}

/* ---------- Catalog sheet (list of 4) ---------- */
.tc-sheet .tc-card { max-width: 560px; }
.tc-tabs { display:flex; gap: 8px; margin: 8px 2px 12px; }
.btn-tab { padding:8px 12px; border-radius: 999px; border:1px solid #e6e6e6; background:#fafafa; }
.btn-tab.is-active { background:#e9fbf5; border-color:#20b278; color:#167e57; }

.tc-list { display:flex; flex-direction: column; gap:8px; max-height: 60vh; overflow:auto; }
.tc-row {
  display:flex; align-items: center; justify-content: space-between;
  padding:10px 12px; border:1px solid #edf2f6; border-radius:12px; background:#fff;
}
.tc-row-title { font-weight: 600; line-height: 1.25; }
.tc-row-sub { color:#5b6b77; font-size: 13px; margin-top: 3px; }
.tc-row-cta { margin-left: 12px; }

/* Per-accordion tuning (set vars for border thickness/color + panel bg/border) */
.plan-row[data-kind="tmr-meals"]{
  --plan-row-bg: #d9e5f1;
  --plan-row-bg-open: #d9e5f1;
  --plan-row-border: .5px solid #203a61;
  --plan-row-border-open: .5px solid #203a61;
}
.plan-row[data-kind="tmr-grocery"]{
  --plan-row-bg: #c2d4e6;
  --plan-row-bg-open: #c2d4e6;
  --plan-row-border: .5px solid #203a61;
  --plan-row-border-open: .5px solid #203a61;
}
.plan-row[data-kind="week-meals"]{
  --plan-row-bg: #b3c7df;
  --plan-row-bg-open: #b3c7df;
  --plan-row-border: .5px solid #203a61;
  --plan-row-border-open: .5px solid #203a61;
}
.plan-row[data-kind="week-grocery"]{
  --plan-row-bg: #9fb6d4;
  --plan-row-bg-open: #9fb6d4;
  --plan-row-border: .5px solid #203a61;
  --plan-row-border-open: .5px solid #203a61;
}
.plan-row[data-kind="week-workouts"]{
  --plan-row-bg: #8fa5c4;
  --plan-row-bg-open: #8fa5c4;
  --plan-row-border: .5px solid #1a2f4d;
  --plan-row-border-open: .5px solid #1a2f4d;
}

/* Apply per-row vars to the matching panel */
.card.planner #panel-tmr-meals.plan-panel{
  --plan-panel-bg: #f8fdff;
  --plan-panel-border: .5px solid #203a61;
}
.card.planner #panel-tmr-grocery.plan-panel{
  --plan-panel-bg: #f8fdff;
  --plan-panel-border: .5px solid #203a61;
}
.card.planner #panel-week-meals.plan-panel{
  --plan-panel-bg: #f8fdff;
  --plan-panel-border: .5px solid #203a61;
}
.card.planner #panel-week-grocery.plan-panel{
  --plan-panel-bg: #f8fdff;
  --plan-panel-border: .5px solid #203a61;
}
.card.planner #panel-week-workouts.plan-panel{
  --plan-panel-bg: #f8fdff;
  --plan-panel-border: .5px solid #1a2f4d;
}

/* ---------- Busy overlay when saving ---------- */
body.is-busy::before {
  content: ""; position: fixed; inset: 0; background: rgba(255,255,255,.35);
  z-index: 9998;
}
body.is-busy::after {
  content: ""; position: fixed; top: 50%; left: 50%;
  width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%;
  border: 3px solid #20b278; border-right-color: transparent;
  animation: tcspin .8s linear infinite; z-index: 9999;
}
@keyframes tcspin { to { transform: rotate(360deg); } }

/* =============================================================================
   Planner accordion (separate from Mind)
   ============================================================================= */
.plan-acc{
  display:grid;
  gap:12px;
  margin-top:10px;
  overflow:visible;
}

.card.planner .plan-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  text-align:left;
  border: var(--plan-row-border, 1px solid #3c5e5c);
  background: var(--plan-row-bg, #9cd7daaf) !important;
  font:800 16px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-appearance:none;
  appearance:none;
  background-image:none;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  transform:translateY(var(--acc-lift));
  box-shadow:var(--acc-row-shadow);
  z-index:1;
  transition: box-shadow .18s ease, transform .12s ease, background-color .12s ease;
  color:#0f172a;
}
.card.planner .plan-row .label{ flex:1 1 auto; }
.card.planner .plan-row .row-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.card.planner .plan-row .plan-chev{ font-size:18px; line-height:1; user-select:none; transition:transform .18s ease; }

/* Hover (shadow only; keep color locked to base like Mind) */
@media (hover:hover) and (pointer:fine){
  .card.planner .plan-row[aria-expanded="false"]:hover{
    background: var(--plan-row-bg, #9cd7daaf) !important;
    box-shadow: var(--acc-row-shadow-strong);
    border: var(--plan-row-border, 1px solid #3c5e5c);
  }
}

/* Focus ring (match Mind accordion behavior) */
.card.planner .plan-row:focus-visible{
  outline:2px solid var(--pill-focus-ring);
  outline-offset:3px;
  border-radius:12px;
}

.card.planner .plan-row[aria-expanded="true"] .plan-chev{ transform: rotate(180deg); }
.card.planner .plan-row[aria-expanded="true"]{
  box-shadow:var(--acc-row-shadow-strong);
  border-bottom: var(--plan-row-border-open, var(--plan-row-border, 1px solid #3c5e5c));
  border-radius:12px 12px 0 0;
  background: var(--plan-row-bg-open, var(--plan-row-bg, #9cd7daaf)) !important;
}
.card.planner .plan-row:active{
  background: var(--plan-row-bg, #9cd7daaf) !important;
}

/* Override generic button hover background on mobile */
@media (hover:none){
  .card.planner .plan-row:hover,
  .card.planner .plan-row:active{
    background: var(--plan-row-bg, #9cd7daaf) !important;
    border: var(--plan-row-border, 1px solid #3c5e5c);
    box-shadow: var(--acc-row-shadow-strong);
  }
}
.plan-badge{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:999px; font:900 12px/1 system-ui; box-shadow:0 1px 4px rgba(0,0,0,.15); user-select:none; }
.plan-badge.pending{ display:none; }

.card.planner .plan-panel{
  background: var(--plan-panel-bg, #edfcfcb0);
  border: var(--plan-panel-border, 1px solid #3c5e5c);
  border-radius:12px;
  padding:10px 12px;
  position:relative;
  transform:none;
  box-shadow:var(--acc-row-shadow);
  overflow:visible;
  margin-top:-12px;
  border-top:0;
  border-radius:0 0 12px 12px;
}
.card.planner .plan-panel::before{
  content:"";
  position:absolute;
  left:calc(var(--acc-ground-inset) - 2px);
  right:calc(var(--acc-ground-inset) - 2px);
  bottom:-10px;
  height:calc(var(--acc-ground-spread) + 2px);
  pointer-events:none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.16), rgba(0,0,0,0) 70%);
  filter:blur(6px);
  opacity:var(--acc-ground-opacity);
  z-index:0;
}
.card.planner .plan-panel > *{ position:relative; z-index:1; }

.planner .planner-tomorrow-card{
  background: transparent;
  border:0;
  border-radius:0;
  padding:0;
  position:relative;
  transform:none;
  box-shadow:none;
}
.planner .planner-tomorrow-card .subhead{
  display:flex;
  align-items:center;
  gap:6px;
  padding-left:14px;
}
.planner .planner-tomorrow-card .plan-icon{
  display:inline-flex;
  font-size:14px;
  line-height:1;
  margin-left:-10px;
}
.planner .planner-tomorrow-card .meal-row{
  padding:6px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.planner .planner-tomorrow-card .meal-row:last-child{ border-bottom:none; }
.planner .planner-tomorrow-card .plan-meal-name{
  /* color:var(--muted); */
  font-size:16px;
  font-weight:400;
  line-height:1.3;
}

/* Indent grocery lists slightly */
#groceryTomorrowList,
#groceryWeekList{
  padding-left: 10px;
}

/* Week plan strip: remove pill background + add dotted separators */
#weekMealsStrip .chip{
  display:block;
  margin:6px 0;
  padding:0 0 0 5px;
  border:0;
  border-radius:0;
  background: transparent;
  color:#1f2a44;
  font-size:13px;
  font-weight:400;
  line-height:1.3;
}
#weekMealsStrip .chip:first-child{ margin-top:11px; }
#weekMealsStrip .chip .week-dow{ font-weight:700; }
#weekMealsStrip .chip::after{
  content:"• • • • • • • • •";
  display:block;
  text-align:center;
  color:#4b82c8; /* medium blue */
  font-weight:700;
  letter-spacing:.18em;
  margin-top:6px;
}
#weekMealsStrip .chip:last-child::after{ content:none; }

/* Week workouts strip: match week meals stacking + dotted separators */
#weekWorkoutsStrip .chip{
  display:block;
  margin:6px 0;
  padding:0 0 0 5px;
  border:0;
  border-radius:0;
  background: transparent;
  color:#1f2a44;
  font-size:13px;
  font-weight:400;
  line-height:1.3;
}
#weekWorkoutsStrip .chip:first-child{ margin-top:11px; }
#weekWorkoutsStrip .chip .week-dow{ font-weight:700; }
#weekWorkoutsStrip .chip.is-recovery{ color:#475569; }
#weekWorkoutsStrip .week-workout-note{
  display:inline-block;
  margin-left:4px;
  color:#64748b;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
}
#weekWorkoutsStrip .chip::after{ content:none; }