/* Homeschool Pro — Main stylesheet */

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

body {
  font-family: var(--font-body);
  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: var(--font-display);
  color: var(--color-text-primary);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
  font-weight: var(--heading-weight);
}

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(--link); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

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: var(--font-display); font-size: 1.125rem;
}
.brand-loader { animation: breathe 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(--sidebar-bg);
  border-right: 1px solid var(--sidebar-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: var(--font-display);
  font-size: 1.375rem; color: var(--sidebar-active-ink);
  font-weight: 700; white-space: nowrap; letter-spacing: -0.01em;
}
.sidebar__brand .brand-mark {
  width: 36px; height: 36px; border-radius: var(--brand-radius, 50%);
  background: var(--brand-bg);
  display: grid; place-items: center;
  color: var(--brand-ink); font-weight: 700; font-size: 1.2rem; flex-shrink: 0;
  box-shadow: var(--btn-primary-shadow);
}

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

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; margin: 2px 0;
  border-radius: var(--radius-md);
  color: var(--sidebar-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background 150ms ease-out, color 150ms ease-out;
  width: 100%;
  text-align: left;
}
.nav-item:hover { background: var(--color-surface-3); color: var(--sidebar-active-ink); }
.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-ink);
  font-weight: 600;
  box-shadow: var(--sidebar-active-shadow);
}
.nav-item.active .lucide { color: var(--color-accent-text); stroke-width: 2; }
html[data-theme="pro"] .nav-item.active .lucide { color: #FF8A72; }
html[data-theme="pro"] .nav-item:hover { background: rgba(255,255,255,0.06); color: #FFFFFF; }
html[data-theme="midnight"] .nav-item.active .lucide { color: var(--color-accent); }
.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(--topbar-bg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  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: var(--font-display);
  font-size: 1.6rem; font-weight: var(--heading-weight); letter-spacing: -0.015em;
}
.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);
  box-shadow: 0 -6px 20px rgba(40,30,35,0.06);
  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: 600;
  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-text); }
.bottom-nav__item.active .lucide {
  box-sizing: content-box; padding: 3px 14px; border-radius: 999px;
  background: var(--color-primary); stroke-width: 2;
}

/* --- 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; font-weight: var(--heading-weight); }
.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: var(--font-display); font-size: 1.3rem; font-weight: var(--heading-weight); 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: var(--font-display); font-size: 1.45rem; font-weight: var(--heading-weight); letter-spacing: -0.01em; }
.section__link { font-size: 0.875rem; color: var(--link); font-weight: 600; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  font-size: 0.9375rem; font-weight: 600;
  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(--btn-primary-bg); color: var(--btn-primary-ink); border-color: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
}
.btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
html[data-theme="pro"] .btn--primary:hover { background: #24305A; border-color: #24305A; }

.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 var(--color-primary);
}
.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: 600;
  background: var(--color-surface-3);
  color: var(--chip-ink);
  white-space: nowrap;
}
.badge--dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dot-color, currentColor);
}
.badge--success { background: var(--pal-leaf-soft); color: #3F6046; }
.badge--warning { background: var(--pal-apricot-soft); color: #66513F; }
.badge--danger  { background: var(--pal-rose-soft); color: #7E3F45; }
.badge--info    { background: var(--pal-sky-soft); color: #3D6460; }

.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: 700; font-size: 0.9375rem;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.avatar--sm { width: 30px; height: 30px; 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: 14px;
}
@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: 18px;
  box-shadow: var(--shadow-sm);
}
.stat-card--icon {
  display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-content: start;
}
.stat-card--icon > :not(.stat-card__icon) { grid-column: 2; }
.stat-card__icon {
  grid-column: 1; grid-row: 1 / span 3; align-self: start;
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--tone-soft, var(--color-primary)); color: var(--tone, var(--color-accent));
}
.stat-card__icon .lucide { width: 22px; height: 22px; stroke-width: 2; }
html[data-theme="pro"] .stat-card__icon { background: var(--tone); color: #FFFFFF; box-shadow: 0 6px 14px rgba(20,26,46,0.14); }
.tone-rose  { --tone: var(--pal-rose);  --tone-soft: var(--pal-rose-soft); }
.tone-leaf  { --tone: var(--pal-leaf);  --tone-soft: var(--pal-leaf-soft); }
.tone-sky   { --tone: var(--pal-sky);   --tone-soft: var(--pal-sky-soft); }
.tone-plum  { --tone: var(--pal-lavender); --tone-soft: var(--pal-lavender-soft); }
.tone-amber { --tone: var(--pal-apricot); --tone-soft: var(--pal-apricot-soft); }
@media (max-width: 480px) {
  .stat-card--icon { grid-template-columns: 1fr; }
  .stat-card--icon > :not(.stat-card__icon) { grid-column: 1; }
  .stat-card__icon { grid-row: auto; width: 38px; height: 38px; border-radius: 12px; margin-bottom: 10px; }
}
.stat-card__label { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 4px; }
.stat-card__value { font-family: var(--font-num); font-size: 2.1rem; font-weight: 700; line-height: 1.15; color: var(--color-text-primary); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-card__hint { font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: 4px; }

/* --- Progress bar --- */
.progress {
  height: 8px;
  background: var(--color-surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  background: var(--color-secondary);
  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.85; color: var(--color-depth); }
.empty__title { font-family: var(--font-display); 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(--fab-bg); color: var(--btn-primary-ink);
  display: grid; place-items: center;
  box-shadow: var(--fab-shadow);
  transition: transform 200ms ease-out, background 150ms ease-out;
  z-index: 40;
}
.fab:hover { filter: brightness(1.05); }
.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.modal--lg { max-width: 880px; }

.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: var(--font-display); 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-accent); color: var(--color-text-primary); font-weight: 600; }

