/* Bloom Academy — Main stylesheet */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: contain;
  min-height: 100vh;
  /* Mobile-safety: never let the page itself scroll sideways.
     Any genuinely wide content (data tables) lives in its own
     overflow-x: auto card and scrolls internally.
     Use `clip` not `hidden` — `hidden` turns body into a scroll container,
     which breaks mouse-wheel + arrow-key vertical scrolling. `clip` just
     trims overflow without creating a scroll context. */
  overflow-x: clip;
}
html { overflow-x: clip; }

h1, h2, h3, h4, h5 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--color-text-primary);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
  font-weight: 500;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

p { margin: 0; }
a { color: var(--color-depth); text-decoration: none; }
a:hover { color: var(--color-accent); }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text-primary);
}

/* --- App shell layout --- */
#app { min-height: 100vh; }

.app-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; gap: 14px; color: var(--color-text-secondary);
  font-family: 'Cormorant Garamond', serif; font-size: 1.125rem;
}
.bloom-mark { animation: bloom-breath 2.4s ease-in-out infinite; }

.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}
/* Grid items default to min-width: auto, which lets intrinsically-wide
   children (horizontal-scroll strips, wide tables) push the grid column
   beyond viewport. Force every direct child to respect its column. */
.app-shell > * { min-width: 0; }
@media (min-width: 1024px) {
  .app-shell {
    grid-template-columns: 248px 1fr;
  }
}

/* --- Sidebar (desktop) --- */
.sidebar {
  display: none;
  flex-direction: column;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  height: 100vh;
  position: sticky; top: 0; left: 0;
  padding: 22px 14px 24px;
  overflow-y: auto;
}
@media (min-width: 1024px) { .sidebar { display: flex; } }

.sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 22px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; color: var(--color-text-primary);
  font-weight: 600;
}
.sidebar__brand .brand-mark {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary);
  display: grid; place-items: center;
  color: var(--color-depth); font-weight: 600;
}

.sidebar__group { margin: 14px 0 6px; padding: 0 10px;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted);
}

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; margin: 2px 0;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  font-weight: 400;
  transition: background 150ms ease-out, color 150ms ease-out;
  width: 100%;
  text-align: left;
}
.nav-item:hover { background: var(--color-surface-3); color: var(--color-text-primary); }
.nav-item.active {
  background: var(--color-primary);
  color: var(--color-text-primary);
  font-weight: 500;
}
.nav-item .lucide { width: 18px; height: 18px; stroke-width: 1.5; }

/* --- Top bar (mobile) --- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 30;
  padding-top: max(14px, env(safe-area-inset-top));
}
.topbar__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em;
}
.topbar__actions { display: flex; gap: 8px; align-items: center; }
@media (min-width: 1024px) { .topbar { display: none; } }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  transition: background 150ms ease-out;
}
.icon-btn:hover { background: var(--color-surface-3); color: var(--color-text-primary); }
.icon-btn .lucide { width: 20px; height: 20px; stroke-width: 1.5; }

/* --- Bottom nav (mobile) --- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex; justify-content: space-around;
  padding: 8px 4px max(8px, env(safe-area-inset-bottom));
  z-index: 50;
}
@media (min-width: 1024px) { .bottom-nav { display: none; } }
.bottom-nav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px;
  color: var(--color-text-muted);
  font-size: 0.6875rem; font-weight: 400;
  border-radius: var(--radius-md);
  transition: color 150ms ease-out, transform 150ms ease-out;
  min-height: 44px;
}
.bottom-nav__item .lucide { width: 22px; height: 22px; stroke-width: 1.5; }
.bottom-nav__item.active { color: var(--color-accent); }
.bottom-nav__item.active .lucide { transform: scale(1.08); }

/* --- Main content --- */
.main {
  padding: 4px 18px calc(96px + env(safe-area-inset-bottom)) 18px;
  width: 100%;
  max-width: 100%;
  min-width: 0; /* allow shrink inside the app-shell grid */
  min-height: 100vh;
  /* Final defence: even if a page leaks an oversized element, the page
     itself never extends past its column width — iOS Safari is fussy about
     clipping at the body level, so we also clip here. `clip` (not `hidden`)
     does not create a scroll context, so vertical scrolling stays intact. */
  overflow-x: clip;
}
/* Same containment for the page root that every page module returns. */
.anim-fade { min-width: 0; max-width: 100%; }
@media (min-width: 1024px) {
  /* Centered with a small buffer on either side — wide enough that the
     dashboard, calendar, and other pages read comfortably without feeling
     squished, but not so wide that content stretches across a 4K monitor.
     `width: 100%` is critical: without it, the flex-column parent + auto
     margins make .main shrink to its content width, which is why pages
     with sparse content (calendar, empty states) looked squished while
     pages with dense data filled out. Now every page renders at the
     identical 1500px (or column-width, whichever is smaller). */
  .main { padding: 30px 36px 40px; width: 100%; max-width: 1500px; margin-inline: auto; }
}

