/*
 * css/components/weekly-plan-v2.css
 * 06 Oct 2026 v3
 *
 * v3 - D-12 PROGRESS-FIT. .weekly-plan-view is the screen's width (capped
 *   at 480px). Centred with auto margins it sized itself to its content,
 *   and the seven-day strip made it 505px on a 412px phone even at normal
 *   text; now the strip scrolls inside the screen, as it was built to.
 *
 * 05 Jul 2026 v2
 *
 * v2 — Nav-bar-covers-sheet bug. .wp-config-sheet was z-index: 9000 —
 *   an exact tie with nav-fix.css's #bottom-nav (z-index: 9000
 *   !important). On a tie between two position:fixed stacking contexts,
 *   whichever element sits later in DOM order wins the paint — the nav
 *   bar lives in the persistent app shell, after the router-swapped
 *   content, so it always won regardless of which view was open.
 *   Raised to 9999 to clear it entirely and match the convention
 *   already used by settings.css's .settings-dialog (also 9999) —
 *   not a coincidence fix, an established pattern this file should
 *   have followed from the start. No changes needed to nav-fix.css.
 *
 * v1 — Styles for weekly-plan.js v2 additions.
 * Extends existing weekly-plan.css.
 *
 * NOTE (not fixed this pass, flagging for a future cleanup session):
 * weekly-plan.css (30 May v1) styles a table/row layout
 * (.weekly-plan-row, .day-type-btn, .focus-chip) that doesn't match
 * any class name in the current weekly-plan.js v2/v3 — it appears to
 * be dead CSS left over from an earlier redesign, still being cached
 * and served for no reason. No collision with this file's class names,
 * so not urgent, but worth removing from SHELL_URLS at some point.
 */

.weekly-plan-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4) var(--space-8);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.wp-header { display: flex; flex-direction: column; gap: var(--space-1); }
.wp-title { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-text); margin: 0; }
.wp-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* Grid
   DISP-4, 12 Aug 2026. Graeme, from the device pass: "Nothing breaks
   exactly, but where I increase text size in settings/display the things
   like week plan then need to be slideable like the settings tabs."

   repeat(7, 1fr) forced seven days into the viewport whatever the text
   size, so at 130% the row simply ran off the right edge with no way to
   reach Sat and Sun. A fixed column count and a user-controlled type
   scale cannot both be satisfied; one of them has to give, and it should
   not be the person's text size.

   Now scrolls horizontally, exactly as he suggested and exactly as the
   Settings tab strip already does. Days get a minimum width rather than
   an equal share, so they stay legible instead of squeezing. At the
   default scale all seven still fit, so nothing changes for anybody who
   has not touched the control.

   scroll-snap keeps a day aligned rather than stranded half off-screen,
   and scroll-padding keeps the snapped day clear of the left edge. */
.wp-grid {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--space-1);
  -webkit-overflow-scrolling: touch;
  /* No visible scrollbar on mobile; the content itself signals the
     overflow by being cut mid-card at the edge. */
  scrollbar-width: none;
}
.wp-grid::-webkit-scrollbar { display: none; }

.wp-day-slot {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 4.5rem;      /* scales with the root, so it grows with text */
  scroll-snap-align: start;
}

.wp-day-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
  min-height: 72px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.1s;
}

.wp-day-slot--today .wp-day-btn {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.wp-day-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.wp-day-btn__name { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--font-medium); }
.wp-day-btn__icon { font-size: var(--text-base); }
.wp-day-btn__label { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
.wp-day-btn__duration { font-size: var(--text-xs); color: var(--color-primary); }
.wp-day-today-marker { font-size: var(--text-xs); color: var(--color-primary); font-weight: var(--font-bold); }

/* Legend */
/* DISP-4. flex-wrap was already right -- the legend reflows to two lines
   at larger text rather than clipping, which is the correct behaviour for
   a legend and is why it was left alone. */
.wp-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-2) 0; }
.wp-legend__item { display: flex; align-items: center; gap: var(--space-1); }
.wp-legend__icon { font-size: var(--text-sm); color: var(--color-text-muted); }
.wp-legend__label { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Toggle row */
.wp-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}

/* Config sheet */
.wp-config-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.wp-config-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.wp-config-sheet__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-5) var(--space-4) var(--space-8);
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.wp-config-sheet__title { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-text); margin: 0; }

.wp-config-section { display: flex; flex-direction: column; gap: var(--space-2); }
.wp-config-section__label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text); margin: 0; }
.wp-config-section__optional { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--font-normal); }
.wp-config-section__coach-line { font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; margin: 0; }

.wp-config-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.wp-chip {
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transition: border-color 0.1s, background 0.1s;
}

.wp-chip--selected {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
}

.wp-chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.wp-config-sheet__actions { display: flex; gap: var(--space-3); justify-content: flex-end; padding-top: var(--space-2); }