/* Checkbox */
.check {
  width: 24px; height: 24px;
  border-radius: 8px;
  border: 2px 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(--check-on);
  border-color: var(--check-on);
}
.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(--check-on); border-color: var(--check-on); }
.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 var(--color-primary); }
.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: 2.1rem; font-family: var(--font-display); font-weight: var(--heading-weight); letter-spacing: -0.02em; color: var(--hero-ink); }
.greeting__meta { color: var(--hero-sub); font-size: 0.9375rem; font-weight: 500; }
.hero {
  position: relative; overflow: hidden; background: var(--hero-bg);
  border: 1px solid var(--hero-border, transparent); border-radius: 22px; padding: 26px 30px 24px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; align-items: center;
}
.hero__text { min-width: 0; }
.hero__foot { grid-column: 1 / -1; min-width: 0; }
.hero__art { line-height: 0; }
.hero__art svg { width: 100%; height: auto; display: block; }
@media (min-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
}
@media (min-width: 1280px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); padding: 30px 40px 28px; }
}
/* Phones and tablets: the picture sits above the greeting, smaller. */
@media (max-width: 859px) {
  .hero__art { order: -1; width: min(240px, 72%); margin: -6px auto 6px; }
}
@media (max-width: 600px) { .hero { padding: 18px 18px 20px; border-radius: 18px; } }
/* Illustration colours (themes.css --art-*) */
.ha-sun { fill: var(--art-sun); }
.ha-shadow { fill: var(--art-ink); opacity: 0.08; }
.ha-b1 { fill: var(--art-2); } .ha-b2 { fill: var(--art-1); } .ha-b3 { fill: var(--art-3); }
.ha-page { fill: var(--art-4); }
.ha-band { fill: var(--art-4); opacity: 0.5; }
.ha-apple { fill: var(--art-1); }
.ha-shine { fill: #FFFFFF; opacity: 0.45; }
.ha-ink { fill: var(--art-ink); opacity: 0.7; }
.ha-leaf { fill: var(--art-2); } .ha-leaf2 { fill: var(--art-5); }
.ha-pot { fill: var(--art-5); }
.ha-cup { fill: var(--art-3); } .ha-cupband { fill: var(--art-1); opacity: 0.85; }
.ha-p1 { fill: var(--art-1); } .ha-p2 { fill: var(--art-2); } .ha-p3 { fill: var(--art-5); }
.ha-tip { fill: var(--art-4); stroke: var(--art-ink); stroke-opacity: 0.25; stroke-width: 0.8; }
.ha-spark { fill: var(--art-spark); } .ha-spark--soft { opacity: 0.6; }
/* Each child's day, under the year bar */
.hero-kids { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hero-kid {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; min-height: 40px;
  border-radius: var(--radius-pill); background: var(--hero-chip-bg); color: var(--hero-chip-ink);
  font-size: 0.875rem; border: 1px solid transparent; transition: border-color 150ms ease-out;
}
.hero-kid:hover, .hero-kid:focus-visible { border-color: var(--color-accent); }
.hero-kid__avatar { width: 30px; height: 30px; font-size: 0.75rem; }
.hero-kid__name { font-weight: 700; }
.hero-kid__count { color: var(--hero-chip-sub); font-size: 0.8125rem; }
.hero-kid.is-done .hero-kid__count, .hero-kid.is-done .hero-kid__short { color: var(--hero-chip-ink); font-weight: 600; }
.hero-kid__short { display: none; color: var(--hero-chip-sub); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .greeting { font-size: 1.75rem; line-height: 1.15; margin-bottom: 4px; }
  .hero__art { width: min(200px, 62%); }
  .hero-kids { gap: 6px; }
  .hero-kid { padding: 4px 10px 4px 4px; gap: 6px; }
  .hero-kid__count { display: none; }
  .hero-kid__short { display: inline; }
}
html[data-theme="pro"] .hero {
  border-radius: 22px; padding: 30px 34px 28px; margin-bottom: 26px !important;
  box-shadow: 0 16px 40px rgba(24,33,61,0.22);
}
html[data-theme="pro"] .hero::before {
  content: ''; position: absolute; right: -60px; top: -90px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,81,58,0.55) 0%, rgba(226,81,58,0) 70%); pointer-events: none;
}
html[data-theme="pro"] .hero::after {
  content: ''; position: absolute; right: 140px; bottom: -120px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,179,63,0.35) 0%, rgba(245,179,63,0) 70%); pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