/* Page header sits at .main's top-left, identical positioning on every
   page so the title is always anchored to the same spot. align-items:
   flex-start keeps the title at the natural top edge of the row instead
   of bottom-aligning with the action button. */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin: 0 0 20px;
  gap: 12px;
}
.page-header__title { font-size: 1.75rem; line-height: 1.2; }
.page-header__subtitle { color: var(--color-text-secondary); font-size: 0.9375rem; margin-top: 4px; }

/* On mobile the topbar already shows the page title — hide the in-page heading
   so it doesn't appear twice. Subtitle + actions stay visible. */
@media (max-width: 1023px) {
  .page-header__title { display: none; }
  .page-header { margin: 0 0 14px; align-items: center; }
}

@media (min-width: 1024px) {
  /* Match the dashboard greeting in size + spacing so titles read
     identically across every page. */
  .page-header { margin: 0 0 20px; }
  .page-header__title { font-size: 2.5rem; letter-spacing: -0.01em; }
}

/* --- Cards --- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.card--padded { padding: 22px; }
.card--flat { box-shadow: none; }
.card--soft { background: var(--color-surface-2); }
.card--interactive { cursor: pointer; }
.card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.card__title { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 500; margin: 0 0 4px; }
.card__subtitle { color: var(--color-text-secondary); font-size: 0.875rem; }

.section { margin-bottom: 26px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px; }
.section__title { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 500; }
.section__link { font-size: 0.875rem; color: var(--color-depth); }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  font-size: 0.9375rem; font-weight: 500;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  transition: transform 100ms ease-out, background 150ms ease-out, box-shadow 150ms ease-out;
  min-height: 44px;
}
.btn:hover { background: var(--color-surface-3); }
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--color-accent); color: #fff; border-color: var(--color-accent);
  box-shadow: 0 2px 6px rgba(216,167,160,0.25);
}
.btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.btn--ghost {
  background: transparent; border-color: transparent; color: var(--color-text-secondary);
}
.btn--ghost:hover { background: var(--color-surface-3); color: var(--color-text-primary); }

.btn--danger { color: var(--color-danger); }
.btn--block { width: 100%; }
.btn--sm { padding: 6px 12px; font-size: 0.8125rem; min-height: 32px; }
.btn--icon { width: 40px; padding: 0; }
.btn .lucide { width: 18px; height: 18px; stroke-width: 1.5; }

/* --- Form controls --- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field__label { font-size: 0.8125rem; color: var(--color-text-secondary); font-weight: 500; letter-spacing: 0.01em; }
.field__hint { font-size: 0.75rem; color: var(--color-text-muted); }
.field__row { display: flex; gap: 10px; }
.field__row > * { flex: 1; min-width: 0; }
/* On narrow phones two side-by-side inputs (especially date pickers, which
   have a min-content width from the native widget) can push the page off
   screen — stack them instead. */
@media (max-width: 480px) {
  .field__row { flex-direction: column; }
}

