/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
  --c-bg:           #F8F7F4;
  --c-surface:      #FFFFFF;
  --c-border:       #E2DDD6;
  --c-text:         #1A1A2E;
  --c-muted:        #6B6875;

  --c-ezra:         #3B6CB7;
  --c-ezra-light:   #EEF2FA;
  --c-hazel:        #7B4EA0;
  --c-hazel-light:  #F3EEF8;
  --c-school:       #2D6A4F;
  --c-school-light: #EDF5F1;
  --c-family:       #2A9D8F;
  --c-family-light: #EDF7F6;
  --c-supply:       #B5451B;
  --c-supply-light: #FDF0EC;

  --c-today-bg:     #FFFBCC;
  --c-today-border: #C9B800;
  --c-header:       #3B6CB7;

  --radius:  8px;
  --radius-sm: 5px;
  --shadow:  0 1px 3px rgba(0,0,0,0.09), 0 1px 2px rgba(0,0,0,0.06);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Wall-tablet-friendly base sizes — scale down on phone */
  --fs-event-title: 1rem;
  --fs-event-time:  0.82rem;
  --fs-day-name:    1rem;
  --fs-day-num:     1.4rem;
  --fs-row-label:   1rem;
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.app-header {
  background: var(--c-header);
  color: #fff;
  padding: 12px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.app-header__left {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.app-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.status-label {
  font-size: 0.78rem;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── View toggle ────────────────────────────────────────────────────────────── */
.view-toggle {
  display: flex;
  gap: 2px;
  background: rgba(0,0,0,0.25);
  border-radius: var(--radius);
  padding: 3px;
  flex-shrink: 0;
}

.view-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.8);
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.view-btn.active {
  background: #fff;
  color: var(--c-header);
}

.view-btn:hover:not(.active) {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.view-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Supply banner ───────────────────────────────────────────────────────────── */
.supply-banner {
  background: var(--c-supply-light);
  border-bottom: 3px solid var(--c-supply);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.supply-flag {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-supply);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Main view ───────────────────────────────────────────────────────────────── */
.main-view {
  flex: 1;
  padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  overflow: auto;
}

.loading {
  padding: 48px;
  text-align: center;
  color: var(--c-muted);
  font-size: 1.1rem;
}

/* ── Week grid ───────────────────────────────────────────────────────────────── */
.week-grid {
  display: grid;
  grid-template-columns: 72px repeat(7, minmax(0, 1fr));
  gap: 3px;
  min-width: 640px;
}

/* Corner cell */
.wg-corner { background: transparent; }

/* Day headers */
.wg-header {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 8px 6px 6px;
  text-align: center;
  line-height: 1.2;
}

.wg-header.today {
  background: var(--c-today-bg);
  border-color: var(--c-today-border);
  border-width: 2px;
}

.wg-dayname {
  display: block;
  font-size: var(--fs-day-name);
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wg-daynum {
  display: block;
  font-size: var(--fs-day-num);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1;
}

.wg-month {
  display: block;
  font-size: 0.72rem;
  color: var(--c-muted);
  margin-top: 1px;
}

.wg-header.today .wg-daynum {
  color: var(--c-header);
}

/* Row labels */
.wg-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: var(--fs-row-label);
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
}

.wg-label--ezra   { color: var(--c-ezra); }
.wg-label--hazel  { color: var(--c-hazel); }
.wg-label--family { color: var(--c-family); }

/* Day cells */
.wg-cell {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 4px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wg-cell.today {
  background: var(--c-today-bg);
  border-color: var(--c-today-border);
}

/* ── Event cards ─────────────────────────────────────────────────────────────── */
.event {
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 3px solid transparent;
}

.event--ezra   { background: var(--c-ezra-light);   border-left-color: var(--c-ezra); }
.event--hazel  { background: var(--c-hazel-light);  border-left-color: var(--c-hazel); }
.event--school { background: var(--c-school-light); border-left-color: var(--c-school); }
.event--master { background: var(--c-family-light); border-left-color: var(--c-family); }
.event--supply { background: var(--c-supply-light); border-left-color: var(--c-supply); }

.event-time {
  display: block;
  font-size: var(--fs-event-time);
  font-weight: 600;
  color: var(--c-muted);
  line-height: 1;
}

.event-title {
  display: block;
  font-size: var(--fs-event-title);
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.25;
  word-break: break-word;
}

.event-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--c-muted);
  line-height: 1.3;
  margin-top: 2px;
  word-break: break-word;
}

/* ── Today view ──────────────────────────────────────────────────────────────── */
.today-view {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1100px;
}

.today-date {
  grid-column: 1 / -1;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: -4px;
}

.today-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.today-card__name {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--c-border);
  margin-bottom: 4px;
}

.today-card--ezra   .today-card__name { color: var(--c-ezra);   border-color: var(--c-ezra); }
.today-card--hazel  .today-card__name { color: var(--c-hazel);  border-color: var(--c-hazel); }
.today-card--family .today-card__name { color: var(--c-family); border-color: var(--c-family); }

.today-card .event { padding: 8px 10px; }

.today-card .event-title { font-size: 1.05rem; }
.today-card .event-time  { font-size: 0.88rem; }
.today-card .event-desc  { font-size: 0.85rem; }

.today-empty {
  color: var(--c-muted);
  font-size: 0.95rem;
  padding: 8px 0;
}

/* ── Wall-tablet / large screen ──────────────────────────────────────────────── */
@media (min-width: 1024px) {
  :root {
    --fs-event-title: 1.05rem;
    --fs-event-time:  0.88rem;
    --fs-day-name:    1.05rem;
    --fs-day-num:     1.6rem;
    --fs-row-label:   1.05rem;
  }

  .app-title { font-size: 1.5rem; }

  .main-view { padding: 16px; }

  .wg-cell { min-height: 100px; padding: 6px; gap: 4px; }

  .event { padding: 5px 8px; gap: 2px; }
}

@media (min-width: 1400px) {
  :root {
    --fs-event-title: 1.15rem;
    --fs-event-time:  0.9rem;
    --fs-day-num:     1.8rem;
  }

  .wg-cell { min-height: 120px; }
  .week-grid { gap: 4px; }
}

/* ── Phone ───────────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  :root {
    --fs-event-title: 0.92rem;
    --fs-event-time:  0.76rem;
  }

  .app-header { padding: 10px 12px; }
  .app-title  { font-size: 1.1rem; }

  .main-view {
    padding: 8px;
    overflow-x: auto;
  }

  /* Week grid scrolls horizontally on phone */
  .week-grid { min-width: 700px; }

  .today-view { gap: 10px; }
  .today-card { padding: 12px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .view-btn { transition: none; }
}

/* ── Focus styles ────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--c-ezra);
  outline-offset: 2px;
  border-radius: 3px;
}