@media (max-width: 600px) { html[data-theme="pro"] .hero { padding: 22px 20px; border-radius: 18px; } }
@media (min-width: 1024px) { .greeting { font-size: 2.5rem; } }

/* Year progress strip (under greeting) */
.year-progress { margin-top: 14px; max-width: 560px; }
.year-progress__track {
  height: 9px;
  background: var(--hero-track);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.year-progress__fill {
  height: 100%;
  background: var(--year-fill);
  border-radius: inherit;
  transition: width 700ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.year-progress__meta {
  font-size: 0.8125rem;
  color: var(--hero-sub);
  margin-top: 6px; font-weight: 500;
  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; font-weight: 700;
  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; font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.glance-bar__track {
  height: 12px;
  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: var(--font-num);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  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: 10px;
  overflow-x: auto; padding: 2px 2px 8px;
}
.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: 16px;
  padding: 14px 4px 12px;
  text-align: center;
  cursor: pointer;
  min-width: 50px;
  box-shadow: var(--shadow-sm);
  transition: transform 150ms ease-out;
}
.week-mini__day:hover { transform: translateY(-2px); }
.week-mini__day.today { background: var(--today-bg); border-color: transparent; color: var(--today-ink); box-shadow: var(--today-shadow); }
.week-mini__day.today .week-mini__dow,
.week-mini__day.today .week-mini__count { color: var(--today-ink); opacity: 0.88; }
.week-mini__day.today .week-mini__dots span { box-shadow: 0 0 0 1.5px var(--today-ink); }
.week-mini__dow { font-size: 0.6875rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.week-mini__date { font-family: var(--font-num); font-size: 1.5rem; font-weight: 700; margin: 2px 0 4px; }
.week-mini__dots { display: flex; justify-content: center; gap: 2px; flex-wrap: wrap; }
.week-mini__dots span { width: 8px; height: 8px; border-radius: 50%; }
.week-mini__count { font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 4px; font-weight: 500; }

/* Lesson card */
.lesson-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 5px 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: 600; font-size: 0.9375rem; }
.lesson-card__meta { font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Week grid (lesson planner) */
.week-grid {
  display: grid;
  gap: 12px;
  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: 16px;
  box-shadow: var(--shadow-sm);
  padding: 14px 12px;
  min-height: 200px;
  min-width: 0;
  display: flex; flex-direction: column;
}
.day-col.today { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-md); }
.day-col.today .day-col__title { color: var(--color-accent-text); }
.day-col.today .day-col__date { background: var(--color-accent); color: var(--btn-primary-ink); border-radius: 999px; padding: 0 9px; }
.day-col .lesson-card { background: var(--color-surface-2); border-color: transparent; text-align: left; }
/* Week view: seven narrow columns used to cut every title to ~9 letters. */
.day-col .lesson-card__title { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.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; font-weight: 700; }
.day-col__date { font-family: var(--font-num); font-size: 1.15rem; font-weight: 700; }

/* 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: var(--btn-primary-ink); }
.cal-day__num {
  display: inline-block;
  width: 24px; height: 24px;
  border-radius: 50%;
  text-align: center; line-height: 24px;
  font-family: var(--font-num);
}
.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: auto;
  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-accent-text); font-weight: 700; 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: var(--font-display); font-size: 1.4rem; font-weight: var(--heading-weight); }
@media (max-width: 600px) { .date-nav__label { font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
/* Phone: the per-child "Add lesson" / "Print" buttons collapse to icons -
   at 390px the Print button used to run off the edge of the card. The text
   stays available to screen readers (.btn__label is visually hidden). */
@media (max-width: 600px) {
  .btn--collapse { width: 38px; height: 38px; min-height: 38px; padding: 0; gap: 0; border-radius: 12px; background: var(--color-surface-3); }
  .btn--collapse .btn__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}

/* 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; }

/* --- Device sync (Settings card + its dialogs) --- */
.sync-lead { margin: 0 0 8px; }
.sync-note { font-size: 0.8125rem; color: var(--color-text-secondary); line-height: 1.55; margin: 8px 0; }
.sync-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.sync-actions--end { justify-content: flex-end; margin-bottom: 0; }
.sync-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: 0.875rem; background: var(--color-surface-3); color: var(--color-text-primary);
}
.sync-status--ok { background: var(--pal-leaf-soft); }
.sync-status--warn { background: var(--pal-apricot-soft); }
.sync-status .lucide { width: 14px; height: 14px; }
.sync-more { margin-top: 10px; border-top: 1px solid var(--color-border); padding-top: 10px; }
.sync-more summary { cursor: pointer; font-size: 0.875rem; color: var(--color-text-secondary); min-height: 32px; display: flex; align-items: center; }
.sync-step p { margin: 0 0 8px; }
.sync-code {
  font-family: var(--font-num); font-size: 2.5rem; font-weight: 700;
  letter-spacing: 0.12em; text-align: center; margin: 12px 0 4px !important;
  font-variant-numeric: tabular-nums; color: var(--color-text-primary);
}
.sync-code-input { font-size: 1.5rem; letter-spacing: 0.15em; text-align: center; font-variant-numeric: tabular-nums; margin-top: 6px; }
.sync-pics { display: flex; justify-content: center; gap: 22px; margin: 12px 0 14px !important; flex-wrap: wrap; }
.sync-pics > span { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; }
.sync-pic { font-size: 40px; line-height: 1; }
.sync-key {
  display: block; width: 100%; margin: 6px 0;
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 0.9375rem;
  line-height: 1.6; letter-spacing: 0.04em; word-break: break-all; text-align: left;
  padding: 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface-2); color: var(--color-text-primary);
}
button.sync-key { cursor: pointer; }
.sync-key-hidden { filter: blur(6px); user-select: none; }
.btn--primary.sync-danger { background: var(--color-danger); border-color: var(--color-danger); }