.input, .textarea, .select {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
  min-height: 44px;
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(216,167,160,0.2);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238B817C' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* --- Badges --- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem; font-weight: 500;
  background: var(--color-surface-3);
  /* Use primary text colour so chips read clearly against pale chip backgrounds. */
  color: var(--color-text-primary);
  white-space: nowrap;
}
.badge--dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dot-color, currentColor);
}
.badge--success { background: rgba(126,146,127,0.22); color: #4d6450; }
.badge--warning { background: rgba(193,154,76,0.22); color: #7a5a23; }
.badge--danger  { background: rgba(176,98,90,0.20); color: #864740; }
.badge--info    { background: rgba(91,122,153,0.18); color: #3f5773; }

.color-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}

/* --- Avatars --- */
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 500; font-size: 0.9375rem;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.avatar--sm { width: 28px; height: 28px; font-size: 0.75rem; }
.avatar--lg { width: 72px; height: 72px; font-size: 1.5rem; }
.avatar--xl { width: 104px; height: 104px; font-size: 2rem; }

/* --- Stat card --- */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.stat-card__label { font-size: 0.75rem; color: var(--color-text-secondary); margin-bottom: 6px; }
.stat-card__value { font-family: 'Nunito', system-ui, sans-serif; font-size: 1.75rem; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat-card__hint { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 4px; }

/* --- Progress bar --- */
.progress {
  height: 6px;
  background: var(--color-surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  background: var(--color-depth);
  border-radius: inherit;
  transition: width 600ms ease-out;
}
.progress--accent .progress__fill { background: var(--color-accent); }

/* --- Empty state ---
   Wrapped to feel like a substantial panel so a page with no data yet doesn't
   visually collapse to a narrow centered block while data-filled pages fill
   the full content width. */
.empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.empty__illustration { margin: 0 auto 18px; opacity: 0.75; }
.empty__title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--color-text-primary); margin-bottom: 8px; }
.empty__subtext { font-size: 0.9375rem; max-width: 480px; margin: 0 auto 20px; line-height: 1.55; }

/* --- FAB --- */
.fab {
  position: fixed; bottom: calc(80px + env(safe-area-inset-bottom)); right: 18px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-accent); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  transition: transform 200ms ease-out, background 150ms ease-out;
  z-index: 40;
}
.fab:hover { background: var(--color-accent-hover); }
.fab:active { transform: scale(0.95); }
.fab.is-open { transform: rotate(45deg); }
.fab .lucide { width: 26px; height: 26px; stroke-width: 1.5; }
@media (min-width: 1024px) { .fab { bottom: 28px; right: 28px; } }

.fab-sheet {
  position: fixed; bottom: calc(150px + env(safe-area-inset-bottom)); right: 18px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 39;
  align-items: flex-end;
}
@media (min-width: 1024px) { .fab-sheet { bottom: 100px; right: 28px; } }
.fab-sheet button {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: 0.875rem;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
}
.fab-sheet button .lucide { width: 16px; height: 16px; }

/* --- Toast --- */
#toast-region {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
  z-index: 100;
  padding: 0 18px;
}
@media (min-width: 1024px) {
  #toast-region { left: auto; right: 28px; bottom: 28px; align-items: flex-end; }
}
.toast {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  display: flex; align-items: center; gap: 10px;
  max-width: 360px;
  pointer-events: auto;
}
.toast--success { border-left: 3px solid var(--color-secondary); }
.toast--info    { border-left: 3px solid var(--color-info); }
.toast--warning { border-left: 3px solid var(--color-warning); }
.toast--error   { border-left: 3px solid var(--color-danger); }
.toast--celebrate { border-left: 3px solid var(--color-accent); background: linear-gradient(120deg, var(--color-surface), var(--color-primary) 200%); }

/* --- Modal --- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(40, 30, 30, 0.35);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 720px) { .modal-backdrop { align-items: center; } }

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 720px) {
  .modal { border-radius: var(--radius-xl); margin: 24px; }
}

.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border);
}
.modal__title { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 500; }
.modal__body { padding: 22px; overflow-y: auto; }
.modal__footer {
  padding: 14px 22px;
  border-top: 1px solid var(--color-border);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* --- Update banner (new version available) --- */
#update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: var(--color-accent);
  color: #fff; font-size: 14px; font-family: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#update-banner button {
  flex-shrink: 0; padding: 6px 14px;
  border: 2px solid rgba(255,255,255,0.7); border-radius: 6px;
  background: transparent; color: #fff; font-size: 13px;
  font-weight: 500; cursor: pointer; white-space: nowrap;
}
#update-banner button:hover { background: rgba(255,255,255,0.15); }

/* --- Offline bar --- */
.offline-bar {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--color-secondary);
  color: var(--color-text-primary);
  padding: 6px 14px;
  font-size: 0.8125rem;
  text-align: center;
  z-index: 300;
}

/* --- Tag pill (status, priority) --- */
.pill-group { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 150ms ease-out;
  min-height: 36px;
  display: inline-flex; align-items: center;
}
.pill:hover { border-color: var(--color-depth); color: var(--color-text-primary); }
.pill.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-primary); }

/* Checkbox */
.check {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--color-border-strong);
  display: inline-grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms ease-out, border-color 150ms ease-out;
  background: var(--color-surface);
}
.check.is-checked {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}
.check.is-checked::after {
  content: '';
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.check:focus-visible, .toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Toggle */
.toggle {
  width: 44px; height: 26px; border-radius: 999px;
  background: var(--color-surface-3); border: 1px solid var(--color-border-strong);
  position: relative; cursor: pointer; transition: background 150ms ease-out;
}
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm);
  transition: transform 200ms ease-out;
}
.toggle.is-on { background: var(--color-secondary); border-color: var(--color-secondary); }
.toggle.is-on::after { transform: translateX(18px); }