/* 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; }
}
html[data-theme="pro"] .sidebar__brand { font-size: 1.2rem; letter-spacing: -0.02em; }

/* Phone: the 7-day strip scrolls sideways rather than squeezing "8 lessons" onto two lines. */
@media (max-width: 480px) {
  .week-mini { gap: 8px; }
  .week-mini__day { min-width: 64px; padding: 10px 2px; }
  .week-mini__date { font-size: 1.3rem; }
  .week-mini__count { white-space: nowrap; font-size: 0.6875rem; }
}

/* --- Reschedule missed lessons (components/rescheduleDialog.js) --- */
.resched__kids { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.resched__kids .pill { gap: 6px; }
.resched__modes { display: grid; gap: 8px; margin: 6px 0 14px; }
.resched__mode {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
  padding: 12px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border-strong); background: var(--color-surface);
  color: var(--color-text-primary); line-height: 1.4;
}
.resched__mode.is-active { border-color: var(--color-accent); background: var(--color-primary); }
.resched__mode-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--color-surface-3); color: var(--color-accent-text);
}
.resched__mode.is-active .resched__mode-icon { background: var(--color-surface); }
.resched__mode-icon .lucide { width: 18px; height: 18px; }
.resched__mode-text { font-size: 0.8125rem; color: var(--color-text-secondary); }
.resched__preview { padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: 0.9rem; }
.resched__preview p { margin: 2px 0; }
.resched__warn { color: var(--color-accent-text); font-weight: 600; margin-top: 6px !important; }
.resched__footer { display: flex; justify-content: flex-end; gap: 8px; width: 100%; flex-wrap: wrap; }
.catchup {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 18px; border-radius: var(--radius-lg);
  background: var(--color-primary); border: 1px solid var(--color-border);
}
.catchup__text { flex: 1; min-width: 200px; font-size: 0.9375rem; }