/* Onboarding-specific */
.onboard {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 18px; background: var(--color-background);
}
.onboard__card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 480px;
  padding: 28px 24px;
}
.onboard__steps {
  display: flex; gap: 6px; margin-bottom: 18px;
}
.onboard__step-dot {
  flex: 1; height: 4px; border-radius: 4px;
  background: var(--color-border);
}
.onboard__step-dot.active { background: var(--color-accent); }
.onboard__step-dot.done { background: var(--color-secondary); }

.theme-swatch {
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  padding: 14px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--color-surface);
  transition: border-color 150ms ease-out, transform 150ms ease-out;
}
.theme-swatch:hover { transform: translateY(-2px); }
.theme-swatch.active { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(216,167,160,0.2); }
.theme-swatch__row { display: flex; gap: 4px; }
.theme-swatch__row span { width: 22px; height: 22px; border-radius: 6px; }
.theme-swatch__name { font-weight: 500; }

.color-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px;
}
.color-grid__swatch {
  aspect-ratio: 1; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent;
  transition: transform 150ms ease-out;
}
.color-grid__swatch.active { border-color: var(--color-text-primary); transform: scale(1.1); }

/* --- Dashboard widgets --- */
.greeting { font-size: 2rem; font-family: 'Cormorant Garamond', serif; font-weight: 500; letter-spacing: -0.01em; }
.greeting__meta { color: var(--color-text-secondary); font-size: 0.9375rem; }
@media (min-width: 1024px) { .greeting { font-size: 2.5rem; } }