/* --- High-school transcript (pages/transcript.js) --- */
.tx-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tx-areas { display: flex; flex-wrap: wrap; gap: 8px; }
.tx-area {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--area-soft); color: var(--color-text-primary); font-size: 0.8125rem; font-weight: 600;
}
.tx-area__dot, .tx-course__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--area); flex-shrink: 0; }
.tx-years { display: grid; gap: 14px; margin-bottom: 18px; }
@media (min-width: 960px) { .tx-years { grid-template-columns: 1fr 1fr; } }
.tx-year { padding: 14px 16px; min-width: 0; }
.tx-year__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.tx-year__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--heading-weight, 600); line-height: 1.2; }
.tx-year__meta { font-size: 0.8125rem; color: var(--color-text-secondary); text-align: right; }
.tx-year__head > div:first-child .tx-year__meta { text-align: left; }
.tx-year__empty { margin: 8px 0 0; font-size: 0.875rem; color: var(--color-text-muted); }
.tx-course {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 4px;
  border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0;
  background: none; text-align: left; color: var(--color-text-primary); font: inherit; cursor: pointer;
}
.tx-course:hover, .tx-course:focus-visible { background: var(--color-surface-2); }
.tx-course__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tx-course__title { font-weight: 600; font-size: 0.9375rem; overflow-wrap: anywhere; }
.tx-course__lvl { margin-left: 6px; padding: 1px 7px; font-size: 0.6875rem; vertical-align: 1px; }
.tx-course__meta { font-size: 0.75rem; color: var(--color-text-secondary); }
.tx-course__grade { font-family: var(--font-num); font-weight: 700; font-size: 1rem; min-width: 2.4em; text-align: right; }
.tx-course__grade.is-ip { font-weight: 500; font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; }
.tx-test { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 0.9375rem; }
.tx-test__meta { color: var(--color-text-secondary); font-size: 0.875rem; }
.tx-detail { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--color-border); font-size: 0.9375rem; }
.tx-detail__k { width: 130px; flex-shrink: 0; color: var(--color-text-secondary); font-size: 0.875rem; }
.tx-pick { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; }
.tx-pick__row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.tx-pick__row input { margin-top: 4px; }
.tx-toggles { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; font-size: 0.875rem; }
.tx-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.tx-preview { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; padding: 18px; overflow-x: auto; }

/* The document itself: fixed print colours, never the theme, so Midnight
   prints black on white like everything else. */
.tx-doc { color: #1f1f1f; font: 9pt/1.3 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; min-width: 560px; }
.tx-doc * { box-sizing: border-box; }
.tx-doc table { width: 100%; border-collapse: collapse; }
.tx-doc .n { text-align: right; white-space: nowrap; }
.tx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 8px; border-bottom: 2px solid #4E6B54; }
.tx-school { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20pt; font-weight: 600; line-height: 1.1; }
.tx-addr { color: #555; font-size: 8.5pt; }
.tx-title { font-size: 8.5pt; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #4E6B54; text-align: right; }
.tx-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 14px; margin: 8px 0; }
.tx-info dt { font-size: 7pt; text-transform: uppercase; letter-spacing: 0.06em; color: #666; }
.tx-info dd { margin: 0; font-weight: 600; border-bottom: 1px solid #ddd; min-height: 1.3em; }
.tx-statement { margin: 4px 0 8px; font-size: 8.5pt; color: #444; }
.tx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.tx-yr { break-inside: avoid; }
.tx-yr h3 { margin: 6px 0 2px; font: 700 9.5pt/1.3 'DM Sans', system-ui, sans-serif; color: #2f4733; }
.tx-yr h3 span { font-weight: 500; color: #666; margin-left: 4px; }
.tx-yr th { font-size: 7pt; text-transform: uppercase; letter-spacing: 0.05em; color: #666; text-align: left; border-bottom: 1px solid #999; padding: 2px 3px; }
.tx-yr th.n { text-align: right; }
.tx-yr td { padding: 1.5px 3px; border-bottom: 1px solid #e6e6e6; }
.tx-yr tfoot td { border-bottom: 0; border-top: 1px solid #999; font-size: 8pt; color: #444; padding-top: 3px; }
.tx-none { color: #888; font-style: italic; }
.tx-yr .tx-sub { font-size: 7.5pt; font-weight: 700; color: #4E6B54; padding-top: 5px; border-bottom: 1px solid #999; }
.tx-yr tfoot tr + tr td { border-top: 0; padding-top: 0; }
.tx-lvl { font-size: 7pt; font-weight: 700; color: #4E6B54; border: 1px solid #9fb3a3; border-radius: 3px; padding: 0 3px; }
.tx-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; break-inside: avoid; }
.tx-block h4 { margin: 8px 0 3px; font: 700 7.5pt/1.3 'DM Sans', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: #4E6B54; }
.tx-small td { padding: 1.5px 3px; border-bottom: 1px solid #e6e6e6; }
.tx-cum strong { font-size: 11pt; }
.tx-acts { margin: 0; }
.tx-key { margin: 10px 0 0; font-size: 7.5pt; color: #555; }
.tx-sign { margin-top: 14px; break-inside: avoid; }
.tx-sign p { margin: 0 0 22px; font-size: 8.5pt; }
.tx-sign__row { display: flex; gap: 24px; font-size: 7.5pt; color: #555; }
.tx-sign__row > div { flex: 1; }
.tx-sign__row .tx-sign__date { flex: 0 0 140px; }
.tx-sign__row span { display: block; border-bottom: 1px solid #1f1f1f; height: 1px; margin-bottom: 3px; }
.tx-desc { break-before: page; page-break-before: always; padding-top: 4px; }
.tx-preview .tx-desc { margin-top: 26px; padding-top: 18px; border-top: 1px dashed #bbb; }
.tx-desc__head { padding-bottom: 6px; border-bottom: 2px solid #4E6B54; margin-bottom: 4px; }
.tx-desc h3 { margin: 10px 0 2px; font: 700 9.5pt/1.3 'DM Sans', system-ui, sans-serif; color: #2f4733; }
.tx-course-desc { padding: 5px 0; border-bottom: 1px solid #e6e6e6; break-inside: avoid; }
.tx-course-desc__t { font-weight: 700; }
.tx-course-desc__m { font-size: 8pt; color: #555; }
.tx-course-desc p { margin: 2px 0 0; }
@media (max-width: 600px) {
  .tx-actions { flex-wrap: nowrap; }
  .tx-actions .btn--primary.btn--collapse { background: var(--btn-primary-bg); color: var(--btn-primary-ink); }
  .tx-detail { flex-direction: column; gap: 2px; }
}

/* --- Student check-off view (pages/studentView.js) --- */
/* The parent shell is hidden while student view is on. */
html[data-kid-mode="on"] .sidebar,
html[data-kid-mode="on"] .topbar,
html[data-kid-mode="on"] .bottom-nav,
html[data-kid-mode="on"] .fab,
html[data-kid-mode="on"] .fab-sheet { display: none !important; }
html[data-kid-mode="on"] .app-shell { grid-template-columns: 1fr; }
html[data-kid-mode="on"] .main { padding-bottom: calc(32px + env(safe-area-inset-bottom)); padding-top: max(10px, env(safe-area-inset-top)); }

.kid { max-width: 760px; margin: 0 auto; }
.kid-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 14px; }
.kid-top__date { font-weight: 600; color: var(--color-text-secondary); font-size: 0.9375rem; }
.kid-top__actions { display: flex; gap: 8px; }
.kid-top__btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 40px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-text-secondary); font-weight: 600; font-size: 0.8125rem;
}
.kid-top__btn .lucide { width: 16px; height: 16px; }
.kid-title { font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 2.5rem); font-weight: var(--heading-weight, 600); line-height: 1.1; margin: 0; }
.kid-sub { margin: 4px 0 0; color: var(--color-text-secondary); font-size: 1.0625rem; }
.kid-avatar {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  font-weight: 700; font-size: 1.4rem;
}
.kid-hello { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }

.kid-pick { text-align: center; padding-top: 4vh; }
.kid-pick__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 24px; }
.kid-pick__card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px;
  border-radius: var(--radius-xl); background: var(--color-surface); border: 2px solid var(--color-border);
  box-shadow: var(--shadow-sm, none); color: var(--color-text-primary);
}
.kid-pick__card:hover, .kid-pick__card:focus-visible { border-color: var(--color-accent); }
.kid-pick__card .kid-avatar { width: 84px; height: 84px; font-size: 1.8rem; }
.kid-pick__name { font-family: var(--font-display); font-size: 1.6rem; font-weight: var(--heading-weight, 600); }
.kid-pick__count { font-size: 0.9375rem; color: var(--color-text-secondary); }

.kid-progress { margin-bottom: 14px; }
.kid-progress__label { font-weight: 700; font-size: 1.0625rem; margin-bottom: 6px; }
.kid-progress__bar { height: 14px; border-radius: 999px; background: var(--color-surface-3); overflow: hidden; }
.kid-progress__bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--color-secondary); transition: width 300ms ease-out; }
.kid-alldone {
  margin-bottom: 14px; padding: 14px 16px; border-radius: var(--radius-lg, 14px);
  background: var(--color-primary); color: var(--color-text-primary); font-weight: 700; font-size: 1.125rem; text-align: center;
}
.kid-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kid-lesson {
  display: flex; align-items: flex-start; gap: 16px; padding: 16px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-left: 6px solid var(--subj);
  border-radius: var(--radius-lg, 14px);
}
.kid-tick {
  width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%;
  border: 3px solid var(--subj); background: var(--color-surface); color: transparent;
  display: grid; place-items: center; transition: background 160ms ease-out, color 160ms ease-out;
}
.kid-tick .lucide { stroke-width: 3; }
.kid-lesson.is-done .kid-tick { background: var(--subj); color: #fff; }
/* Midnight's subject colours are light, so the tick is dark there. */
html[data-theme="midnight"] .kid-lesson.is-done .kid-tick { color: #1A1917; }
.kid-tick.pop { animation: kid-pop 320ms ease-out; }
@keyframes kid-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
html[data-animations="off"] .kid-tick.pop { animation: none; }
.kid-lesson__body { flex: 1; min-width: 0; padding-top: 4px; }
.kid-lesson__title { font-size: 1.25rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.kid-lesson.is-done .kid-lesson__title { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--color-text-secondary); }
.kid-lesson__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; font-size: 0.9375rem; color: var(--color-text-secondary); }
.kid-chip { padding: 3px 10px; border-radius: 999px; background: var(--subj-soft); color: var(--color-text-primary); font-weight: 600; font-size: 0.8125rem; }
.kid-lesson__more { margin-top: 8px; font-size: 0.9375rem; }
.kid-lesson__more summary { cursor: pointer; font-weight: 600; color: var(--color-accent-text); }
.kid-lesson__more p { margin: 6px 0 0; }
.kid-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 14px; min-height: 40px;
  border-radius: var(--radius-pill); background: var(--subj-soft); color: var(--color-text-primary); font-weight: 600;
}
.kid-empty { text-align: center; padding: 40px 16px; color: var(--color-text-secondary); font-size: 1.125rem; }
.kid-empty__icon { color: var(--color-accent); margin-bottom: 8px; }
@media (max-width: 480px) {
  .kid-top__btn span { display: none; }
  .kid-top__btn { padding: 8px 10px; }
  .kid-tick { width: 52px; height: 52px; }
  .kid-lesson { padding: 14px 12px; gap: 12px; }
}

/* PIN pad */
.pin { text-align: center; }
.pin__msg { margin: 0 0 12px; color: var(--color-text-secondary); min-height: 1.4em; }
.pin__dots { display: flex; justify-content: center; gap: 14px; margin-bottom: 18px; }
.pin__dots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-border-strong); }
.pin__dots span.is-on { background: var(--color-accent); border-color: var(--color-accent); }
.pin__dots.shake { animation: pin-shake 360ms ease-in-out; }
@keyframes pin-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pin__pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; justify-content: center; }
.pin__key {
  width: 72px; height: 60px; border-radius: 16px; background: var(--color-surface-3); color: var(--color-text-primary);
  font-family: var(--font-num); font-size: 1.5rem; font-weight: 700; display: grid; place-items: center;
}
.pin__key:active { transform: scale(0.96); }
.pin__sum { font-family: var(--font-num); font-size: 1.6rem; font-weight: 700; margin: 6px 0 12px; }
.kid-setup__kids { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.kid-setup__kids .pill { gap: 6px; }
.kid-setup__pin { max-width: 140px; letter-spacing: 0.4em; font-size: 1.25rem; }

/* --- Quick log (components/quickLog.js) --- */
.qlog-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.qlog-done {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--hero-track); color: var(--hero-ink); font-weight: 600; font-size: 0.9375rem;
}
.qlog-done .lucide { color: var(--color-secondary); flex-shrink: 0; }
html[data-theme="pro"] .qlog-done .lucide { color: #FFFFFF; }
.qlog-change { color: var(--hero-ink); font-weight: 600; font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; min-height: 40px; }
.qlog .pill-group { margin-top: 6px; }
.qlog__hint { margin: 8px 0 0; font-size: 0.8125rem; color: var(--color-text-secondary); }
.qlog__row { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 14px; }
.qlog__stepper { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.qlog__stepper .btn { width: 40px; min-height: 40px; padding: 0; font-size: 1.2rem; }
.qlog__hours { min-width: 3.4em; text-align: center; font-family: var(--font-num); font-weight: 700; font-size: 1.1rem; }
.qlog__check { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-size: 0.9375rem; cursor: pointer; }
.qlog__check input { margin-top: 4px; }
.qlog__photo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.qlog__photo img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--color-border); }
.qlog__photo label.btn { cursor: pointer; }

/* --- Printed reports (pages/reports.js, printed via scripts/printDoc.js) ---
   Fixed print colours in the Soft look, never theme variables: paper is
   white whatever the screen theme is. */
.rpt-preview { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; padding: 20px; overflow-x: auto; }
.rpt-doc { color: #2A2526; background: #fff; font: 10pt/1.45 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; min-width: 520px; }
.rpt-doc * { box-sizing: border-box; }
.rpt-head { text-align: center; padding: 4px 0 14px; margin-bottom: 14px; border-bottom: 2px solid #4E6B54; }
.rpt-eyebrow { font-size: 8pt; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #9E5F66; }
.rpt-school { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24pt; font-weight: 600; line-height: 1.1; margin: 4px 0 2px; color: #2A2526; letter-spacing: 0; }
.rpt-student { font-size: 11pt; font-weight: 600; color: #3F3A3B; }
.rpt-range { font-size: 9pt; color: #6B6366; margin-top: 2px; }
.rpt-h2 { font: 700 8pt/1.3 'DM Sans', system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #4E6B54; margin: 16px 0 6px; break-after: avoid; page-break-after: avoid; }
.rpt-h2--student { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16pt; letter-spacing: 0; text-transform: none; color: #2A2526; margin-top: 18px; padding-bottom: 3px; border-bottom: 1px solid #E5DCDC; }
.rpt-table { width: 100%; border-collapse: collapse; margin: 4px 0 10px; }
.rpt-table th { text-align: left; font-size: 7.5pt; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6B6366; padding: 4px 6px; border-bottom: 1.5px solid #B9AEB0; }
.rpt-table td { padding: 5px 6px; border-bottom: 1px solid #ECE4E4; vertical-align: top; }
.rpt-table tr { break-inside: avoid; page-break-inside: avoid; }
.rpt-table .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpt-subject { display: inline-flex; align-items: center; gap: 7px; }
.rpt-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rpt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 10px 0 12px; break-inside: avoid; }
.rpt-stat { background: #FAF4F3; border: 1px solid #EFE3E2; border-radius: 8px; padding: 9px 8px; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rpt-stat__value { font-size: 15pt; font-weight: 700; color: #2A2526; font-variant-numeric: tabular-nums; }
.rpt-stat__label { font-size: 7.5pt; color: #6B6366; text-transform: uppercase; letter-spacing: 0.05em; }
.rpt-muted { color: #6B6366; font-size: 9pt; margin: 2px 0 6px; }
.rpt-num { font-variant-numeric: tabular-nums; color: #3F3A3B; }
.rpt-p { margin: 3px 0 0; }
.rpt-empty { color: #8A8285; font-style: italic; margin: 4px 0 10px; }
.rpt-note { font-size: 8.5pt; color: #6B6366; margin-top: 10px; }
.rpt-progress { padding: 6px 0; border-bottom: 1px solid #ECE4E4; break-inside: avoid; }
.rpt-progress__top, .rpt-item__top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.rpt-bar { height: 6px; border-radius: 3px; background: #EFE7E6; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rpt-bar > span { display: block; height: 100%; border-radius: 3px; }
.rpt-item { padding: 7px 0; border-bottom: 1px solid #ECE4E4; break-inside: avoid; }
.rpt-item--media { display: flex; gap: 12px; align-items: flex-start; }
.rpt-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.rpt-columns { columns: 2; column-gap: 24px; margin: 4px 0 10px; padding-left: 18px; }
.rpt-columns li { margin-bottom: 3px; break-inside: avoid; }
.rpt-comments { font-style: italic; white-space: pre-wrap; margin: 2px 0 8px; padding: 10px 12px; background: #FAF4F3; border-left: 3px solid #BA858C; border-radius: 0 6px 6px 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rpt-sign { display: flex; gap: 28px; margin-top: 36px; font-size: 8pt; color: #6B6366; break-inside: avoid; }
.rpt-sign > div { flex: 1; }
.rpt-sign .rpt-sign__date { flex: 0 0 150px; }
.rpt-sign span { display: block; border-bottom: 1px solid #2A2526; height: 1px; margin-bottom: 4px; }
.rpt-foot { text-align: center; font-size: 7.5pt; color: #9A9093; margin-top: 22px; padding-top: 8px; border-top: 1px solid #ECE4E4; }

/* --- Free demo (scripts/demo.js; only when the demo's shim ran) --- */
html.is-demo .demo-hide { display: none !important; }
.demo-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--color-primary); color: var(--color-text-primary);
  font-size: 0.875rem; font-weight: 600; border-bottom: 1px solid var(--color-border);
  position: relative; z-index: 60;
}
.demo-bar .btn { min-height: 32px; }
.demo-card { border: 1.5px solid var(--color-accent); background: var(--color-surface); margin-bottom: 18px; }
.demo-card__title { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 6px; }
.demo-card p { margin: 0 0 8px; color: var(--color-text-secondary); }
.demo-card ul { margin: 0 0 14px; padding-left: 20px; color: var(--color-text-secondary); }
@media print { .demo-bar { display: none !important; } }
.demo-bar__short { display: none; }
@media (max-width: 480px) {
  .demo-bar { flex-wrap: nowrap; justify-content: space-between; gap: 8px; padding: 6px 12px; font-size: 0.8125rem; }
  .demo-bar__long { display: none; }
  .demo-bar__short { display: inline; }
  .demo-bar .btn { white-space: nowrap; padding: 4px 12px; }
}