/* Year progress strip (under greeting) */
.year-progress { margin-top: 12px; max-width: 520px; }
.year-progress__track {
  height: 6px;
  background: var(--color-surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.year-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  border-radius: inherit;
  transition: width 700ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.year-progress__meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* This week at a glance — donut + subject mix */
.glance-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
}
@media (min-width: 640px) {
  .glance-grid { grid-template-columns: auto 1fr; gap: 28px; }
}
.glance-donut {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  text-align: center;
}
.glance-donut svg { display: block; }
.glance-donut__caption {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  max-width: 180px;
  line-height: 1.45;
}
.glance-mix { min-width: 0; }
.glance-mix__title {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.glance-mix__empty {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  padding: 8px 0;
}
.glance-bar {
  display: grid;
  grid-template-columns: minmax(70px, 110px) 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.glance-bar:last-child { margin-bottom: 0; }
.glance-bar__name {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.glance-bar__track {
  height: 10px;
  background: var(--color-surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.glance-bar__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 700ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.glance-bar__value {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
}

.dash-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 1024px) { .dash-grid { grid-template-columns: 2fr 1fr; gap: 18px; } }

/* Today + Coming up side-by-side pair */
.dash-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 900px) {
  .dash-pair { grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
}
.dash-pair__col { min-width: 0; }
.dash-pair__col .section__head { margin: 0 0 12px; }

.week-mini {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  overflow-x: auto;
}
.week-mini.has-weekends { grid-template-columns: repeat(7, 1fr); }
.week-mini__day {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 4px;
  text-align: center;
  cursor: pointer;
  min-width: 50px;
  transition: transform 150ms ease-out;
}
.week-mini__day:hover { transform: translateY(-2px); }
.week-mini__day.today { background: var(--color-primary); border-color: var(--color-primary); }
.week-mini__dow { font-size: 0.6875rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.week-mini__date { font-family: 'Nunito', system-ui, sans-serif; font-size: 1.125rem; margin: 4px 0; }
.week-mini__dots { display: flex; justify-content: center; gap: 2px; flex-wrap: wrap; }
.week-mini__dots span { width: 6px; height: 6px; border-radius: 50%; }
.week-mini__count { font-size: 0.6875rem; color: var(--color-text-secondary); margin-top: 4px; }

/* Lesson card */
.lesson-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-depth);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
  transition: transform 150ms ease-out, opacity 200ms ease-out;
}
.lesson-card.is-complete { opacity: 0.6; }
.lesson-card.is-complete .lesson-card__title { text-decoration: line-through; }
.lesson-card__body { flex: 1; min-width: 0; }
.lesson-card__title { font-weight: 500; font-size: 0.9375rem; }
.lesson-card__meta { font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Week grid (lesson planner) */
.week-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 767px) { .week-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) {
  /* minmax(0, 1fr) so day columns can shrink below their content's
     intrinsic width — plain 1fr lets long lesson titles push Friday and
     Saturday off the right edge. */
  .week-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .week-grid.has-weekends { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.day-col {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px;
  min-height: 200px;
  min-width: 0;
  display: flex; flex-direction: column;
}
.day-col.today { border-color: var(--color-accent); }
.day-col__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.day-col__title { font-size: 0.8125rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.day-col__date { font-family: 'Nunito', system-ui, sans-serif; font-size: 1rem; }

/* Calendar month grid */
.cal-grid {
  display: grid;
  /* minmax(0, 1fr) keeps every column equal width even when inner text is long */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-surface);
  width: 100%;
  margin-top: 12px;
}
.cal-dow {
  text-align: center; padding: 8px 4px;
  font-size: 0.75rem; color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.cal-day {
  min-height: 92px; padding: 6px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.8125rem;
  cursor: pointer;
  position: relative;
  transition: background 150ms ease-out;
  min-width: 0;
}
.cal-day:hover { background: var(--color-surface-2); }
.cal-day.out-of-month { color: var(--color-text-muted); background: var(--color-surface-2); }
.cal-day.today .cal-day__num { background: var(--color-accent); color: #fff; }
.cal-day__num {
  display: inline-block;
  width: 24px; height: 24px;
  border-radius: 50%;
  text-align: center; line-height: 24px;
  font-family: 'Nunito', system-ui, sans-serif;
}
.cal-day__events { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-day__event {
  font-size: 0.6875rem;
  padding: 2px 6px;
  border-radius: 4px;
  /* Wrap long event titles onto a new line and stack vertically — column width stays fixed */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
  background: var(--color-surface-3);
  color: var(--color-text-primary);
}
@media (min-width: 1024px) {
  .cal-day { min-height: 128px; padding: 10px; font-size: 0.875rem; }
}

/* Tabs / segmented control —
   On desktop the tabs sit in a single pill row. On mobile and tablet
   they wrap onto multiple lines instead of relying on horizontal scroll —
   mobile browsers hide scrollbars by default, so a 10-tab strip (Budget,
   Resources) just looks like the right-hand tabs are cut off the page.
   Wrapping keeps every tab visible without any scrolling. */
.segmented {
  display: flex;
  flex-wrap: wrap;
  background: var(--color-surface-3);
  border-radius: var(--radius-lg);
  padding: 4px;
  width: 100%;
  min-width: 0;
  gap: 2px;
}
.segmented__btn {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  transition: background 150ms ease-out, color 150ms ease-out;
  min-height: 36px;
  white-space: nowrap;
}
.segmented__btn.active { background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-sm); }
@media (max-width: 600px) {
  .segmented__btn { padding: 6px 12px; font-size: 0.8125rem; min-height: 32px; }
}
@media (min-width: 1024px) {
  /* On wide screens the tabs comfortably fit in a single pill row again. */
  .segmented { flex-wrap: nowrap; border-radius: var(--radius-pill); }
}

/* Date nav */
.date-nav { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; }
.date-nav__label { flex: 1; text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; }

/* Student row */
.student-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: 8px;
}
.student-row__body { flex: 1; min-width: 0; }
.student-row__name { font-weight: 500; }
.student-row__meta { font-size: 0.8125rem; color: var(--color-text-secondary); }

/* Inline saved indicator */
.saved-indicator {
  font-size: 0.75rem; color: var(--color-text-muted);
  opacity: 0; transition: opacity 200ms ease-out;
}
.saved-indicator.visible { opacity: 1; }

/* Card grid — minmax(0, 1fr) so columns can shrink below their content's
   intrinsic min-width. Plain `1fr` lets a wide unbreakable child push the
   column wider than its share, which on narrow viewports overflows the
   page (Resources cards with long URLs were the worst offender). */
.grid-2 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.grid-3 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Subject color helpers */
.subject-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Visually hidden */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap; }

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--color-accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  z-index: 1000;
  transform: translateY(-200%);
  transition: transform 150ms ease-out;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* Focus rings */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbar polish */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* Print */
@media print {
  .sidebar, .bottom-nav, .topbar, .fab, .fab-sheet, #toast-region, .offline-bar { display: none !important; }
  body, .main { background: #fff !important; color: #000 !important; }
  .card { box-shadow: none !important; border-color: #ccc !important; }
}