/* =============================================================
   Homestead Homeschool — TV-friendly distraction-free video app
   Designed for laptop -> HDMI -> TV. Big text. High contrast.
   ============================================================= */

:root {
  --bg: #1a1410;
  --bg-elev: #2a201a;
  --bg-elev-2: #3a2c20;
  --accent: #d97706;
  --accent-hover: #f59e0b;
  --mushroom-brown: #8b5a3c;
  --leaf: #5b7a3a;
  --text: #f5e9d3;
  --text-muted: #a99e8c;
  --text-dim: #6b6357;
  --danger: #c44536;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* =============================================================
   HOME PAGE — theme header + card grid
   ============================================================= */

.home-page {
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    var(--bg);
  min-height: 100vh;
  padding-bottom: 60px;
}

.theme-header {
  padding: 64px 72px 48px;
  border-bottom: 1px solid var(--bg-elev);
  background: linear-gradient(180deg, rgba(139, 90, 60, 0.15), transparent);
}

.theme-header-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.theme-eyebrow {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 16px;
}

.theme-title {
  font-size: 64px;
  line-height: 1.05;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}

.theme-subtitle {
  font-size: 24px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.theme-description {
  font-size: 22px;
  color: var(--text);
  max-width: 900px;
  line-height: 1.55;
}

.cards-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 72px 0;
}

.section-label {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 28px;
  font-weight: 600;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 28px;
}

.card {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
}

.card:hover, .card:focus-visible {
  background: var(--bg-elev-2);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
  outline: none;
}

.card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  background: linear-gradient(135deg, var(--mushroom-brown), var(--bg-elev-2));
}

.card-number {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.85);
  color: var(--accent);
  font-weight: 700;
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--accent);
}

.card-platform-tag {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.85);
  color: var(--text);
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card-platform-tag.external { background: rgba(196, 69, 54, 0.9); }
.card-platform-tag.tbd { background: color-mix(in srgb, var(--accent) 90%, transparent); color: #1a1410; }

.card-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }

.card-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--text);
}

.card-meta {
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.card-meta span:not(:last-child)::after {
  content: "·";
  margin-left: 12px;
  color: var(--text-dim);
}

.card-notes {
  font-size: 17px;
  color: var(--text-muted);
  margin-top: auto;
  font-style: italic;
}

.page-footer {
  max-width: 1400px;
  margin: 60px auto 0;
  padding: 0 72px;
  color: var(--text-dim);
  font-size: 16px;
}

/* =============================================================
   PLAYER PAGE — distraction-free video viewer
   ============================================================= */

.player-page {
  background: #000;
  overflow: hidden;
  height: 100vh;
}

.player-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

.player-topbar {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 32px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.6));
  border-bottom: 1px solid var(--bg-elev);
}

.btn-back {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elev);
  padding: 14px 24px;
  border-radius: var(--radius);
  font-size: 20px;
  font-weight: 600;
  transition: background 0.15s;
  border: 2px solid transparent;
}

.btn-back:hover, .btn-back:focus-visible {
  background: var(--bg-elev-2);
  border-color: var(--accent);
  outline: none;
}

.back-arrow { font-size: 24px; }

.btn-fullscreen {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elev);
  padding: 14px 22px;
  border-radius: var(--radius);
  font-size: 18px;
  font-weight: 600;
  border: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}

.btn-fullscreen:hover, .btn-fullscreen:focus-visible {
  background: var(--bg-elev-2);
  border-color: var(--accent);
  outline: none;
}

.player-meta { flex: 1; min-width: 0; }

.player-position {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 4px;
}

.player-title {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.player-channel {
  font-size: 16px;
  color: var(--text-muted);
}

.video-wrapper {
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#yt-player {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

#yt-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---- Distraction blockers over the YouTube iframe ---- */

/* Transparent click/hover eater — sits above the iframe so YouTube
   never receives mousemove or click events, which prevents its
   hover overlays (Share, Save, More Videos) from ever appearing. */
.video-clickeater {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: transparent;
  cursor: default;
}

/* Thin black strip across the top to hide the persistent
   "Watch on YouTube" / channel link bar that YouTube renders. */
.video-mask-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #000;
  z-index: 6;
  pointer-events: none;
}

/* Small mask in the bottom-right to hide the YouTube logo / "More videos" */
.video-mask-br {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 140px;
  height: 56px;
  background: #000;
  z-index: 6;
  pointer-events: none;
}

.end-card, .error-card {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  z-index: 20;          /* above all the iframe masks */
}

.end-card h2, .error-card h2 {
  font-size: 56px;
  margin-bottom: 20px;
  color: var(--accent);
}

.end-card p, .error-card p {
  font-size: 24px;
  margin-bottom: 36px;
  color: var(--text);
  max-width: 800px;
}

.error-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.player-bottom {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.78));
  border-top: 1px solid var(--bg-elev);
  padding: 18px 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.progress-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.time-label {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 64px;
  text-align: center;
}

.progress-bar {
  flex: 1;
  position: relative;
  height: 24px;                 /* big easy hit target */
  cursor: pointer;
  display: flex;
  align-items: center;
}

.progress-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.progress-track {
  position: relative;
  width: 100%;
  height: 8px;
  background: var(--bg-elev);
  border-radius: 999px;
  overflow: visible;
  transition: height 0.12s ease;
}

.progress-bar:hover .progress-track,
.progress-bar:focus-visible .progress-track {
  height: 12px;
}

.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.1s linear;
}

.progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: var(--accent);
  border: 3px solid var(--text);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  transition: width 0.12s, height 0.12s;
  pointer-events: none;
}

.progress-bar:hover .progress-thumb,
.progress-bar:focus-visible .progress-thumb {
  width: 22px;
  height: 22px;
}

.chapter-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.chapter-tick {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 16px;
  background: var(--text);
  opacity: 0.55;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.chapters-row {
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
}

.chapters-label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.chapters-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-elev-2) transparent;
  padding-bottom: 4px;
}

.chapters-list::-webkit-scrollbar { height: 6px; }
.chapters-list::-webkit-scrollbar-thumb { background: var(--bg-elev-2); border-radius: 4px; }

.chapter-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-elev);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.chapter-pill:hover, .chapter-pill:focus-visible {
  background: var(--bg-elev-2);
  border-color: var(--accent);
  outline: none;
}

.chapter-pill.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--text);
}

.chapter-pill .chapter-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  opacity: 0.85;
  font-size: 13px;
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 4px;
}

.btn-skip-back, .btn-skip-fwd {
  background: transparent;
  border: 2px solid var(--bg-elev-2);
  min-width: 110px;
}

.btn-skip-back:hover, .btn-skip-back:focus-visible,
.btn-skip-fwd:hover, .btn-skip-fwd:focus-visible {
  background: var(--bg-elev);
  border-color: var(--accent);
}

.btn-control {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--bg-elev);
  border-radius: var(--radius);
  font-size: 22px;
  font-weight: 600;
  min-width: 160px;
  justify-content: center;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
  border: 2px solid transparent;
  color: var(--text);
}

.btn-control:hover, .btn-control:focus-visible {
  background: var(--bg-elev-2);
  border-color: var(--accent);
  outline: none;
}

.btn-control:active { transform: scale(0.97); }

.btn-control:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--bg-elev);
}

.btn-play-pause {
  background: var(--accent);
  color: var(--bg);
  min-width: 200px;
}

.btn-play-pause:hover, .btn-play-pause:focus-visible {
  background: var(--accent-hover);
  border-color: var(--text);
}

.control-icon { font-size: 28px; line-height: 1; }
.control-label { font-size: 20px; }

.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: 16px 36px;
  border-radius: var(--radius);
  font-size: 22px;
  font-weight: 600;
  border: 2px solid transparent;
  transition: background 0.15s;
}

.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--accent-hover);
  border-color: var(--text);
  outline: none;
}

.btn-secondary {
  display: inline-block;
  background: var(--bg-elev);
  color: var(--text);
  padding: 16px 32px;
  border-radius: var(--radius);
  font-size: 20px;
  font-weight: 600;
  border: 2px solid transparent;
  transition: background 0.15s;
}

.btn-secondary:hover, .btn-secondary:focus-visible {
  background: var(--bg-elev-2);
  border-color: var(--accent);
  outline: none;
}

/* =============================================================
   Loading / error states on home
   ============================================================= */

.loading, .error-banner {
  text-align: center;
  padding: 60px 24px;
  font-size: 22px;
  color: var(--text-muted);
}

.error-banner {
  color: var(--danger);
  background: rgba(196, 69, 54, 0.08);
  border-radius: var(--radius);
  border: 1px solid rgba(196, 69, 54, 0.3);
  margin: 32px 0;
}

.cost-safe-notice {
  margin: 0.75rem 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 0.75rem;
  background: rgba(120, 53, 15, 0.2);
  color: var(--hh-ink-warning, #fcd9a5);
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: center;
}

.service-pause {
  width: min(680px, calc(100% - 32px));
  margin: clamp(72px, 14vh, 150px) auto;
  padding: clamp(28px, 5vw, 52px);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(40, 28, 20, 0.96), rgba(25, 20, 17, 0.98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.service-pause-icon { font-size: 48px; line-height: 1; }
.service-pause-eyebrow {
  margin: 16px 0 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.service-pause h1 { margin: 0 0 14px; font-size: clamp(25px, 4vw, 38px); }
.service-pause p { max-width: 560px; margin: 0 auto 14px; color: var(--text-muted); line-height: 1.6; }
.service-pause .service-pause-reset { color: var(--text); }
.service-pause .primary-btn { margin-top: 10px; }

.cached-data-notice {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 12000;
  transform: translateX(-50%);
  width: min(760px, calc(100% - 24px));
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  background: rgba(49, 32, 18, 0.96);
  color: #f8dfbc;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
}

/* =============================================================
   Responsive — phones, tablets, and TV
   ============================================================= */

/* --- Tablet portrait & small laptops --- */
@media (max-width: 1024px) {
  .theme-header { padding: 48px 36px 32px; }
  .theme-title { font-size: 48px; }
  .theme-subtitle { font-size: 20px; }
  .theme-description { font-size: 19px; }
  .cards-section { padding: 36px 36px 0; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
  .page-footer { padding: 0 36px; }
}

/* --- Large phone / small tablet --- */
@media (max-width: 768px) {
  /* Home page */
  .theme-header { padding: 32px 24px 24px; }
  .theme-title { font-size: 36px; }
  .theme-subtitle { font-size: 18px; margin-bottom: 18px; }
  .theme-description { font-size: 17px; }
  .cards-section { padding: 28px 24px 0; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
  .card-title { font-size: 20px; }
  .card-meta { font-size: 14px; }
  .card-notes { font-size: 15px; }
  .page-footer { padding: 0 24px; }

  /* Player topbar — keep it tight */
  .player-topbar { padding: 12px 14px; gap: 12px; }
  .player-title { font-size: 17px; white-space: normal; line-height: 1.25; }
  .player-position { font-size: 12px; letter-spacing: 1.5px; }
  .player-channel { font-size: 13px; }
  .btn-back { padding: 10px 14px; font-size: 16px; }
  .btn-back .back-label { display: none; }
  .btn-fullscreen { padding: 10px 14px; font-size: 16px; }
  .btn-fullscreen .control-label { display: none; }

  /* Masks shrink so they don't eat too much of small screens */
  .video-mask-top { height: 40px; }
  .video-mask-br { width: 100px; height: 40px; }

  /* Bottom controls — icons only, tight spacing */
  .player-bottom { padding: 12px 14px 14px; gap: 8px; }
  .progress-row { gap: 12px; }
  .time-label { min-width: 48px; font-size: 14px; }
  .progress-track { height: 6px; }
  .progress-bar:hover .progress-track { height: 10px; }

  .chapters-row { gap: 10px; }
  .chapters-label { font-size: 12px; }
  .chapter-pill { font-size: 13px; padding: 6px 10px; }

  .player-controls { gap: 8px; padding-top: 2px; }
  .btn-control {
    min-width: 0;
    padding: 12px 14px;
    font-size: 14px;
    gap: 0;
  }
  .btn-control .control-label { display: none; }
  .btn-skip-back, .btn-skip-fwd { min-width: 0; }
  .btn-play-pause { min-width: 64px; padding: 12px 18px; }
  .control-icon { font-size: 22px; }
}

/* --- Phones --- */
@media (max-width: 480px) {
  .theme-header { padding: 24px 16px 20px; }
  .theme-title { font-size: 28px; }
  .theme-subtitle { font-size: 16px; }
  .cards-section { padding: 20px 16px 0; }
  .card-grid { grid-template-columns: 1fr; gap: 14px; }
  .page-footer { padding: 0 16px; }

  .player-topbar { padding: 10px 12px; gap: 10px; }
  .player-title { font-size: 16px; }
  .player-channel { display: none; }       /* claw back vertical space */
  .btn-back, .btn-fullscreen { padding: 9px 12px; }
  .back-arrow, .control-icon { font-size: 22px; }

  .video-mask-top { height: 32px; }
  .video-mask-br { width: 80px; height: 32px; }

  .player-bottom { padding: 10px 12px 12px; gap: 6px; }
  .progress-row { gap: 8px; }
  .time-label { min-width: 42px; font-size: 13px; }

  .player-controls { gap: 6px; }
  .btn-control { padding: 11px 10px; }
  .btn-play-pause { min-width: 56px; padding: 11px 14px; }
  .control-icon { font-size: 20px; }
}

/* =============================================================
   PARENT PAGE — sign-in card + dashboard
   ============================================================= */

.parent-page {
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    var(--bg);
  min-height: 100vh;
}

/* ---- Loading shell ---- */
.loading-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: var(--text-muted);
  font-size: 18px;
}

/* ---- Signed-out (sign-in card) ---- */
.signed-out-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.signed-out-card {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 56px 56px 40px;
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow);
  text-align: center;
}

.signed-out-eyebrow {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 12px;
}

.signed-out-card h1 {
  font-size: 36px;
  margin-bottom: 12px;
  color: var(--text);
}

.signed-out-blurb {
  font-size: 17px;
  color: var(--text-muted);
  margin-bottom: 32px;
}

.clerk-mount {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.signed-out-footer {
  font-size: 14px;
  color: var(--text-dim);
  border-top: 1px solid var(--bg-elev-2);
  padding-top: 20px;
  margin-top: 20px;
}

.signed-out-footer a {
  color: var(--accent);
  text-decoration: underline;
}

/* ---- Dashboard ---- */
.dashboard-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 48px 80px;
}

.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--bg-elev);
  padding-bottom: 32px;
  margin-bottom: 40px;
}

/* Slim variant: less vertical real estate, no border, smaller title.
   Used wherever the bottom tab bar handles primary nav so we don't
   need a heavy header on top of that. */
.dashboard-header-slim {
  border-bottom: 0;
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.dashboard-header-slim .dashboard-title {
  font-size: 26px;
  margin-bottom: 2px;
}
.dashboard-header-slim .dashboard-subtitle {
  font-size: 14px;
}

.dashboard-header-meta { flex: 1; min-width: 0; }

.dashboard-eyebrow {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 10px;
}

.dashboard-title {
  font-size: 44px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.1;
}

.dashboard-subtitle {
  font-size: 17px;
  color: var(--text-muted);
}

.user-button-mount {
  flex-shrink: 0;
  padding-top: 8px;
}

.dashboard-section {
  margin-bottom: 40px;
}

.dashboard-section-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 18px;
  font-weight: 600;
}

.dashboard-empty {
  background: var(--bg-elev);
  border: 1px dashed var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
}

.dashboard-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dashboard-links li { margin-bottom: 10px; }

.dashboard-links a {
  color: var(--accent);
  font-size: 17px;
  text-decoration: underline;
}

/* ---- Kid cards ---- */
.kids-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.kid-card {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  border: 1px solid transparent;
  border-left: 5px solid var(--kid-calendar-color, var(--accent));
}

.kid-card-name {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.kid-card-meta {
  font-size: 14px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}

.kid-card-line {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.45;
}

.kid-card-line strong {
  color: var(--text-muted);
  font-weight: 600;
}

.kid-card-notes {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bg-elev-2);
  line-height: 1.5;
}

/* Responsive — collapse padding on phones */
@media (max-width: 768px) {
  .dashboard-shell { padding: 28px 20px 60px; }
  .dashboard-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 28px;
  }
  .dashboard-title { font-size: 32px; }
  .signed-out-card { padding: 36px 24px 28px; }
  .signed-out-card h1 { font-size: 28px; }
  .kids-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- Activity log form + list ---- */

.activity-form {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 22px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--bg-elev-2);
}

.activity-form-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1.2fr) minmax(160px, 1.4fr) 100px;
  gap: 14px;
}

.activity-form-row-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.activity-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.activity-field-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 600;
}

.activity-hint {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
  font-weight: 400;
  margin-left: 6px;
  font-size: 11px;
}

.activity-form input[type="text"],
.activity-form input[type="number"],
.activity-form select,
.activity-form textarea {
  background: var(--bg);
  color: var(--text);
  border: 1.5px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.15s;
}

.activity-form input:focus,
.activity-form select:focus,
.activity-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.activity-form textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
}

.mood-picker {
  border: 1.5px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 8px 14px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.mood-picker legend {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0 8px;
}

.mood-picker label {
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}

.mood-picker label:hover { background: var(--bg-elev-2); }

.mood-picker input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mood-picker input[type="radio"]:checked + span {
  display: inline-block;
  transform: scale(1.15);
}

.mood-picker label:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  background: var(--bg);
}

.activity-form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.activity-form-msg {
  font-size: 14px;
  color: var(--text-muted);
}
.activity-form-msg[data-kind="error"] { color: var(--danger); }
.activity-form-msg[data-kind="ok"]    { color: var(--leaf); }

/* ---- Activity list ---- */

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.activity-loading,
.activity-empty {
  color: var(--text-muted);
  font-size: 16px;
  padding: 16px 4px;
}

.activity-day-heading {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 12px;
  font-weight: 600;
}

.activity-day {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-entry {
  background: var(--bg-elev);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 14px 18px;
  transition: border-color 0.15s;
}

.activity-entry:hover { border-color: var(--bg-elev-2); }

.activity-entry-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.activity-entry-kid {
  font-weight: 700;
  color: var(--text);
  font-size: 16px;
}

.activity-entry-subject {
  background: var(--bg-elev-2);
  color: var(--text);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.activity-entry-source {
  color: var(--text-muted);
  font-size: 14px;
}
.activity-entry-source::before { content: "· "; color: var(--text-dim); }

.activity-entry-duration {
  color: var(--text-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.activity-entry-duration::before { content: "· "; color: var(--text-dim); }

.activity-entry-mood {
  font-size: 18px;
  line-height: 1;
}

.activity-entry-time {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.activity-entry-notes {
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  margin: 4px 0 0;
}

@media (max-width: 768px) {
  .activity-form { padding: 16px 16px 14px; }
  .activity-form-row {
    grid-template-columns: 1fr 1fr;
  }
  .activity-form-row > .activity-field-kid { grid-column: 1 / -1; }
  .activity-form-row > .activity-field-narrow {
    grid-column: 1 / 2;
  }
  .activity-form-row-bottom {
    flex-direction: column;
    align-items: stretch;
  }
  .activity-form-actions {
    justify-content: space-between;
    width: 100%;
  }
  .activity-entry-header { gap: 8px; font-size: 14px; }
  .activity-entry-time { margin-left: 0; width: 100%; order: 99; }
}

.dashboard-section-blurb {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 16px;
  line-height: 1.6;
  max-width: 700px;
}

/* ---- Curriculum form + list ---- */

.curriculum-form {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 18px 22px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--bg-elev-2);
}

.curriculum-form-row {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(160px, 1fr) minmax(180px, 1.2fr);
  gap: 14px;
  margin-bottom: 12px;
}

.curriculum-field { display: flex; flex-direction: column; gap: 6px; }
.curriculum-field-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 600;
}

.curriculum-form input,
.curriculum-form select {
  background: var(--bg);
  color: var(--text);
  border: 1.5px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
}
.curriculum-form input:focus,
.curriculum-form select:focus {
  outline: none;
  border-color: var(--accent);
}

.curriculum-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.curriculum-form-msg { font-size: 14px; color: var(--text-muted); }
.curriculum-form-msg[data-kind="error"] { color: var(--danger); }
.curriculum-form-msg[data-kind="ok"]    { color: var(--leaf); }

.curriculum-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.curriculum-section-title {
  margin: 22px 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.curriculum-empty {
  color: var(--text-muted);
  font-size: 15px;
  padding: 12px 4px;
  grid-column: 1 / -1;
}

.curriculum-item {
  background: var(--bg-elev);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  transition: border-color 0.12s;
  overflow: hidden;
}
.curriculum-item:hover { border-color: var(--bg-elev-2); }

.curriculum-open {
  flex: 1;
  min-width: 0;
  min-height: 68px;
  padding: 12px 8px 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.curriculum-open:focus-visible,
.curriculum-back:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: -2px;
}

.curriculum-icon { font-size: 24px; flex-shrink: 0; }

.curriculum-body { flex: 1; min-width: 0; display: block; }

.curriculum-name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.curriculum-meta {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.curriculum-chevron {
  color: var(--text-dim);
  font-size: 28px;
  line-height: 1;
}

.curriculum-delete {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid transparent;
  border-radius: 6px;
  width: 44px;
  height: 44px;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.curriculum-delete:hover {
  background: rgba(196, 69, 54, 0.15);
  color: var(--danger);
  border-color: var(--danger);
}

.curriculum-detail { min-height: 260px; }

.curriculum-back {
  border: 0;
  background: transparent;
  color: var(--sun);
  font: inherit;
  font-weight: 650;
  padding: 4px 0 16px;
  cursor: pointer;
}

.curriculum-detail-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.curriculum-detail-icon { font-size: 34px; }
.curriculum-detail-heading h3 { margin: 0; font-size: 23px; color: var(--text); }
.curriculum-detail-heading p { margin: 4px 0 0; color: var(--text-muted); }

.curriculum-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.curriculum-stat {
  padding: 14px;
  border: 1px solid var(--bg-elev-2);
  border-radius: var(--radius);
  background: var(--bg-elev);
}

.curriculum-stat strong,
.curriculum-stat span { display: block; }
.curriculum-stat strong { color: var(--text); font-size: 20px; }
.curriculum-stat span { margin-top: 3px; color: var(--text-muted); font-size: 12px; }

.curriculum-facts { margin: 0; }
.curriculum-facts > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bg-elev-2);
}
.curriculum-facts dt { color: var(--text-muted); font-size: 13px; }
.curriculum-facts dd { margin: 0; color: var(--text); font-size: 14px; }
.curriculum-facts a { color: var(--sun); }

.curriculum-chapter-heading { margin: 22px 0 10px; color: var(--text); font-size: 15px; }
.curriculum-chapter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--bg-elev-2);
  border-radius: var(--radius);
  max-height: min(42vh, 420px);
  overflow-y: auto;
}
.curriculum-chapter-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bg-elev-2);
}
.curriculum-chapter-item:last-child { border-bottom: 0; }
.curriculum-chapter-number { width: 44px; flex: 0 0 44px; color: var(--sun); font-weight: 700; }
.curriculum-chapter-copy { min-width: 0; flex: 1; }
.curriculum-chapter-title { display: block; color: var(--text); font-weight: 600; }
.curriculum-chapter-subtitle,
.curriculum-chapter-pages { color: var(--text-muted); font-size: 12px; }
.curriculum-chapter-subtitle { display: block; margin-top: 2px; }
.curriculum-chapter-pages { flex-shrink: 0; }
.curriculum-detail-empty { color: var(--text-muted); padding: 14px 0; }

@media (max-width: 560px) {
  .curriculum-stats { grid-template-columns: 1fr; }
  .curriculum-chapter-pages { display: none; }
}

/* =============================================================
   PLANNER PAGE
   ============================================================= */

.planner-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.planner-kid-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.planner-kid-tab {
  padding: 10px 18px;
  border: 1.5px solid var(--bg-elev-2);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  font-family: inherit;
}
.planner-kid-tab:hover { background: var(--bg-elev-2); }
.planner-kid-tab.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.planner-week-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Day/week/year steppers. These were dark-on-dark and read as decoration
   rather than controls, so on desktop — where there is no swipe — people
   could not find a way to move between days. Accent-tinted with a visible
   ring so they read as buttons. */
.btn-week-nav {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-elev));
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.btn-week-nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #17120a;
}
.btn-week-nav:active { transform: scale(0.94); }
.btn-week-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-week-today {
  background: var(--bg-elev);
  border: 1.5px solid var(--bg-elev-2);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn-week-today:hover { background: var(--bg-elev-2); border-color: var(--accent); }

.planner-week-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  min-width: 240px;
  text-align: center;
}

.planner-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  align-items: start;
}

.planner-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
  color: var(--text-muted);
}

.planner-day {
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 12px 10px 10px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
}

.planner-day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--bg-elev-2);
  margin-bottom: 8px;
}

.planner-day-name {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.planner-day-date {
  font-size: 12px;
  color: var(--text-dim);
}

.planner-day-today .planner-day-name { color: var(--accent); }
.planner-day-today { border-color: var(--accent); }

.planner-blocks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.planner-block {
  background: var(--bg-elev-2);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-left: 3px solid var(--accent);
  transition: background 0.12s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.planner-block:hover { background: var(--bg); }

.planner-block[data-type="workshop"]      { border-left-color: #b88a4a; }
.planner-block[data-type="free_play"]     { border-left-color: var(--leaf); }
.planner-block[data-type="extracurricular"] { border-left-color: #b04ad9; }
.planner-block[data-type="meal"]          { border-left-color: #d96b4a; }
.planner-block[data-type="chore"]         { border-left-color: #777; }
.planner-block[data-type="field_trip"]    { border-left-color: #4a8fd9; }
.planner-block[data-type="sleep"]         { border-left-color: #4a5568; }
.planner-block[data-type="other"]         { border-left-color: var(--text-dim); }

.planner-block-time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 600;
}

.planner-block-label {
  font-size: 14px;
  color: var(--text);
  line-height: 1.3;
}

.planner-block-icon { margin-right: 2px; }

.planner-block-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.planner-block-duration {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.planner-add-btn {
  background: transparent;
  border: 1px dashed var(--bg-elev-2);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  margin-top: auto;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.planner-add-btn:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  border-color: var(--accent);
}

.planner-msg {
  background: rgba(196, 69, 54, 0.12);
  color: var(--danger);
  border: 1px solid rgba(196, 69, 54, 0.3);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 14px;
}
.planner-msg[data-kind="ok"] { background: rgba(91, 122, 58, 0.15); color: var(--leaf); border-color: rgba(91, 122, 58, 0.4); }

/* ---- Block-edit modal ---- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overscroll-behavior: contain;
  touch-action: pan-y;          /* let the modal body scroll, not the page */
}

/* While any modal is open, pin the page behind so taps don't scroll the
   calendar through the overlay. */
body.hh-modal-open {
  overflow: hidden;
  touch-action: none;
}
/* The backdrop itself doesn't scroll — touches landing on the dim area
 * (outside the card) should NOT pan/scroll anything. Only the modal-card
 * + its scrollable inner regions get pan-y. This prevents the schedule
 * grid behind from scrolling when the user touch-drags over the dim area. */
body.hh-modal-open .modal-backdrop { touch-action: none; }
body.hh-modal-open .modal-backdrop .modal-card,
body.hh-modal-open .modal-backdrop .act-modal-card,
body.hh-modal-open .modal-backdrop .act-modal-body { touch-action: pan-y; overscroll-behavior: contain; }

/* Preview-mode banner — appears at the very top when parent.js detects
   it's running outside the deployed frontend (file://, local panel,
   etc.). Visually obvious so live and demo never get confused. */
.hh-preview-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(90deg, var(--accent), #f59e0b);
  color: #1a1410;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-align: center;
  padding: 6px 14px;
  text-transform: uppercase;
}

.modal-card {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--bg-elev-2);
  box-shadow: var(--shadow);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bg-elev);
}

.modal-header h2 {
  font-size: 22px;
  color: var(--text);
}

.modal-close {
  background: var(--bg-elev);
  border: 1px solid var(--bg-elev-2);
  color: var(--text);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover { background: var(--bg-elev-2); }

.block-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.block-field { display: flex; flex-direction: column; gap: 6px; }
.block-field-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 600;
}

.block-form input,
.block-form select,
.block-form textarea {
  background: var(--bg-elev);
  color: var(--text);
  border: 1.5px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
}
.block-form input:focus,
.block-form select:focus,
.block-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.block-form textarea { resize: vertical; min-height: 60px; line-height: 1.5; }

.block-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.block-field-narrow { grid-column: span 1; }

.block-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--bg-elev);
}
.block-form-msg {
  flex: 1;
  font-size: 14px;
  color: var(--text-muted);
}
.block-form-msg[data-kind="error"] { color: var(--danger); }

@media (max-width: 768px) {
  .curriculum-form-row { grid-template-columns: 1fr; }
  .planner-grid { grid-template-columns: 1fr; gap: 12px; }
  .planner-day { min-height: 0; }
  .planner-week-label { min-width: 0; font-size: 16px; }
  .block-field-row { grid-template-columns: 1fr; }
  .modal-card { padding: 18px; }
}

/* =============================================================
   TODAY PAGE — 24-hour radial clock
   ============================================================= */

.today-page {
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    var(--bg);
  min-height: 100vh;
  padding: 32px 24px 48px;
}

.today-header {
  max-width: 1200px;
  margin: 0 auto 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.today-back-link {
  color: var(--accent);
  text-decoration: underline;
  font-size: 14px;
}

.today-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.today-view-toggle {
  margin-bottom: 0;
}

.today-header-meta { flex: 1; min-width: 200px; }

.today-eyebrow {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 8px;
}

.today-title {
  font-size: 44px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.05;
  margin-bottom: 6px;
}

.today-subtitle {
  font-size: 18px;
  color: var(--text-muted);
}

.today-kid-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.today-kid-tab {
  padding: 10px 18px;
  border: 1.5px solid var(--bg-elev-2);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.today-kid-tab:hover { background: var(--bg-elev-2); }
.today-kid-tab.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.today-main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  gap: 40px;
  align-items: start;
}
.today-on-deck { grid-column: 1 / -1; padding: 14px 16px; border: 1px solid rgba(79,154,103,.45); border-radius: 15px; background: rgba(79,154,103,.08); }
.today-on-deck > header { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.today-on-deck h2 { margin: 2px 0 0; font-size: 21px; }
.today-on-deck > header > span { color: var(--text-muted); font-size: 12px; }
.today-on-deck-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px; margin-top: 10px; }
.today-on-deck-card { padding: 11px 13px; border-radius: 10px; background: var(--bg-elev); }
.today-on-deck-card strong { color: var(--accent); }
.today-on-deck-card p { margin: 5px 0 0; }
.today-on-deck-next { color: var(--text-muted); }

@media (max-width: 900px) {
  .today-main {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.clock-wrapper {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
}

/* Hide the radial clock on phone widths — too cramped to be useful, and
   the calendar grid on parent.html is the better mobile experience.
   Desktop keeps the radial as a visual centerpiece. */
@media (max-width: 900px) {
  .clock-wrapper { display: none; }
  .today-main {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}

#clock-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.clock-now-display {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.clock-now-time {
  font-size: 38px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  line-height: 1;
}

.clock-now-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-top: 4px;
}

.clock-now-weather {
  font-size: 18px;
  color: var(--text);
  margin-top: 8px;
  font-weight: 600;
}

/* SVG element classes */

.bg-day   { fill: rgba(245, 215, 130, 0.13); }
.bg-night { fill: rgba(28, 36, 70, 0.45); }
.bg-dawn  { fill: rgba(255, 156, 110, 0.32); }
.bg-dusk  { fill: rgba(255, 120, 90,  0.32); }

/* Stars on the night portion of the ring */
.star {
  fill: #f5e9d3;
  filter: drop-shadow(0 0 2px rgba(245, 233, 211, 0.6));
  pointer-events: none;
}

/* Weather emoji along the day arc */
.weather-strip-icon {
  font-size: 14px;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.clock-plate-outer {
  fill: rgba(42, 32, 26, 0.6);
  stroke: var(--bg-elev-2);
  stroke-width: 1.5;
}

.clock-plate-inner {
  fill: var(--bg);
  stroke: var(--bg-elev-2);
  stroke-width: 1.5;
}

.hour-tick {
  stroke: var(--text-dim);
  stroke-width: 1.5;
}

.hour-tick-major {
  stroke: var(--text-muted);
  stroke-width: 2.5;
}

.hour-label {
  fill: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.sun-icon, .moon-icon {
  font-size: 22px;
}

.block-arc {
  fill-opacity: 0.88;
  stroke: rgba(0, 0, 0, 0.25);
  stroke-width: 0.5;
  transition: fill-opacity 0.12s;
}

.block-group:hover .block-arc { fill-opacity: 1; }
.block-group:hover .block-arc-label { fill: var(--bg); }

.block-icon {
  font-size: 18px;
  pointer-events: none;
}

.block-arc-label {
  fill: var(--text);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.3px;
}

.sun-marker {
  font-size: 16px;
  pointer-events: none;
}

.now-indicator {
  fill: #ff5b3a;
  stroke: var(--text);
  stroke-width: 1.5;
}

/* ---- Today block list (text fallback / accessibility) ---- */

.today-list-section {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 22px 24px 18px;
}

.today-list-heading {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.today-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.today-list-empty {
  color: var(--text-muted);
  font-size: 15px;
  padding: 16px 0;
}

.today-list-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border-radius: var(--radius);
}

.today-list-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 1px;
}

.today-list-body { min-width: 0; }

.today-list-label {
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
}

.today-list-curriculum {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2px;
}

.today-list-details {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

.today-footer {
  max-width: 1200px;
  margin: 32px auto 0;
  text-align: right;
  font-size: 14px;
}
.today-footer a {
  color: var(--accent);
  text-decoration: underline;
}

/* ---- Detail panel (full-screen slide-up) ---- */
/* Was a 420px right-side aside. Switched to full-screen 2026-05-06 because
 * the side-panel (a) doesn't show the activity history with enough room and
 * (b) caused ghost-scroll on the dim backdrop. Now slides up from the
 * bottom and covers everything except the tab bar. Body scroll is locked
 * via body.has-detail-open while the panel is showing. */

.today-detail-panel {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100;
  padding: 28px 24px 92px 24px;     /* bottom padding leaves room for back button + tab bar */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.28s ease;
  visibility: hidden;
}
.today-detail-panel.open {
  transform: translateY(0);
  visibility: visible;
}

/* Lock the page behind so taps don't double-scroll. */
body.has-detail-open { overflow: hidden; touch-action: none; }
body.has-detail-open .tab-bar { z-index: 101; }    /* keep tab bar visible above panel */

/* The old close-X is hidden — we use the new floating Back button instead. */
.detail-close { display: none !important; }

/* Floating back button — bottom-right, above the tab bar safe area. */
.detail-back-button {
  position: fixed;
  bottom: calc(var(--tab-bar-height, 64px) + 16px + env(safe-area-inset-bottom, 0px));
  right: 18px;
  z-index: 110;
  display: none;
  align-items: center; gap: 8px;
  padding: 12px 18px;
  background: var(--accent); color: #000; font-weight: 700;
  border: none; border-radius: 999px;
  font-family: inherit; font-size: 15px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: filter 0.12s, transform 0.05s;
}
.detail-back-button:hover { filter: brightness(1.05); }
.detail-back-button:active { transform: scale(0.97); }
.today-detail-panel.open ~ .detail-back-button,
.detail-back-button.is-visible { display: inline-flex; }

.detail-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bg-elev-2);
}

.detail-time {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
}

.detail-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 6px;
}

.detail-type {
  font-size: 14px;
  color: var(--text-muted);
}

.detail-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-section {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 14px 16px;
  border: 1px solid var(--bg-elev-2);
}

.detail-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}

.detail-curriculum-name {
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
}

.detail-notes {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  border-left: 3px solid var(--accent);
}

.detail-links {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-section-heading {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 6px;
}

.detail-link {
  display: block;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--bg-elev-2);
  transition: background 0.12s, border-color 0.12s;
}
.detail-link:hover {
  background: var(--bg-elev-2);
  border-color: var(--accent);
}

@media (max-width: 768px) {
  .today-detail-panel {
    /* Already full-screen — no override needed. */
    padding: 22px 18px 100px 18px;
  }
}

/* =============================================================
   VIEW TOGGLE — Day / Week / Year
   ============================================================= */

.view-toggle {
  display: inline-flex;
  background: var(--bg-elev);
  padding: 4px;
  border-radius: 999px;
  margin-bottom: 22px;
  border: 1px solid var(--bg-elev-2);
  gap: 2px;
}

.view-toggle-link {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.view-toggle-link:hover { background: var(--bg-elev-2); color: var(--text); }
.view-toggle-link.active {
  background: var(--accent);
  color: var(--bg);
}

/* =============================================================
   YEAR PAGE
   ============================================================= */

.year-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Stage 2 instructional-year editor */
.instructional-year {
  margin: 14px 0 18px;
  padding: 18px;
  border: 1px solid var(--bg-elev-2);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 92%, var(--accent) 8%);
}
.instructional-year-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.instructional-year-header h2 { margin: 2px 0 4px; font-size: 22px; }
.instructional-year-header p { margin: 0; color: var(--text-muted); }
.instructional-school-days { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 16px; padding: 12px; background: rgba(255,255,255,.035); border-radius: 12px; }
.instructional-day-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.instructional-day-chip { border: 1px solid var(--bg-elev-2); border-radius: 999px; background: var(--bg); color: var(--text-muted); padding: 7px 11px; cursor: pointer; }
.instructional-day-chip.is-active { color: #20150b; background: var(--accent); border-color: var(--accent); font-weight: 700; }
.instructional-inline-status { color: var(--text-muted); font-size: 13px; }
.instructional-entry-form { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.5fr) minmax(140px, .7fr) minmax(140px, .7fr); gap: 10px; margin: 14px 0; padding: 14px; border: 1px solid var(--accent); border-radius: 12px; }
.instructional-entry-form label, .instructional-reflow-controls label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-muted); }
.instructional-entry-form input, .instructional-entry-form select, .instructional-reflow-controls input { width: 100%; min-height: 40px; border: 1px solid var(--bg-elev-2); border-radius: 8px; background: var(--bg); color: var(--text); padding: 8px 10px; }
.instructional-form-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; grid-column: 1 / -1; }
.instructional-entry-form .instructional-inline-status { grid-column: 1 / -1; margin: 0; }
.instructional-entry-list { display: grid; gap: 7px; margin-top: 14px; }
.instructional-entry { display: grid; grid-template-columns: 90px 1fr auto auto; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--bg-elev-2); border-left: 5px solid #6d7b8b; border-radius: 10px; background: var(--bg); }
.instructional-entry-term { border-left-color: #4f9a67; }
.instructional-entry-vacation, .instructional-entry-holiday, .instructional-entry-no_school { border-left-color: #c36e4b; }
.instructional-entry-school_day { border-left-color: #4b8bc3; }
.instructional-entry-kind { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.instructional-entry-copy { display: flex; flex-direction: column; min-width: 0; }
.instructional-entry-copy small { color: var(--text-muted); margin-top: 2px; }
.instructional-empty { color: var(--text-muted); padding: 12px; text-align: center; }
.instructional-reflow { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bg-elev-2); }
.instructional-reflow h3 { margin: 0 0 4px; font-size: 16px; }
.instructional-reflow p { margin: 0; color: var(--text-muted); }
.instructional-reflow-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.instructional-reflow-result { margin-top: 12px; padding: 13px; border: 1px solid var(--bg-elev-2); border-radius: 10px; background: var(--bg); }
.instructional-reflow-result header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.instructional-reflow-result ul { max-height: 260px; overflow-y: auto; padding-left: 20px; }
.instructional-reflow-result li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; }
.instructional-reflow-result .is-error { color: var(--hh-ink-danger, #ffb4a8); }
.instructional-reflow-result .is-success { color: var(--hh-ink-success, #b8d99c); }
.instructional-reflow-history { margin-top: 12px; }
.instructional-reflow-history h4 { margin: 0 0 5px; }
.instructional-reflow-history > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--bg-elev-2); color: var(--text-muted); }

@media (max-width: 760px) {
  .instructional-year-header { flex-direction: column; }
  .instructional-entry-form { grid-template-columns: 1fr; }
  .instructional-form-actions, .instructional-entry-form .instructional-inline-status { grid-column: auto; }
  .instructional-entry { grid-template-columns: 76px 1fr; }
  .instructional-entry .btn-secondary { grid-column: auto; }
  .instructional-reflow-result li { flex-direction: column; gap: 2px; }
}

.year-month {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.year-month-heading {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  font-weight: 600;
}

.year-month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.year-week-card {
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1.5px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}

.year-week-card:hover {
  background: var(--bg-elev-2);
  border-color: var(--accent);
}

.year-week-current {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.year-week-planned {
  background: linear-gradient(180deg, var(--bg-elev) 0%, color-mix(in srgb, var(--accent) 8%, transparent) 100%);
}

.year-week-num {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  font-weight: 700;
}

.year-week-dates {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.year-week-status {
  font-size: 13px;
  color: var(--text-muted);
}

.year-week-status-empty {
  color: var(--text-dim);
}

/* =============================================================
   WORKSHOPS PAGE
   ============================================================= */

.workshop-form {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--bg-elev-2);
  margin-bottom: 24px;
}

.workshop-form-row {
  grid-template-columns: minmax(180px, 1.5fr) minmax(120px, 1fr) minmax(120px, 1fr);
}

.workshop-form input,
.workshop-form select,
.workshop-form textarea {
  background: var(--bg);
  color: var(--text);
  border: 1.5px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
}
.workshop-form input:focus,
.workshop-form select:focus,
.workshop-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.workshop-form textarea {
  resize: vertical;
  line-height: 1.55;
}

.workshop-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.workshops-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}

.workshop-card {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  border: 1px solid var(--bg-elev-2);
}

.workshop-card-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  margin-bottom: 14px;
  align-items: start;
}

.workshop-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  grid-column: 1 / 2;
}

.workshop-card-meta {
  grid-column: 1 / 2;
  font-size: 13px;
  color: var(--text-muted);
}

.workshop-card-header .curriculum-delete {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: start;
}

.workshop-card-guide {
  width: 100%;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--bg-elev-2));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg));
  color: var(--accent);
  font-family:inherit; font-weight:750; font-size:13px; line-height:1.2;
  cursor: pointer;
}
.workshop-card-guide:hover, .workshop-card-guide:focus-visible { background: color-mix(in srgb, var(--accent) 16%, var(--bg)); outline: none; }

.workshop-card-curriculum {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bg-elev-2);
}

.workshop-card-h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin: 14px 0 6px;
  font-weight: 700;
}

.workshop-card-list {
  margin: 0 0 0 22px;
  padding: 0;
  font-size: 15px;
  color: var(--text);
  line-height: 1.55;
}

.workshop-card-list li { margin-bottom: 4px; }

.workshop-card-entrep {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  margin-top: 14px;
  border-left: 3px solid var(--accent);
}

@media (max-width: 768px) {
  .workshop-form-row { grid-template-columns: 1fr; }
  .workshops-list { grid-template-columns: 1fr; }
}

/* =============================================================
   FAMILY SETTINGS FORM
   ============================================================= */

.family-form {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  border: 1px solid var(--bg-elev-2);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.family-form-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(140px, 1fr);
  gap: 14px;
}

.family-form input,
.family-form select {
  background: var(--bg);
  color: var(--text);
  border: 1.5px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
}
.family-form input:focus,
.family-form select:focus {
  outline: none;
  border-color: var(--accent);
}

@media (max-width: 768px) {
  .family-form-row { grid-template-columns: 1fr; }
}

/* =============================================================
   TRIPS PAGE — extends workshop-card styling
   ============================================================= */

.trip-form {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--bg-elev-2);
  margin-bottom: 24px;
}

.trip-form-row {
  grid-template-columns: minmax(200px, 1.6fr) minmax(120px, 1fr) minmax(120px, 1fr);
}

.trip-form input,
.trip-form textarea {
  background: var(--bg);
  color: var(--text);
  border: 1.5px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
}
.trip-form input:focus,
.trip-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.trip-card-address,
.trip-card-line,
.trip-card-notes {
  font-size: 14px;
  color: var(--text-muted);
  margin: 6px 0;
  line-height: 1.5;
}

.trip-card-notes {
  font-style: italic;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bg-elev-2);
}

.trip-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.trip-card-tag {
  font-size: 12px;
  padding: 3px 10px;
  background: var(--bg-elev-2);
  color: var(--text);
  border-radius: 999px;
  text-transform: lowercase;
}

.trip-card-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--accent);
  text-decoration: underline;
  font-size: 14px;
}

@media (max-width: 768px) {
  .trip-form-row { grid-template-columns: 1fr; }
}

/* =============================================================
   INSIGHTS PANEL
   ============================================================= */

.insights-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.insights-card {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  border: 1px solid var(--bg-elev-2);
}

.insights-kid-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.insights-totals-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.insights-stat {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}

.insights-stat-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.insights-stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-top: 2px;
}

.insights-stat-delta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
}

.insights-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  margin-bottom: 8px;
}

.insights-row-label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-right: 4px;
}

.insights-pill {
  background: var(--bg-elev-2);
  color: var(--text);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
}

.insights-empty {
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  margin-top: 4px;
}

/* =============================================================
   READING LOG
   ============================================================= */

.reading-form {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  border: 1px solid var(--bg-elev-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.reading-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.reading-form input,
.reading-form select,
.reading-form textarea {
  background: var(--bg);
  color: var(--text);
  border: 1.5px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
}
.reading-form input:focus,
.reading-form select:focus,
.reading-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.reading-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.reading-card {
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 14px 16px;
  border: 1px solid transparent;
  position: relative;
}
.reading-card:hover { border-color: var(--bg-elev-2); }

.reading-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.reading-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.reading-card-toggle {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  border: 1px solid var(--bg-elev-2);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.reading-card-toggle.finished {
  background: var(--leaf);
  color: var(--bg);
  border-color: var(--leaf);
}
.reading-card-toggle:hover { background: var(--bg); }

.reading-card-meta {
  font-size: 13px;
  color: var(--text-muted);
}

.reading-card-notes {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bg-elev-2);
  line-height: 1.5;
}

.reading-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  border-radius: 4px;
}
.reading-card-delete:hover {
  background: rgba(196,69,54,0.2);
  color: var(--danger);
}

/* =============================================================
   PLANNER EXTRAS — copy-week button + block link rows
   ============================================================= */

.planner-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.btn-copy-week {
  background: var(--bg-elev);
  border: 1.5px solid var(--bg-elev-2);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn-copy-week:hover {
  background: var(--bg-elev-2);
  border-color: var(--accent);
}

/* Curriculum-fill button — same shape as copy-from-last-week, accent color */
.btn-fill-curriculum {
  background: var(--accent);
  border: 1.5px solid var(--accent);
  color: #000;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-left: 8px;
}
.btn-fill-curriculum:hover { filter: brightness(1.1); }
.btn-fill-curriculum:disabled { opacity: 0.5; cursor: not-allowed; }

/* Pace-row list inside the fill-from-curriculum modal */
.fill-pace-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.fill-pace-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
  background: rgba(0,0,0,0.18);
}
.fill-pace-header { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.fill-pace-info { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fill-pace-row .fill-pace-name { font-weight: 600; font-size: 14px; }
.fill-pace-row .fill-pace-meta { font-size: 12px; color: var(--text-muted); }
.fill-pace-row .fill-pace-current { font-size: 12px; color: var(--accent); }
.fill-pace-row .fill-pace-projection { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.edit-pace-autofill { flex-direction: row !important; gap: 8px; align-items: flex-start; cursor: pointer; }
.edit-pace-autofill input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.edit-pace-autofill strong { display: block; font-size: 13px; }
.edit-pace-autofill small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }

/* One-tap "fill every curriculum" action at the top of the fill modal */
.fill-all-btn {
  display: block; width: 100%; margin: 4px 0 12px; padding: 12px;
  border: 1px solid var(--accent); border-radius: 9px;
  background: var(--accent); color: #fff;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.fill-all-btn:disabled { opacity: .6; cursor: default; }
.fill-all-btn small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; opacity: .9; }

/* Inline lessons (chapter) editor inside a fill-pace row */
.fill-pace-chapters { margin-top: 10px; display: grid; gap: 6px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.fill-chapters-loading { font-size: 12px; color: var(--text-muted); margin: 4px 0; }
.fill-chapter-row { display: flex; gap: 6px; align-items: center; }
.fill-chapter-row input {
  font: inherit; font-size: 13px; min-height: 34px; padding: 4px 8px;
  border: 1px solid var(--border, #ddd); border-radius: 6px;
  background: var(--surface, #fff); color: var(--text, #222);
}
.fill-chapter-num { width: 58px; flex-shrink: 0; font-weight: 600; }
.fill-chapter-title { flex: 1; min-width: 0; }
.fill-chapter-save, .fill-chapter-del { flex-shrink: 0; min-width: 34px; }
.fill-chapter-add-row { border-top: 1px dashed var(--border, #ddd); padding-top: 8px; margin-top: 2px; }
.fill-pace-row .fill-pace-projection.is-on-track { color: #2e7d4f; }
.fill-pace-row .fill-pace-projection.is-behind { color: #b3542e; font-weight: 600; }

/* Semester pacing summary on the year view */
.year-pacing { margin: 4px 0 14px; }
.year-pacing-heading { font-size: 15px; margin: 0 0 8px; }
.year-pacing-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.year-pacing-card {
  padding: 10px 12px; border: 1px solid var(--border, #ddd); border-radius: 10px;
  background: var(--surface, #fff); display: grid; gap: 6px;
}
.year-pacing-name { font-weight: 600; font-size: 13px; }
.year-pacing-bar { height: 6px; border-radius: 3px; background: var(--border, #e5e0d5); overflow: hidden; }
.year-pacing-bar-fill { height: 100%; border-radius: 3px; background: var(--accent, #b98a3c); }
.year-pacing-card.is-on-track .year-pacing-bar-fill { background: #2e7d4f; }
.year-pacing-card.is-behind .year-pacing-bar-fill { background: #b3542e; }
.year-pacing-status { font-size: 12px; color: var(--text-muted); }
.year-pacing-card.is-behind .year-pacing-status { color: #b3542e; }
.fill-pace-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.fill-action {
  padding: 6px 10px; border-radius: 6px; font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; border: 1px solid rgba(255,255,255,0.10);
  background: var(--bg-elev); color: var(--text); white-space: nowrap;
}
.fill-action-primary { background: var(--accent); border-color: var(--accent); color: #000; }
.fill-action-primary:hover { filter: brightness(1.1); }
.fill-action-secondary:hover { background: var(--bg-elev-2); border-color: var(--accent); }
.fill-action-danger { color: var(--hh-ink-danger, #ffb4a8); border-color: rgba(196,69,54,0.4); }
.fill-action-danger:hover { background: rgba(196,69,54,0.15); border-color: #c44536; }
.fill-pace-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Inline edit form inside a pace row */
.fill-pace-edit-form {
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 12px;
}
.edit-pace-grid { display: flex; flex-direction: column; gap: 12px; }
.edit-pace-row { display: flex; flex-direction: column; gap: 4px; }
.edit-pace-row.edit-pace-inline { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.edit-pace-mini { flex: 1 1 90px; display: flex; flex-direction: column; gap: 3px; }
.edit-pace-label { font-size: 12px; color: var(--text); font-weight: 500; }
.edit-pace-pace-options { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.edit-pace-grid input[type="number"],
.edit-pace-grid input[type="time"],
.edit-pace-grid select {
  width: 100%; padding: 7px 8px; border-radius: 6px; border: 1px solid #444;
  background: rgba(0,0,0,0.3); color: var(--text); font-size: 13px; font-family: inherit;
}
.edit-pace-days { display: flex; gap: 4px; flex-wrap: wrap; }
.edit-pace-days .day-chip {
  padding: 5px 10px; min-width: 38px; font: inherit; font-size: 12px; cursor: pointer;
  background: rgba(0,0,0,0.3); border: 1px solid #444; border-radius: 14px; color: var(--text-muted);
}
.edit-pace-days .day-chip.is-active { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; }
.edit-pace-actions { display: flex; gap: 8px; justify-content: flex-end; }
.edit-pace-actions button {
  padding: 8px 14px; border-radius: 6px; font: inherit; font-size: 13px;
  cursor: pointer; border: 1px solid #555; background: var(--bg-elev-2); color: var(--text);
}
.edit-pace-actions .edit-pace-save { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }
.edit-pace-status { font-size: 12px; color: var(--text-muted); min-height: 16px; }
.edit-pace-status.error { color: var(--hh-ink-danger, #ffb4a8); }
.edit-pace-status.success { color: var(--hh-ink-success, #b8d99c); }
.fill-on-deck { margin-top: 4px; padding: 8px 10px; border-left: 3px solid #4f9a67; border-radius: 6px; background: rgba(79,154,103,.10); font-size: 12px; line-height: 1.45; }
.fill-on-deck span { color: var(--text-muted); }
.fill-action:disabled { opacity: .5; cursor: default; }
.fill-chapter-date { width: 138px; flex: 0 0 138px; }
.edit-schedule-mode-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.edit-schedule-mode-options > label { display: flex; gap: 7px; align-items: flex-start; padding: 9px; border: 1px solid #444; border-radius: 8px; cursor: pointer; }
.edit-schedule-mode-options input { margin-top: 3px; accent-color: var(--accent); }
.edit-schedule-mode-options span { display: flex; flex-direction: column; gap: 2px; }
.edit-schedule-mode-options small { color: var(--text-muted); line-height: 1.3; }

.curriculum-import-card { max-width: min(1180px, 96vw) !important; }
.curriculum-import-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.curriculum-import-source, .curriculum-import-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0; color: var(--text-muted); font-size: 13px; }
.curriculum-file-button { cursor: pointer; }
.curriculum-import-card textarea { width: 100%; resize: vertical; border: 1px solid var(--bg-elev-2); border-radius: 8px; background: var(--bg); color: var(--text); padding: 10px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.curriculum-import-table-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--bg-elev-2); border-radius: 9px; }
.curriculum-import-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 12px; }
.curriculum-import-table th { position: sticky; top: 0; z-index: 1; text-align: left; background: var(--bg-elev-2); color: var(--text-muted); padding: 8px; }
.curriculum-import-table td { padding: 5px; border-top: 1px solid var(--bg-elev-2); vertical-align: middle; }
.curriculum-import-table tr.has-error { background: rgba(196,69,54,.12); }
.curriculum-import-table tr.has-warning { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.curriculum-import-table input, .curriculum-import-table select { width: 100%; min-height: 34px; border: 1px solid #4b4037; border-radius: 5px; background: var(--bg); color: var(--text); padding: 5px 7px; }
.curriculum-import-table td:nth-child(1) { width: 42px; color: var(--text-muted); }
.curriculum-import-table td:nth-child(2) { width: 80px; }
.curriculum-import-table td:nth-child(3) { min-width: 190px; }
.curriculum-import-table td:nth-child(4) { min-width: 160px; }
.curriculum-import-table td:nth-child(5) { width: 135px; }
.curriculum-import-table td:nth-child(6) { width: 145px; }
.curriculum-import-table td:nth-child(7) { width: 90px; }
.curriculum-import-table td:nth-child(8) { width: 130px; }
.import-page-range { display: flex; align-items: center; gap: 3px; }
.import-page-range input { min-width: 52px; }
.import-check { color: var(--text-muted); }
.has-error .import-check { color: var(--hh-ink-danger, #ffb4a8); }
.has-warning .import-check { color: var(--hh-ink-warning, #f5c887); }

@media (max-width: 640px) {
  .edit-schedule-mode-options { grid-template-columns: 1fr; }
  .fill-chapter-row { flex-wrap: wrap; }
  .fill-chapter-date { width: 132px; flex-basis: 132px; }
}

/* Curriculum check-off buttons in today.html block-detail panel */
.detail-curriculum-actions { margin-bottom: 12px; }
.detail-curriculum-status {
  margin: 0 0 10px 0; padding: 8px 10px; border-radius: 6px; font-size: 13px;
  background: rgba(255,255,255,0.04); color: var(--text-muted);
}
.detail-curriculum-status.is-done { background: rgba(91,122,58,0.18); color: var(--hh-ink-success, #b8d99c); }
.detail-curriculum-status.is-in-progress { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--hh-ink-warning, #f5c887); }
.detail-curriculum-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-curriculum-done, .btn-curriculum-bump {
  flex: 1 1 140px;
  padding: 12px 14px; border-radius: 8px; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; border: 1px solid rgba(255,255,255,0.10);
  background: var(--bg-elev); color: var(--text);
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.btn-curriculum-done:hover { background: rgba(91,122,58,0.2); border-color: #82a850; }
.btn-curriculum-done.is-undo {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: var(--text-muted);
}
.btn-curriculum-done.is-undo:hover { background: rgba(255,255,255,0.08); border-color: var(--accent); color: var(--text); }

/* Activity history list inside the block-detail panel.
 * Shows past photos / dictations / notes the parent has logged against
 * this block. Each entry can be deleted in place. */
.detail-activity-section {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--bg-elev-2);
}
.detail-activity-heading { font-size: 14px; margin: 0 0 10px 0; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.detail-activity-list { display: flex; flex-direction: column; gap: 8px; }
.detail-activity-empty { font-size: 13px; color: var(--text-muted); padding: 8px 0; font-style: italic; }
.detail-activity-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.detail-activity-icon { font-size: 18px; flex-shrink: 0; line-height: 1.2; }
.detail-activity-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.detail-activity-when { font-size: 11px; color: var(--text-muted); }
.detail-activity-text { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.detail-activity-meta { font-size: 11px; color: var(--text-muted); }
.detail-activity-actions { flex-shrink: 0; display: flex; gap: 6px; }
.detail-activity-actions button {
  padding: 6px 8px; font-size: 11px; font-family: inherit; cursor: pointer;
  background: transparent; color: var(--text-muted); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
}
.detail-activity-actions button:hover { color: var(--text); border-color: var(--accent); }
.detail-activity-actions .activity-delete:hover { color: var(--hh-ink-danger, #ffb4a8); border-color: rgba(196,69,54,0.4); }
/* Photo thumbnails inside the activity history row */
.detail-activity-photos {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;
}
.detail-activity-photo {
  width: 56px; height: 56px; object-fit: cover; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Feedback button + modal in the global tab bar */
.tab-bar-feedback { background: transparent; border: none; font-family: inherit; cursor: pointer; }
.tab-bar-feedback .tab-bar-icon { color: var(--hh-ink-warning, #f5c887); }   /* warm yellow ❗ — visible without screaming */

.tab-feedback-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.tab-feedback-modal.open { opacity: 1; pointer-events: auto; }
.tab-feedback-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.7);
}
.tab-feedback-card {
  position: relative; z-index: 1; width: 100%; max-width: 520px;
  background: var(--bg); border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 10px;
  max-height: 90vh; overflow-y: auto;
}
.tab-feedback-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tab-feedback-title { font-weight: 700; font-size: 16px; color: var(--text); }
.tab-feedback-blurb { font-size: 13px; color: var(--text-muted); margin: 0; }
.tab-feedback-screen { font-size: 11px; color: var(--text-muted); margin: 0; padding: 6px 8px; background: rgba(0,0,0,0.18); border-radius: 6px; word-break: break-all; }
.tab-feedback-textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid #444; background: rgba(0,0,0,0.3); color: var(--text);
  font-size: 14px; font-family: inherit; resize: vertical; min-height: 120px;
}
.tab-feedback-actions { display: flex; gap: 10px; justify-content: flex-end; }
.tab-feedback-actions button {
  padding: 10px 18px; border-radius: 8px; cursor: pointer;
  border: 1px solid #555; background: var(--bg-elev-2); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600;
}
.tab-feedback-submit { background: var(--accent) !important; border-color: var(--accent) !important; color: #000 !important; }
.tab-feedback-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.tab-feedback-status { font-size: 12px; color: var(--text-muted); min-height: 16px; margin: 0; }
.tab-feedback-status.error { color: var(--hh-ink-danger, #ffb4a8); }
.tab-feedback-status.success { color: var(--hh-ink-success, #b8d99c); }

/* Logged-activity ✓ badge on today.html block list + radial clock */
.today-list-logged {
  margin-left: auto;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(91,122,58,0.25); color: var(--hh-ink-success, #b8d99c);
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.block-logged-badge-bg { fill: rgba(91,122,58,0.95); stroke: var(--bg); stroke-width: 1.5; }
.block-logged-badge    { fill: #fff; font-size: 10px; font-weight: 700; pointer-events: none; }
.btn-curriculum-bump:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); }
.btn-curriculum-done:active, .btn-curriculum-bump:active { transform: scale(0.97); }
.btn-curriculum-done:disabled, .btn-curriculum-bump:disabled { opacity: 0.5; cursor: not-allowed; }

/* Edit-block button + inline form (today.html detail panel) */
.btn-edit-block {
  margin-top: 12px;
  width: 100%; padding: 10px;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.btn-edit-block:hover { background: var(--bg-elev-2); border-color: var(--accent); }
.detail-edit-form {
  margin-top: 10px; padding: 12px;
  background: rgba(0,0,0,0.18); border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 12px;
}
.edit-block-grid { display: flex; flex-direction: column; gap: 10px; }
.edit-block-row { display: flex; flex-direction: column; gap: 4px; }
.edit-block-row.edit-block-inline { flex-direction: row; gap: 10px; }
.edit-block-mini { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.edit-block-label { font-size: 12px; color: var(--text); font-weight: 500; }
.detail-edit-form input[type="text"],
.detail-edit-form input[type="time"],
.detail-edit-form input[type="number"],
.detail-edit-form textarea {
  padding: 8px 10px; border-radius: 6px; border: 1px solid #444;
  background: rgba(0,0,0,0.3); color: var(--text);
  font-size: 14px; font-family: inherit; width: 100%;
}
.detail-edit-form textarea { resize: vertical; min-height: 60px; }
.edit-block-scope { gap: 6px; }
.edit-block-scope label { display: flex; gap: 8px; font-size: 13px; color: var(--text); align-items: center; cursor: pointer; }
.edit-block-actions { display: flex; gap: 8px; justify-content: flex-end; }
.edit-block-actions button {
  padding: 8px 14px; border-radius: 6px; font: inherit; font-size: 13px;
  cursor: pointer; border: 1px solid #555; background: var(--bg-elev-2); color: var(--text);
}
.edit-block-actions .btn-primary { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }
.edit-block-status { font-size: 12px; color: var(--text-muted); min-height: 16px; margin: 0; }
.edit-block-status.error { color: var(--hh-ink-danger, #ffb4a8); }
.edit-block-status.success { color: var(--hh-ink-success, #b8d99c); }

.block-links-field {
  border: 1.5px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.block-links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.block-link-row {
  display: grid;
  grid-template-columns: 60px minmax(120px, 1.4fr) minmax(180px, 2fr) 28px;
  gap: 8px;
}

.block-link-row input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
}

.block-link-remove {
  background: transparent;
  border: 1px solid var(--bg-elev-2);
  color: var(--text-dim);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.block-link-remove:hover {
  background: rgba(196,69,54,0.2);
  color: var(--danger);
  border-color: var(--danger);
}

.btn-link-add {
  background: transparent;
  border: 1px dashed var(--bg-elev-2);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.btn-link-add:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}

/* ---- Today date nav ---- */

.today-date-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Fixed width keeps the arrows from shuffling as the date string changes
   length; centering stops the gap from reading as a break in the control. */
.today-date-nav .today-subtitle {
  margin: 0;
  min-width: 210px;
  text-align: center;
}

.activity-delete-btn {
  color: var(--danger) !important;
}

.trip-visited-btn {
  display: inline-block;
  margin-top: 10px;
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--bg-elev-2);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.trip-visited-btn:hover {
  border-color: var(--accent);
  background: var(--bg);
}

.trip-card-visited {
  color: var(--leaf) !important;
  font-weight: 600;
}

/* =============================================================
   ONBOARDING WIZARD + INVITE CARD
   ============================================================= */

.onboarding-card {
  max-width: 640px;
}

.onboarding-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  margin-top: 12px;
  min-width: 0;
}

.onboarding-form .block-field,
.onboarding-form .wizard-section,
.onboarding-form .wizard-kid-row { min-width: 0; }

.wizard-section {
  border: 1px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wizard-section legend {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  font-weight: 700;
  padding: 0 6px;
}

.wizard-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wizard-kid-row > .wizard-row:first-child {
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) auto;
}

.wizard-kids {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wizard-kid-row {
  border: 1px dashed var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onboarding-form input,
.onboarding-form select,
.onboarding-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1.5px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
}

.onboarding-form input:focus,
.onboarding-form select:focus,
.onboarding-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
}

.wizard-remove {
  align-self: flex-end;
}

@media (max-width: 768px) {
  .wizard-row,
  .wizard-kid-row > .wizard-row:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wizard-row > .block-field-narrow { grid-column: span 1; }
}

@media (max-width: 480px) {
  .wizard-row,
  .wizard-kid-row > .wizard-row:first-child { grid-template-columns: minmax(0, 1fr); }
  .wizard-section { padding: 12px; }
  .onboarding-actions { flex-direction: column; align-items: stretch; }
}

/* =============================================================
   INVITATIONS UI
   ============================================================= */

.invite-form {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  border: 1px solid var(--bg-elev-2);
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.invite-form-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) minmax(180px, 1.4fr);
  gap: 12px;
}

.invite-form input,
.invite-form select {
  background: var(--bg);
  color: var(--text);
  border: 1.5px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
}

.invite-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 768px) {
  .invite-form-row { grid-template-columns: 1fr; }
}

/* =============================================================
   BOTTOM TAB BAR — primary navigation on parent-facing pages.
   Lives in the thumb zone on mobile; hidden on desktop where it
   would just be wasted real estate (header still has user button).
   ============================================================= */

body.has-tab-bar {
  /* Reserve bottom space for the tab bar PLUS the schedule toolbar
     (kid toggle + Schedule/Week/Month) that sits just above it on
     the home view. Tab-bar's actual height = 8px top pad + 56px
     min content + 8px bottom pad + safe-area = 72 + safe-area. */
  padding-bottom: calc(72px + 52px + env(safe-area-inset-bottom));
}

.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: rgba(26, 20, 16, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--bg-elev-2);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.tab-bar-item:hover { background: var(--bg-elev); color: var(--text); }
.tab-bar-item.active { color: var(--accent); }
.tab-bar-item.active .tab-bar-icon { transform: translateY(-1px); }

.tab-bar-icon {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.12s ease;
}
.tab-bar-label {
  font-size: 11px;
  letter-spacing: 0.2px;
}
.tab-bar-desktop-only { display: none; }

@media (min-width: 769px) {
  .tab-bar {
    grid-template-columns: repeat(11, minmax(0, 1fr));
    padding-left: 2px;
    padding-right: 2px;
  }
  .tab-bar-item {
    min-width: 0;
    min-height: 52px;
    gap: 2px;
    padding: 4px 2px;
  }
  .tab-bar-icon { font-size: 20px; }
  .tab-bar-label { font-size: 10px; letter-spacing: 0; }
  .tab-bar-desktop-only { display: flex; }
  .tab-bar-mobile-only { display: none; }
}

/* Mobile Add hub — four curriculum-connected destinations in the thumb zone. */
.tab-resource-picker[hidden] { display: none; }
.tab-resource-picker {
  position: fixed;
  inset: 0;
  z-index: 165;
  pointer-events: none;
}
.tab-resource-picker-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(0,0,0,0.58);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 180ms ease;
}
.tab-resource-picker-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid var(--bg-elev-2);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  color: var(--text);
  background: #17120f;
  box-shadow: 0 -18px 45px rgba(0,0,0,0.42);
  transform: translateY(100%);
  transition: transform 200ms ease;
  pointer-events: auto;
}
.tab-resource-picker.open .tab-resource-picker-backdrop { opacity: 1; }
.tab-resource-picker.open .tab-resource-picker-panel { transform: translateY(0); }
.tab-resource-picker-panel header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tab-resource-picker-panel header p { margin: 0 0 3px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tab-resource-picker-panel h2 { margin: 0; font-size: 19px; }
.tab-resource-picker-panel nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 17px; }
.tab-resource-picker-panel nav button {
  min-width: 0;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 3px;
  border: 1px solid var(--bg-elev-2);
  border-radius: 12px;
  color: var(--text);
  background: var(--bg-elev);
  font-family:inherit; font-weight:700; font-size:11px; line-height:1;
}
.tab-resource-picker-panel nav button span { font-size: 24px; }

/* =============================================================
   RECORDS, RECOVERY, PRINT/TV, AND STUDENT CHECKLIST
   ============================================================= */

.week-header-actions { display: none; }
.week-tool-button,
.records-print-week,
.records-panel button,
.schedule-recovery button {
  border: 1px solid var(--bg-elev-2);
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--text);
  padding: 9px 12px;
  font-family:inherit; font-weight:650; font-size:13px; line-height:1.1;
  cursor: pointer;
}
.records-panel button:hover,
.week-tool-button:hover,
.schedule-recovery button:hover { border-color: var(--accent); }
.records-panel button:disabled,
.schedule-recovery button:disabled { opacity: .5; cursor: not-allowed; }

.records-page { min-height: 100vh; background: var(--bg); color: var(--text); }
.records-shell { width: min(1320px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 110px; }
.records-header { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 20px; }
.records-header h1 { margin: 4px 0 6px; font-size: clamp(28px, 4vw, 46px); }
.records-header p { margin: 0; color: var(--text-muted); }
.records-back { color: var(--accent); text-decoration: none; font-weight: 700; }
.records-eyebrow { color: var(--accent) !important; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; }
.records-print-week { white-space: nowrap; background: var(--accent); border-color: var(--accent); color: white; }
.records-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 6px; margin-bottom: 16px; border: 1px solid var(--bg-elev-2); border-radius: 14px; background: var(--bg-elev); }
.records-tabs button { white-space: nowrap; flex: 1; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); padding: 11px 14px; font-weight: 700; cursor: pointer; }
.records-tabs button.active { color: white; background: var(--accent); }
.records-panel { border: 1px solid var(--bg-elev-2); border-radius: 16px; background: rgba(32, 25, 20, .78); padding: 22px; }
.records-panel-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 18px; }
.records-panel-heading h2 { margin: 0 0 5px; }
.records-panel-heading p, .records-help { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: 0; }
.records-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.records-page input,
.records-page select,
.records-page textarea,
.schedule-recovery input,
.schedule-recovery select {
  border: 1px solid var(--bg-elev-2);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  padding: 9px 10px;
  font: inherit;
}
.records-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 16px; }
.records-summary-card { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--bg-elev-2); border-radius: 12px; background: var(--bg); }
.records-summary-card strong { font-size: 16px; color: var(--accent); }
.records-summary-card small { color: var(--text-muted); }
.records-table-wrap { overflow: auto; }
.records-table { width: 100%; border-collapse: collapse; }
.records-table th, .records-table td { padding: 11px 10px; border-bottom: 1px solid var(--bg-elev-2); text-align: left; white-space: nowrap; }
.records-table th { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.attendance-badge { display: inline-flex; border-radius: 999px; padding: 4px 8px; background: rgba(255,255,255,.08); text-transform: capitalize; font-size: 12px; }
.attendance-present { background: rgba(91,122,58,.3); color: var(--hh-ink-success, #b9df8f); }
.attendance-partial { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--hh-ink-warning, #f5c887); }
.attendance-absent { background: rgba(180,60,60,.25); color: var(--hh-ink-danger, #ffaaaa); }
.attendance-not_school { color: var(--text-muted); }
.records-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.records-card { display: grid; align-content: start; gap: 12px; border: 1px solid var(--bg-elev-2); border-radius: 13px; background: var(--bg); padding: 17px; }
.records-card h3 { margin: 0; }
.records-card label, .theme-builder > label { display: grid; gap: 6px; color: var(--text-muted); font-size: 13px; }
.records-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.records-check { display: flex !important; align-items: start; gap: 8px !important; }
.school-days { border: 0; padding: 0; }
.school-days legend { margin-bottom: 7px; color: var(--text-muted); font-size: 13px; }
.school-days div, .theme-kids { display: flex; gap: 7px; flex-wrap: wrap; }
.school-days label, .theme-kids label { display: flex; align-items: center; gap: 5px; border: 1px solid var(--bg-elev-2); border-radius: 8px; padding: 6px 8px; }
.calendar-new-link { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.calendar-new-link:focus { outline: 2px solid color-mix(in srgb, var(--accent) 65%, white); outline-offset: 2px; }
.calendar-new-link p { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.calendar-new-link small { color: var(--text-muted); line-height: 1.4; }
.calendar-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.calendar-copy-row input { min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.outbound-calendar-card { gap: 13px; }
.outbound-provider-section { padding-top: 2px; }
.calendar-share, .upcoming-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; border-top: 1px solid var(--bg-elev-2); padding: 10px 0; }
.calendar-share span { display: grid; gap: 3px; }
.calendar-share small, .upcoming-item time { color: var(--text-muted); font-size: 12px; }
.external-calendar-card { grid-row: span 2; }
.external-calendar-card input[type="color"] { width: 100%; height: 42px; padding: 4px; cursor: pointer; }
.calendar-readonly-note {
  display: flex;
  align-items: start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, #5b7a3a 55%, var(--bg-elev-2));
  border-radius: 10px;
  background: color-mix(in srgb, #5b7a3a 14%, var(--bg));
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.calendar-readonly-note > span:last-child { display: grid; gap: 2px; }
.calendar-readonly-note strong { color: var(--text); font-size: 13px; }
.calendar-connect-section { display: grid; gap: 10px; }
.calendar-connect-section > h4,
.calendar-provider-guide > h4,
.connected-calendars-title { margin: 0; color: var(--text); font-size: 14px; }
.calendar-connect-section > h4 { display: flex; align-items: center; gap: 8px; }
.calendar-connect-section > h4 > span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #17120f;
  font-weight: 900;
}
.calendar-provider-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.calendar-provider-picker button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 7px;
  border: 1px solid var(--bg-elev-2);
  background: var(--bg-elev);
  color: var(--text-muted);
}
.calendar-provider-picker button[aria-selected="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 17%, var(--bg));
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.calendar-provider-picker b {
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: #fff;
  color: #222;
  font-size: 13px;
  font-weight: 900;
}
.calendar-provider-picker .provider-google { color: #4285f4; }
.calendar-provider-picker .provider-apple { background: #111; color: #fff; }
.calendar-provider-picker .provider-outlook { background: #1673c9; color: #fff; }
.calendar-provider-guide {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--bg-elev-2);
  border-radius: 11px;
  background: var(--bg-elev);
}
.calendar-provider-guide[hidden] { display: none; }
.calendar-provider-guide ol { display: grid; gap: 7px; margin: 0; padding-left: 22px; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.calendar-provider-guide li::marker { color: var(--accent); font-weight: 800; }
.calendar-provider-guide strong { color: var(--text); }
.calendar-device-note { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.calendar-provider-link {
  justify-self: start;
  border-radius: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg));
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.calendar-provider-link:hover { background: color-mix(in srgb, var(--accent) 24%, var(--bg)); }
.calendar-paste-section { padding-top: 2px; }
.connected-calendars-title { padding-top: 3px; border-top: 1px solid var(--bg-elev-2); }
.calendar-link-help { border-top: 1px solid var(--bg-elev-2); padding-top: 10px; color: var(--text-muted); font-size: 12px; }
.calendar-link-help summary { color: var(--accent); font-weight: 700; cursor: pointer; }
.calendar-link-help p { margin: 8px 0 0; line-height: 1.45; }
.external-calendar-sources { display: grid; gap: 7px; }
.external-calendar-source {
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--bg-elev-2);
}
.external-calendar-source > i { width: 5px; align-self: stretch; border-radius: 999px; background: var(--source-color); }
.external-calendar-source > span { min-width: 0; display: grid; gap: 3px; }
.external-calendar-source small { overflow: hidden; color: var(--text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.external-calendar-source > div { display: flex; gap: 5px; }
.external-calendar-source button { padding: 6px 8px; font-size: 11px; }
.upcoming-card { margin-top: 14px; }
.upcoming-item { justify-content: start; }
.upcoming-item time { width: 130px; flex: 0 0 auto; }
.portfolio-actions { display: flex; justify-content: end; gap: 8px; margin-bottom: 14px; }
.portfolio-preview { max-width: 920px; margin: auto; padding: clamp(20px, 4vw, 50px); border-radius: 12px; background: #fffdf8; color: #251b15; min-height: 300px; }
.portfolio-cover { text-align: center; padding: 30px 0 40px; border-bottom: 2px solid #d97706; }
.portfolio-cover p { color: #9b5704; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
.portfolio-cover h2 { font-size: 38px; margin: 8px; }
.portfolio-cover small { display: block; margin-top: 8px; }
.portfolio-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 24px 0; }
.portfolio-summary span { text-align: center; background: #f2e9dc; border-radius: 8px; padding: 10px; }
.portfolio-summary strong { display: block; color: #9b5704; font-size: 18px; }
.portfolio-learning { list-style: none; padding: 0; }
.portfolio-learning li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid #eadfce; }
.portfolio-learning time { color: #76675e; font-size: 13px; }
.portfolio-learning p { margin: 3px 0; }
.theme-builder { display: grid; grid-template-columns: minmax(260px, 1fr) 160px auto; align-items: end; gap: 12px; border: 1px solid var(--bg-elev-2); background: var(--bg); padding: 16px; border-radius: 13px; }
.theme-builder fieldset { border: 0; grid-column: 1 / -1; padding: 0; }
.theme-builder button { background: var(--accent); border-color: var(--accent); color: white; }
.records-status { min-height: 30px; padding: 10px 0; color: var(--text-muted); }
.theme-result { border: 1px solid var(--accent); border-radius: 14px; padding: 20px; background: var(--bg); }
.theme-result > header p { color: var(--accent); text-transform: uppercase; font-size: 11px; font-weight: 800; letter-spacing: .1em; margin: 0; }
.theme-result > header h3 { font-size: 28px; margin: 5px 0; }
.theme-result blockquote { margin: 16px 0; padding: 12px 16px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 18px; }
.theme-resource-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; margin: 16px 0; }
.theme-resource-group h4 { grid-column: 1 / -1; margin: 0; }
.theme-resource-group article { border: 1px solid var(--bg-elev-2); border-radius: 10px; padding: 12px; }
.theme-resource-group article small { display: block; color: var(--text-muted); }
.theme-resource-group article p { font-size: 13px; }
.theme-workshop-guide { margin: 10px 0; padding: 9px 10px; border: 1px solid var(--bg-elev-2); border-radius: 8px; font-size: 12px; }
.theme-workshop-guide summary { color: var(--accent); font-weight: 750; cursor: pointer; }
.theme-workshop-guide h5 { margin: 10px 0 4px; color: var(--text); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.theme-workshop-guide ul, .theme-workshop-guide ol { margin: 0; padding-left: 20px; }
.theme-workshop-guide button { width: 100%; margin-top: 10px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--bg-elev-2)); border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); font-family:inherit; font-weight:700; font-size:11px; line-height:1.2; cursor: pointer; }
.theme-links { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-links a { color: var(--accent); font-size: 12px; }
.theme-schedule { margin: 18px 0; }
.theme-schedule label { display: flex; gap: 10px; align-items: start; border-top: 1px solid var(--bg-elev-2); padding: 10px 0; }
.theme-schedule label span { display: grid; gap: 3px; }
.theme-schedule small { color: var(--text-muted); }
.saved-theme-packs { margin-top: 20px; }
#theme-history { display: flex; gap: 8px; flex-wrap: wrap; }
#theme-history button { display: grid; gap: 3px; text-align: left; }
#theme-history span { color: var(--text-muted); font-size: 11px; }
.student-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.student-card { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--bg-elev-2); border-radius: 13px; padding: 16px; background: var(--bg); }
.student-card > div { display: flex; gap: 10px; align-items: center; }
.student-card > div > span:last-child { display: grid; }
.student-card small { color: var(--text-muted); }
.student-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: white; font-weight: 800; }
.student-card label { display: grid; gap: 4px; color: var(--text-muted); font-size: 12px; }
.student-card button { grid-column: 1 / -1; background: var(--accent); border-color: var(--accent); color: white; }
.submissions-card { margin-top: 14px; }
.submission-row { padding: 12px 0; border-top: 1px solid var(--bg-elev-2); }
.submission-row header { display: flex; justify-content: space-between; gap: 12px; }
.submission-row header span, .submission-row small { color: var(--text-muted); font-size: 12px; }
.submission-row textarea { width: 100%; margin: 8px 0; }
.submission-row > div { display: flex; gap: 8px; justify-content: end; }
.records-global-status { position: fixed; bottom: 82px; left: 50%; translate: -50%; z-index: 70; min-height: 0; margin: 0; padding: 0; }
.records-global-status:not(:empty) { padding: 10px 16px; border: 1px solid var(--leaf); border-radius: 999px; background: var(--bg); box-shadow: 0 6px 28px #0008; color: var(--hh-ink-success, #b9df8f); }
.records-global-status.error:not(:empty) { border-color: #b43c3c; color: var(--hh-ink-danger, #ffaaaa); }

.schedule-recovery { position: fixed; inset: 0; z-index: 250; pointer-events: none; }
.schedule-recovery-backdrop { position: absolute; inset: 0; width: 100%; border: 0 !important; border-radius: 0 !important; background: #0009 !important; opacity: 0; transition: opacity .18s; }
.schedule-recovery-panel { position: absolute; top: 0; right: 0; width: min(560px, 100%); height: 100%; overflow-y: auto; padding: 24px; background: var(--bg); border-left: 1px solid var(--bg-elev-2); translate: 100%; transition: translate .18s; }
.schedule-recovery.open { pointer-events: auto; }
.schedule-recovery.open .schedule-recovery-backdrop { opacity: 1; }
.schedule-recovery.open .schedule-recovery-panel { translate: 0; }
.schedule-recovery-panel > header { display: flex; justify-content: space-between; align-items: start; }
.schedule-recovery-panel > header p { color: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 800; margin: 0; }
.schedule-recovery-panel h2 { margin: 4px 0; font-size: 32px; }
.schedule-recovery-intro { color: var(--text-muted); line-height: 1.5; }
.schedule-recovery-form { display: grid; gap: 12px; margin: 20px 0; }
.schedule-recovery-form > label { display: grid; gap: 5px; color: var(--text-muted); font-size: 13px; }
.schedule-recovery fieldset { border: 1px solid var(--bg-elev-2); border-radius: 10px; }
#recovery-kids { display: flex; gap: 8px; flex-wrap: wrap; }
#recovery-kids label { display: flex; align-items: center; gap: 5px; }
.recovery-preview { min-height: 100px; border: 1px solid var(--bg-elev-2); border-radius: 11px; padding: 13px; }
.recovery-preview header { display: flex; justify-content: space-between; }
.recovery-preview ol { max-height: 280px; overflow-y: auto; padding-left: 22px; }
.recovery-preview li span { display: grid; padding: 5px; }
.recovery-preview small, .recovery-projection { color: var(--text-muted); }
.schedule-recovery-panel > footer { display: flex; justify-content: end; gap: 8px; margin-top: 12px; }
#recovery-apply-button { background: var(--accent); border-color: var(--accent); color: white; }
.recovery-success { display: grid; gap: 5px; color: var(--hh-ink-success, #b9df8f); }
.recovery-recent { margin-top: 22px; }
.recovery-recent > div { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--bg-elev-2); padding: 10px 0; }
.recovery-recent span { display: grid; }
.recovery-recent small { color: var(--text-muted); }

.student-mode-page { background: #15110e; color: #f8efe4; }
.student-checklist-shell { width: min(900px, calc(100% - 24px)); margin: 0 auto; padding: 24px 0 70px; }
.student-checklist-header { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.student-checklist-header p { color: #f59e0b; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; margin: 0; }
.student-checklist-header h1 { margin: 4px 0; font-size: clamp(30px, 6vw, 48px); }
.student-checklist-header span { color: #b9aa9c; }
.student-checklist-header button { border: 1px solid #48382b; border-radius: 10px; background: #211a15; color: #b9aa9c; padding: 9px 11px; }
.student-progress { margin: 22px 0; color: #d9c8b8; }
.student-progress > div { height: 9px; margin-top: 8px; border-radius: 99px; overflow: hidden; background: #30251d; }
.student-progress i { display: block; height: 100%; width: 0; background: #77a34e; transition: width .3s; }
.student-on-deck { margin: 0 0 18px; padding: 14px; border: 1px solid #4d6b34; border-radius: 15px; background: #1d2418; }
.student-on-deck > p { margin: 0 0 10px; color: #a9c78f; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.student-on-deck > div { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.student-on-deck article { padding: 12px; border-radius: 10px; background: #151b12; }
.student-on-deck article strong { color: #d6e9c4; }
.student-on-deck article p { margin: 6px 0 0; color: #d9c8b8; }
.student-on-deck article p:last-child { color: #9d948b; }
.student-assignment-list { display: grid; gap: 12px; list-style: none; padding: 0; }
.student-assignment { display: grid; grid-template-columns: 56px 1fr; gap: 15px; border: 1px solid #403126; border-radius: 15px; background: #211a15; padding: 17px; }
.student-assignment.done { opacity: .7; border-color: #4d6b34; }
.student-assignment.waiting { border-color: #9b6417; }
.student-assignment-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: #34271e; font-size: 23px; }
.student-assignment.done .student-assignment-icon { background: #395126; color: #cbe5a9; }
.student-assignment-body > header { display: flex; justify-content: space-between; color: #b9aa9c; font-size: 12px; text-transform: capitalize; }
.student-assignment h2 { margin: 7px 0 3px; font-size: 22px; }
.student-curriculum { color: #f3ad41; margin: 0; font-size: 13px; }
.student-assignment details { margin: 10px 0; color: #d9c8b8; }
.student-assignment details p { white-space: pre-wrap; }
.student-submit-form { display: grid; gap: 10px; margin-top: 13px; padding-top: 13px; border-top: 1px solid #403126; }
.student-submit-form > label { display: grid; gap: 5px; }
.student-submit-form label span { color: #8e8075; font-size: 12px; }
.student-submit-form textarea, .student-submit-form input { border: 1px solid #48382b; border-radius: 9px; background: #15110e; color: #f8efe4; padding: 10px; font: inherit; }
.student-submit-row { display: flex; gap: 9px; align-items: end; flex-wrap: wrap; }
.student-submit-row > label { display: grid; gap: 4px; color: #b9aa9c; font-size: 12px; }
.student-file-label { position: relative; padding: 11px; border: 1px dashed #66503e; border-radius: 9px; cursor: pointer; }
.student-file-label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.student-submit-row button { margin-left: auto; border: 0; border-radius: 9px; padding: 12px 16px; background: #d97706; color: white; font-weight: 800; }
.student-upload-status { min-height: 18px; color: #b9aa9c; margin: 0; font-size: 12px; }
.student-upload-status.error { color: #ffaaaa; }
.student-parent-note { border-left: 3px solid #d97706; padding: 8px 11px; background: #2e2219; }
.student-submission-state { color: #f3ad41; font-weight: 700; }
.student-submission-state.approved { color: #b9df8f; }
.student-no-work { text-align: center; padding: 60px 20px; border: 1px solid #403126; border-radius: 15px; }
.student-no-work span { font-size: 48px; }
.student-no-work strong { display: block; margin-top: 10px; font-size: 20px; }
.student-device-note { color: #8e8075; font-size: 12px; text-align: center; margin-top: 24px; }
.student-devices-card { margin-top: 18px; }
.student-device-row, .work-sample-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #403126; }
.student-device-row:last-child, .work-sample-list li:last-child { border-bottom: 0; }
.student-device-row span, .work-sample-list span { display: grid; gap: 3px; }
.student-device-row small, .work-sample-list small { color: #8e8075; }
.student-device-row button, .work-sample-list button, .submission-files button { border: 1px solid #5c4635; border-radius: 8px; background: #2c2119; color: #f2dfcc; padding: 8px 11px; }
.work-sample-list { list-style: none; padding: 0; }
.submission-files { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }

@media (min-width: 900px) {
  .week-header-actions { display: flex; align-items: center; gap: 6px; }
  body.tv-calendar-mode .tab-bar,
  body.tv-calendar-mode .schedule-toolbar,
  body.tv-calendar-mode .calendar-add-event-fab { display: none !important; }
  body.tv-calendar-mode .week-header-actions {
    display: flex !important;
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 80;
  }
  body.tv-calendar-mode .week-header-actions > * { display: none !important; }
  body.tv-calendar-mode .week-header-actions #week-tv {
    display: inline-flex !important;
    background: rgba(26, 20, 16, .86);
    backdrop-filter: blur(8px);
  }
  body.tv-calendar-mode { padding-bottom: 0 !important; font-size: 1.12rem; }
  body.tv-calendar-mode .week-calendar-desktop { min-height: calc(100vh - 70px); }
}

@media (max-width: 760px) {
  .records-shell { width: min(100% - 20px, 1320px); padding-top: 16px; }
  .records-header, .records-panel-heading { display: grid; align-items: start; }
  .records-print-week { display: none; }
  .records-tabs button { flex: 0 0 auto; }
  .records-panel { padding: 13px; }
  .records-two-col, .records-inline, .theme-builder { grid-template-columns: 1fr; }
  .calendar-copy-row { grid-template-columns: 1fr; }
  .calendar-copy-row button { width: 100%; }
  .portfolio-summary { grid-template-columns: 1fr 1fr; }
  .portfolio-learning li { grid-template-columns: 85px 1fr; }
  .student-assignment { grid-template-columns: 42px 1fr; padding: 13px; gap: 10px; }
  .student-assignment-icon { width: 38px; height: 38px; }
  .student-submit-row button { width: 100%; margin: 0; }
}

@media print {
  @page { margin: .35in; size: landscape; }
  body { background: white !important; color: black !important; padding: 0 !important; }
  .no-print, .tab-bar, .schedule-toolbar, .calendar-add-event-fab, .weekly-resources, .schedule-recovery,
  .records-tabs, .records-global-status, .today-footer { display: none !important; }
  .dashboard-shell, .dashboard-main, .week-view-section, .week-grid { width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
  .week-calendar-desktop { display: flex !important; min-height: 6.7in !important; border-color: #bbb !important; background: white !important; color: black !important; }
  .week-calendar-desktop * { color: black !important; border-color: #ccc !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .week-list-mobile { display: none !important; }
  .records-shell { width: 100%; padding: 0; }
  .records-panel { border: 0; padding: 0; background: white; }
  .records-panel[hidden] { display: none !important; }
  .records-table th, .records-table td { color: black; border-color: #bbb; }
  .portfolio-preview { max-width: none; min-height: 0; padding: 0; }
}


/* ---- Side drawer used by the More tab ---- */
.tab-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.tab-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: auto;
}
.tab-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 92vw);
  background: var(--bg);
  border-left: 1px solid var(--bg-elev-2);
  box-shadow: var(--shadow);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  pointer-events: auto;
  overflow-y: auto;
  padding: 20px 22px calc(28px + env(safe-area-inset-bottom));
}
.tab-drawer.open .tab-drawer-backdrop { opacity: 1; }
.tab-drawer.open .tab-drawer-panel    { transform: translateX(0); }

.tab-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bg-elev);
  margin-bottom: 18px;
}
.tab-drawer-title {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.tab-drawer-section {
  margin-bottom: 24px;
}
.tab-drawer-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-dim);
  margin-bottom: 10px;
  font-weight: 600;
}
.tab-drawer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tab-drawer-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;          /* 44pt min touch target */
  min-height: 44px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 16px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.tab-drawer-link:hover {
  background: var(--bg-elev);
  border-color: var(--bg-elev-2);
}
.tab-drawer-tutorial, .tab-drawer-guided-tour, .tab-drawer-recovery { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tab-drawer-badge { flex: 0 0 auto; border-radius: 999px; padding: 3px 7px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--hh-ink-highlight, #f3ad41); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tab-drawer-guided-tour { border-color: color-mix(in srgb, var(--accent) 28%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* =============================================================
   CROSS-PAGE GUIDED TOUR
   ============================================================= */
.guided-tour-root[hidden], .guided-tour-spotlight[hidden] { display: none !important; }
.guided-tour-root { position: fixed; inset: 0; z-index: 5000; pointer-events: none; }
.guided-tour-spotlight {
  position: fixed;
  border: 3px solid #ffad2f;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(9, 6, 4, .72), 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent), 0 10px 34px rgba(0, 0, 0, .42);
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease;
}
.guided-tour-bubble {
  position: fixed;
  width: min(390px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  pointer-events: auto;
  border: 1px solid #bd6c10;
  border-radius: 18px;
  background: linear-gradient(150deg, #2a1c13, #17110d 78%);
  color: #f8efe4;
  padding: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 173, 47, .12);
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition: opacity .16s ease, transform .16s ease, left .22s ease, top .22s ease;
}
.guided-tour-root.open .guided-tour-bubble { opacity: 1; transform: translateY(0) scale(1); }
.guided-tour-progress { height: 4px; overflow: hidden; margin: -2px 0 13px; border-radius: 999px; background: #493225; }
.guided-tour-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d97706, #ffb545); transition: width .22s ease; }
.guided-tour-bubble-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guided-tour-count { color: #d9c8b8; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.guided-tour-close { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #50392b; border-radius: 50%; background: #2e2119; color: #e8d8c9; font: inherit; cursor: pointer; }
.guided-tour-name { margin: 11px 0 3px; color: #f3ad41; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.guided-tour-bubble h2 { margin: 0; color: #fff8ef; font-size: 24px; line-height: 1.12; letter-spacing: -.02em; }
.guided-tour-bubble #guided-tour-body { margin: 11px 0 0; color: #d7c6b6; font-size: 15px; line-height: 1.55; }
.guided-tour-availability { margin: 12px 0 0; padding: 10px 11px; border: 1px solid #76502e; border-radius: 10px; background: #302118; color: #f6c77d; font-size: 13px; line-height: 1.45; }
.guided-tour-actions { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 17px; }
.guided-tour-actions button { min-height: 44px; border-radius: 11px; padding: 9px 13px; border: 1px solid #574032; background: #2a2019; color: #eadaca; font: inherit; font-weight: 800; cursor: pointer; }
.guided-tour-actions button:disabled { opacity: .35; cursor: default; }
.guided-tour-actions .guided-tour-end { justify-self: start; border-color: transparent; background: transparent; color: #a99889; font-size: 13px; }
.guided-tour-actions .guided-tour-next { border-color: #d97706; background: #d97706; color: white; min-width: 86px; }
.guided-tour-actions button:focus-visible, .guided-tour-close:focus-visible { outline: 3px solid rgba(255, 181, 69, .48); outline-offset: 2px; }

@media (max-width: 520px) {
  .guided-tour-bubble { padding: 15px; border-radius: 15px; }
  .guided-tour-bubble h2 { font-size: 21px; }
  .guided-tour-bubble #guided-tour-body { font-size: 14px; }
  .guided-tour-actions { grid-template-columns: auto 1fr auto; gap: 5px; }
  .guided-tour-actions button { padding-inline: 10px; }
  .guided-tour-actions .guided-tour-end { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .guided-tour-spotlight, .guided-tour-bubble, .guided-tour-progress span { transition: none; }
}

/* =============================================================
   TUTORIAL & WHAT'S NEW
   ============================================================= */
.tutorial-page { min-height: 100vh; background: #15110e; color: #f8efe4; }
.tutorial-hero { border-bottom: 1px solid #493425; background: radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 34%), linear-gradient(145deg, #201711, #15110e 68%); }
.tutorial-hero-inner, .tutorial-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.tutorial-hero-inner { padding: 34px 0 38px; }
.tutorial-back { display: inline-flex; color: #b9aa9c; text-decoration: none; margin-bottom: 34px; }
.tutorial-back:hover { color: #f8efe4; }
.tutorial-hero-copy { max-width: 760px; }
.tutorial-eyebrow, .tutorial-kicker { margin: 0 0 7px; color: #f3ad41; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.tutorial-hero h1 { margin: 0; font-size: clamp(40px, 6vw, 72px); line-height: .98; letter-spacing: -.045em; }
.tutorial-hero-copy > p:last-child { max-width: 680px; margin: 18px 0 0; color: #cbbbab; font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }
.tutorial-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.tutorial-primary-link, .tutorial-secondary-link { display: inline-flex; align-items: center; min-height: 46px; padding: 11px 16px; border-radius: 11px; font: inherit; font-weight: 850; text-decoration: none; cursor: pointer; }
.tutorial-primary-link { border: 1px solid #d97706; background: #d97706; color: white; }
.tutorial-secondary-link { border: 1px solid #5b4433; background: #261c15; color: #eadaca; }
.tutorial-order-note { display: flex; align-items: center; gap: 8px; margin-top: 28px; color: #97897e; font-size: 13px; }
.tutorial-order-note span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #302219; color: #f3ad41; font-size: 18px; }
.tutorial-order-note strong { color: #d9c8b8; }
.tutorial-shell { padding: 28px 0 100px; }
.tutorial-section { scroll-margin-top: 20px; margin-top: 54px; }
.tutorial-section:first-child { margin-top: 0; }
.tutorial-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 20px; }
.tutorial-section-heading h2, .tutorial-stay-current h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.025em; }
.tutorial-section-heading > p { max-width: 480px; margin: 0; color: #a99889; line-height: 1.5; }
.tutorial-release-list { display: grid; gap: 18px; }
.tutorial-release { overflow: hidden; border: 1px solid #423126; border-radius: 20px; background: #1e1712; }
.tutorial-release-newest { border-color: #a75b08; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent), 0 18px 46px rgba(0,0,0,.22); }
.tutorial-release-header { padding: 24px 26px; border-bottom: 1px solid #3b2c22; background: #241a14; }
.tutorial-release-header > div { display: flex; align-items: center; gap: 9px; }
.tutorial-release-date { color: #a99889; font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.tutorial-release-badge { padding: 4px 8px; border-radius: 999px; background: #d97706; color: white; font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.tutorial-release-header h3 { margin: 8px 0 6px; font-size: clamp(24px, 3vw, 34px); }
.tutorial-release-header p { max-width: 790px; margin: 0; color: #b9aa9c; line-height: 1.55; }
.tutorial-release-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tutorial-release-item { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 24px 26px; border-bottom: 1px solid #38291f; }
.tutorial-release-item:nth-child(odd) { border-right: 1px solid #38291f; }
.tutorial-release-item:last-child,
.tutorial-release-item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.tutorial-release-item:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.tutorial-release-icon, .tutorial-guide-icon { display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: #34251b; font-size: 22px; }
.tutorial-release-icon { width: 46px; height: 46px; }
.tutorial-release-item h4 { margin: 1px 0 6px; font-size: 18px; }
.tutorial-release-item p { margin: 0; color: #b9aa9c; line-height: 1.5; }
.tutorial-release-item ol { margin: 14px 0; padding-left: 21px; color: #d9c8b8; line-height: 1.55; }
.tutorial-release-item li + li { margin-top: 6px; }
.tutorial-item-action, .tutorial-guide-action { display: inline-flex; border: 0; background: transparent; color: #f3ad41; padding: 0; font: inherit; font-weight: 850; text-decoration: none; cursor: pointer; }
.tutorial-item-action:hover, .tutorial-guide-action:hover { color: #ffc56d; }
.tutorial-guide-heading { align-items: end; }
.tutorial-search { display: grid; gap: 6px; width: min(420px, 100%); color: #a99889; font-size: 12px; }
.tutorial-search input { width: 100%; border: 1px solid #4d382a; border-radius: 12px; background: #1d1611; color: #f8efe4; padding: 13px 14px; font: inherit; font-size: 16px; }
.tutorial-search input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: #d97706; }
.tutorial-category-nav { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: thin; }
.tutorial-category-nav button { flex: 0 0 auto; border: 1px solid #463327; border-radius: 999px; background: #1d1611; color: #b9aa9c; padding: 9px 13px; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.tutorial-category-nav button.active { border-color: #c46d08; background: #372317; color: #ffbf5b; }
.tutorial-guide { display: grid; gap: 24px; margin-top: 10px; }
.tutorial-guide-group > h3 { margin: 0 0 10px; color: #9d8d80; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.tutorial-guide-group > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.tutorial-guide-item { border: 1px solid #3f2f24; border-radius: 14px; background: #1d1611; overflow: hidden; }
.tutorial-guide-item[open] { border-color: #76502e; background: #211811; }
.tutorial-guide-item summary { display: flex; align-items: center; gap: 12px; min-height: 82px; padding: 13px 15px; cursor: pointer; list-style: none; }
.tutorial-guide-item summary::-webkit-details-marker { display: none; }
.tutorial-guide-icon { width: 43px; height: 43px; }
.tutorial-guide-item summary > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.tutorial-guide-item summary strong { font-size: 16px; }
.tutorial-guide-item summary small { color: #9f9084; line-height: 1.4; }
.tutorial-guide-chevron { margin-left: auto; color: #a99889; font-size: 20px; transition: transform .18s; }
.tutorial-guide-item[open] .tutorial-guide-chevron { transform: rotate(180deg); }
.tutorial-guide-body { padding: 0 18px 18px 70px; color: #cbbbab; line-height: 1.55; }
.tutorial-guide-body h4 { margin: 14px 0 4px; color: #f2dfcc; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.tutorial-guide-body p { margin: 0; white-space: pre-line; }
.tutorial-guide-body ul { margin: 6px 0 16px; padding-left: 20px; }
.tutorial-guide-body li + li { margin-top: 5px; }
.tutorial-empty { padding: 50px 20px; border: 1px dashed #4b392c; border-radius: 14px; color: #a99889; text-align: center; }
.tutorial-stay-current { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 24px; border: 1px solid #6b431f; border-radius: 18px; background: linear-gradient(120deg, #2a1c12, #201711); }
.tutorial-stay-icon { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 15px; background: #3b2617; font-size: 28px; }
.tutorial-stay-current p { margin: 6px 0 0; color: #b9aa9c; line-height: 1.5; }
.tutorial-stay-current > a { border-radius: 10px; background: #d97706; color: white; padding: 11px 14px; font-weight: 850; text-decoration: none; white-space: nowrap; }

@media (max-width: 760px) {
  .tutorial-hero-inner, .tutorial-shell { width: min(100% - 24px, 1180px); }
  .tutorial-hero-inner { padding: 22px 0 28px; }
  .tutorial-back { margin-bottom: 24px; }
  .tutorial-hero h1 { font-size: 42px; }
  .tutorial-hero-actions { display: grid; }
  .tutorial-primary-link, .tutorial-secondary-link { justify-content: center; }
  .tutorial-section { margin-top: 40px; }
  .tutorial-section-heading { display: grid; gap: 13px; }
  .tutorial-release-header, .tutorial-release-item { padding: 19px; }
  .tutorial-release-items, .tutorial-guide-group > div { grid-template-columns: 1fr; }
  .tutorial-release-item, .tutorial-release-item:nth-child(odd), .tutorial-release-item:nth-last-child(2):nth-child(odd) { grid-column: auto; border-right: 0; border-bottom: 1px solid #38291f; }
  .tutorial-release-item:last-child { border-bottom: 0; }
  .tutorial-guide-item summary { min-height: 76px; padding: 12px; }
  .tutorial-guide-body { padding: 0 14px 16px; }
  .tutorial-stay-current { grid-template-columns: auto 1fr; }
  .tutorial-stay-current > a { grid-column: 1 / -1; text-align: center; }
}

/* =============================================================
   SCHEDULE-AS-HOME (parent.html in default Today view)
   ============================================================= */

.home-schedule-section { margin-top: 8px; }

.home-date-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}
.schedule-period-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.schedule-period-nav {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-elev));
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  font-family: Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
}
.schedule-period-nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #17120a;
}
.schedule-period-nav:active { transform: scale(0.94); }
.schedule-period-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-date-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.home-date-meta {
  font-size: 14px;
  color: var(--text-muted);
}
.calendar-add-event-button {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev));
  font-family:inherit; font-weight:750; font-size:12px; line-height:1;
  cursor: pointer;
}
.calendar-add-event-button:hover,
.calendar-add-event-button:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-elev));
  outline: none;
}

.calendar-add-event-fab[hidden] { display: none !important; }
.calendar-add-event-fab {
  position: fixed;
  right: calc(30px + env(safe-area-inset-right, 0px));
  bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #5eead4;
  border-radius: 50%;
  background: #2dd4bf;
  color: #082f32;
  box-shadow: 0 8px 24px rgba(0,0,0,.42), 0 0 0 4px rgba(45,212,191,.18);
  font: 0/0 Arial, sans-serif;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.calendar-add-event-fab > span {
  position: relative;
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}
.calendar-add-event-fab > span::before,
.calendar-add-event-fab > span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.calendar-add-event-fab > span::before { width: 22px; height: 3px; }
.calendar-add-event-fab > span::after  { width: 3px; height: 22px; }
.calendar-add-event-fab:hover,
.calendar-add-event-fab:focus-visible {
  filter: brightness(1.1);
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.calendar-add-event-fab:active { transform: scale(.94); }

/* ---- Sticky toolbar (kid toggle + Day/Week/Month) above tab bar ---- */
.schedule-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(26, 20, 16, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--bg-elev-2);
  height: 52px;
}

.schedule-kid-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: 36px;
  background: var(--bg-elev);
  border: 1.5px solid var(--bg-elev-2);
  border-radius: 999px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  max-width: 50%;
}
.schedule-kid-toggle:hover { border-color: var(--accent); }
.schedule-kid-toggle .schedule-kid-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}
.schedule-kid-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-kid-chevron {
  font-size: 11px;
  color: var(--text-muted);
}

.schedule-view-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.schedule-period-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 2px;
  box-sizing: border-box;
  background: var(--bg-elev);
  border: 1.5px solid var(--bg-elev-2);
  border-radius: 999px;
}
.schedule-view-toggle {
  display: flex;
  align-items: stretch;
  height: 40px;
  box-sizing: border-box;
  background: var(--bg-elev);
  border: 1.5px solid var(--bg-elev-2);
  border-radius: 999px;
  padding: 2px;
}
.schedule-view-btn {
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.schedule-view-btn:hover { color: var(--text); }
.schedule-view-btn.active {
  background: var(--accent);
  color: #fff;
}

/* Kid picker overlay — opens above the toolbar when the kid toggle is tapped */
.schedule-kid-picker {
  position: fixed;
  left: 12px;
  right: auto;
  max-width: 240px;
  bottom: calc(72px + 52px + 8px + env(safe-area-inset-bottom));
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 6px;
  background: var(--bg-elev);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}
.schedule-kid-pick-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.schedule-kid-pick-row:hover {
  background: var(--bg);
  border-color: var(--bg-elev-2);
}
.schedule-kid-pick-row.selected {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}
.schedule-kid-pick-row .schedule-kid-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}

/* =============================================================
   REDUCED MOTION — respect the user's OS-level preference.
   Strip all our transitions/animations down to instant.
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hamburger-drawer-panel,
  .tab-drawer-panel {
    transition: none !important;
  }
}

/* =============================================================
   FULLSCREEN PLAYER — true edge-to-edge with auto-hiding overlay
   controls (YouTube/Netflix style).
   ============================================================= */

.player-shell:fullscreen,
.player-shell:-webkit-full-screen {
  background: #000;
  display: block;          /* drop the auto/1fr/auto grid */
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* Video fills the whole viewport */
.player-shell:fullscreen .video-wrapper,
.player-shell:-webkit-full-screen .video-wrapper {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

/* Topbar + bottom bar become absolute overlays, hidden by default */
.player-shell:fullscreen .player-topbar,
.player-shell:fullscreen .player-bottom,
.player-shell:-webkit-full-screen .player-topbar,
.player-shell:-webkit-full-screen .player-bottom {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  border: 0;
}
.player-shell:fullscreen .player-topbar,
.player-shell:-webkit-full-screen .player-topbar {
  top: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  padding: 24px 32px 56px;
  transform: translateY(-12px);
}
.player-shell:fullscreen .player-bottom,
.player-shell:-webkit-full-screen .player-bottom {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  padding: 56px 32px 24px;
  transform: translateY(12px);
}

/* When .controls-visible is set (by JS on mouse-move), reveal overlays */
.player-shell:fullscreen.controls-visible .player-topbar,
.player-shell:fullscreen.controls-visible .player-bottom,
.player-shell:-webkit-full-screen.controls-visible .player-topbar,
.player-shell:-webkit-full-screen.controls-visible .player-bottom {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Hide the cursor when controls are hidden in fullscreen */
.player-shell:fullscreen:not(.controls-visible),
.player-shell:-webkit-full-screen:not(.controls-visible) {
  cursor: none;
}

/* =============================================================
   DASHBOARD REDESIGN — hub mode + hamburger + kid sub-dashboards
   ============================================================= */

/* ---- Header right side ---- */
.dashboard-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---- Hamburger button ---- */
.hamburger-btn {
  width: 44px;
  height: 44px;
  background: var(--bg-elev);
  border: 1px solid var(--bg-elev-2);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.hamburger-btn:hover { background: var(--bg-elev-2); }
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.2s ease;
}
.hamburger-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.hamburger-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Hamburger drawer ---- */
.hamburger-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.hamburger-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: auto;
}
.hamburger-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 90vw);
  background: var(--bg);
  border-left: 1px solid var(--bg-elev-2);
  box-shadow: var(--shadow);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  pointer-events: auto;
  overflow-y: auto;
  padding: 20px 22px 32px;
}
.hamburger-drawer.open .hamburger-drawer-backdrop { opacity: 1; }
.hamburger-drawer.open .hamburger-drawer-panel    { transform: translateX(0); }

.hamburger-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bg-elev);
  margin-bottom: 18px;
}
.hamburger-drawer-title {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.hamburger-section {
  margin-bottom: 24px;
}
.hamburger-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-dim);
  margin-bottom: 10px;
  font-weight: 600;
}
.hamburger-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hamburger-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 17px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
.hamburger-link:hover {
  background: var(--bg-elev);
  border-color: var(--bg-elev-2);
}

/* ---- Kid card now an <a> link ---- */
.kid-card {
  display: block;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.kid-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  border-left-color: var(--kid-calendar-color, var(--accent));
}
.kid-card-arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 22px;
  color: var(--text-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}
.kid-card:hover .kid-card-arrow {
  transform: translateX(4px);
  color: var(--accent);
}

/* ---- Quick-action buttons row ---- */
.kid-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.kid-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: transform 0.12s ease, background 0.12s ease;
}
.kid-action-btn:hover { transform: translateY(-1px); }
.kid-action-icon { font-size: 20px; line-height: 1; }
.kid-actions-section { margin-top: 4px; }

/* ---- Modal card variants used by modals.js ---- */
.modal-card-wide { max-width: 700px; }
.modal-body { display: flex; flex-direction: column; gap: 16px; }
.modal-blurb {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.5;
}
.modal-hint {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}
.modal-context {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}

/* =============================================================
   WEEK VIEW (in-page on parent.html)
   Desktop/TV: 7-column hourly calendar. Mobile: stacked day list.
   ============================================================= */

.week-view-section { margin-top: 8px; }
.week-grid { min-height: 0; }
.week-list-mobile {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.week-calendar-desktop { display: none; }
.week-day {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--bg-elev-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.week-day:hover { border-color: var(--accent); transform: translateX(2px); }
.week-day.today { border-left: 4px solid var(--accent); padding-left: 11px; }

.week-day-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.week-day-name {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 600;
}
.week-day-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.week-day.today .week-day-num { color: var(--accent); }

.week-day-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}
.week-day-empty {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
}
.week-block-chip {
  display: inline-flex;
  font-size: 12px;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--bg-elev-2);
  border-left: 3px solid var(--kid-calendar-color, var(--accent));
  border-radius: 6px;
  color: var(--text);
  /* Long labels wrap inside the chip instead of clipping with an ellipsis.
   * Was white-space:nowrap + overflow:hidden + text-overflow:ellipsis,
   * which truncated names like "Botanical Garden of the Ozarks" off the
   * right edge. Now the chip grows vertically to fit the full label, and
   * the day card grows with it. */
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
}

.week-block-more {
  font-size: 12px;
  color: var(--text-muted);
  align-self: center;
}

@media (min-width: 900px) {
  body.fullbleed-week {
    overflow: hidden;
    height: 100vh;
    overscroll-behavior: none;
  }
  body.fullbleed-week .dashboard-shell {
    max-width: none !important;
    padding: 8px 8px 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  body.fullbleed-week .dashboard-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  body.fullbleed-week .week-view-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0 !important;
  }
  body.fullbleed-week .week-view-section .home-date-strip {
    margin-bottom: 6px;
    padding: 0 4px;
  }
  body.fullbleed-week .week-grid {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
  }

  .week-list-mobile { display: none; }
  .week-calendar-desktop {
    --week-axis-width: 58px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid var(--bg-elev-2);
    border-radius: 8px;
    background: var(--bg-elev);
  }

  .week-calendar-header {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: var(--week-axis-width) repeat(7, minmax(0, 1fr));
    background: rgba(26, 20, 16, 0.98);
    border-bottom: 1px solid var(--bg-elev-2);
    z-index: 5;
    width: calc(100% - var(--week-scrollbar-width, 0px));
  }
  .week-calendar-kid-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 6px 10px;
    color: var(--text-muted);
    background: rgba(26, 20, 16, 0.98);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 11px;
    font-weight: 650;
  }
  .week-calendar-kid-identities { display: inline-flex; align-items: center; gap: 18px; }
  .week-calendar-kid-legend-item { display: inline-flex; align-items: center; gap: 6px; }
  .week-calendar-kid-dot { width: 10px; height: 10px; border-radius: 50%; }
  .week-calendar-drag-guide { color: var(--text-dim); font-size: 10px; font-weight: 550; }
  .week-calendar-corner {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 4px 10px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  .week-calendar-day-head {
    min-width: 0;
    padding: 8px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--text-muted);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    cursor: pointer;
  }
  .week-calendar-day-head:last-child { border-right: 0; }
  .week-calendar-day-head:hover { background: rgba(255, 255, 255, 0.04); }
  .week-calendar-day-head:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  .week-calendar-day-name {
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .week-calendar-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--text);
    font-size: 18px;
    font-weight: 750;
  }
  .week-calendar-day-head.today .week-calendar-day-name { color: var(--accent); }
  .week-calendar-day-head.today .week-calendar-day-num {
    background: var(--accent);
    color: #1a1410;
  }
  .week-calendar-untimed-row {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: var(--week-axis-width) repeat(7, minmax(0, 1fr));
    min-height: 48px;
    background: color-mix(in srgb, var(--bg-elev) 82%, #274766);
    border-bottom: 1px solid var(--bg-elev-2);
    z-index: 4;
    width: calc(100% - var(--week-scrollbar-width, 0px));
  }
  .week-calendar-untimed-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    color: var(--text-dim);
    border-right: 1px solid rgba(255,255,255,.08);
    font-size: 9px;
    font-weight: 750;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
  }
  .week-calendar-untimed-day {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px;
    border-right: 1px solid rgba(255,255,255,.08);
  }
  .week-calendar-untimed-day:last-child { border-right: 0; }
  .week-calendar-untimed-day.today { background: color-mix(in srgb, var(--accent) 6%, transparent); }
  .week-calendar-untimed-card {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    min-height: 34px;
    padding: 5px 6px 5px 9px;
    overflow: hidden;
    color: var(--text);
    background: var(--bg);
    border: 1px solid rgba(255,255,255,.1);
    border-left: 0;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
  }
  .week-calendar-untimed-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
  .week-calendar-untimed-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .week-calendar-untimed-card-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .week-calendar-untimed-card-kids {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--text-dim);
    font-size: 8px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .week-calendar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .week-calendar-canvas {
    position: relative;
    min-width: 0;
    background: linear-gradient(to bottom, #211813 0%, #2b344a 35%, #2c4775 58%, #2f2a1f 82%, #211813 100%);
  }
  .week-calendar-time-axis {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--week-axis-width);
    background: rgba(26, 20, 16, 0.72);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2;
  }
  .week-calendar-time-label {
    position: absolute;
    left: 0;
    right: 5px;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
    line-height: 1;
    text-align: right;
    text-transform: uppercase;
  }
  .week-calendar-time-label:first-child { transform: translateY(4px); }
  .week-calendar-lanes {
    position: absolute;
    inset: 0 0 0 var(--week-axis-width);
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.09) 0,
      rgba(255, 255, 255, 0.09) 1px,
      transparent 1px,
      transparent var(--week-hour-height)
    );
  }
  .week-calendar-lane {
    position: relative;
    min-width: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    cursor: pointer;
  }
  .week-calendar-lane:last-child { border-right: 0; }
  .week-calendar-lane:hover { background: rgba(255, 255, 255, 0.015); }
  .week-calendar-lane.today { background: color-mix(in srgb, var(--accent) 6%, transparent); }

  .week-calendar-event {
    position: absolute;
    left: 4px;
    right: 4px;
    z-index: 2;
    min-width: 0;
    padding: 5px 6px 5px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    overflow: hidden;
    color: var(--text);
    background: rgba(26, 20, 16, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-left: 0;
    border-radius: 5px;
    text-align: left;
    cursor: pointer;
    touch-action: pan-y;
  }
  .week-calendar-event:hover {
    border-color: var(--accent);
    filter: brightness(1.12);
  }
  .week-calendar-event.done { opacity: 0.5; }
  .week-calendar-event.in-progress { border-style: dashed; }
  .week-calendar-event.locked { cursor: pointer; }
  .week-calendar-event.drag-pressing {
    border-color: color-mix(in srgb, var(--accent) 70%, white);
    filter: brightness(1.13);
    cursor: grab;
  }
  .week-calendar-event.drag-pressing::after {
    content: "";
    position: absolute;
    top: 0;
    left: 5px;
    right: 0;
    z-index: 5;
    height: 3px;
    border-radius: 0 4px 0 0;
    background: var(--accent);
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
    animation: week-drag-hold-progress 550ms linear forwards;
  }
  .week-calendar-event.locked.drag-pressing::after {
    background: var(--text-muted);
  }
  .week-calendar-event.dragging,
  .week-calendar-event.resizing {
    z-index: 12;
    opacity: 0.94;
    border-color: var(--accent);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
    cursor: grabbing;
    touch-action: none;
  }
  @keyframes week-drag-hold-progress {
    to { transform: scaleX(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .week-calendar-event.drag-pressing::after { animation-timing-function: steps(2, end); }
  }
  .week-calendar-event:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }
  .week-calendar-event-label {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: clamp(10px, 0.9vw, 13px);
    font-weight: 700;
    line-height: 1.18;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .week-calendar-event-time {
    color: var(--text-muted);
    font-size: clamp(9px, 0.72vw, 11px);
    line-height: 1.1;
    white-space: nowrap;
  }
  .week-calendar-event-kids {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-dim);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .week-calendar-kid-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 5px 0 0 5px;
    pointer-events: none;
  }
  .week-calendar-resize-handle {
    position: absolute;
    left: 10px;
    right: 5px;
    bottom: 0;
    height: 7px;
    cursor: ns-resize;
    touch-action: none;
  }
  .week-calendar-resize-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 26px;
    height: 2px;
    transform: translateX(-50%);
    border-radius: 2px;
    background: rgba(255,255,255,0.35);
  }
  .week-calendar-event.compact {
    padding-top: 4px;
    padding-bottom: 3px;
  }
  .week-calendar-event.compact .week-calendar-event-time { display: none; }

  .week-calendar-now-line {
    position: absolute;
    left: var(--week-axis-width);
    right: 0;
    z-index: 4;
    height: 2px;
    background: #e45745;
    box-shadow: 0 0 6px rgba(228, 87, 69, 0.65);
    pointer-events: none;
  }
  .week-calendar-now-line::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e45745;
  }
  .week-calendar-now-line span {
    position: absolute;
    left: 5px;
    top: -18px;
    padding: 2px 5px;
    border-radius: 4px;
    color: #fff;
    background: #b83c2e;
    font-size: 10px;
    font-weight: 700;
  }
}

.week-calendar-status {
  position: fixed;
  left: 50%;
  bottom: 148px;
  z-index: 120;
  transform: translateX(-50%);
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  color: var(--text);
  background: rgba(26,20,16,0.96);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
}
.week-calendar-status[data-kind="ok"] { border-color: var(--leaf); }
.week-calendar-status[data-kind="error"] { border-color: var(--danger); color: var(--hh-ink-danger, #ffb4a8); }

/* =============================================================
   WEEKLY RESOURCES — curriculum-connected book/video/activity rail
   ============================================================= */

.weekly-resources-open {
  flex: 0 0 auto;
  padding: 8px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elev));
  font-family:inherit; font-weight:700; font-size:12px; line-height:1;
  cursor: pointer;
  white-space: nowrap;
}
.weekly-resources-open:hover { background: var(--accent); color: #1a1410; }

.weekly-resources[hidden] { display: none; }
body.weekly-resources-open-state { overflow: hidden; }
.weekly-resources {
  position: fixed;
  inset: 0;
  z-index: 170;
  pointer-events: none;
}
.weekly-resources-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.56);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 180ms ease;
}
.weekly-resources-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(530px, 100vw);
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: #17120f;
  border-left: 1px solid var(--bg-elev-2);
  box-shadow: -18px 0 45px rgba(0,0,0,0.42);
  transform: translateX(100%);
  transition: transform 200ms ease;
  pointer-events: auto;
}
.weekly-resources.open .weekly-resources-backdrop { opacity: 1; }
.weekly-resources.open .weekly-resources-panel { transform: translateX(0); }
.weekly-resources-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--bg-elev-2);
}
.weekly-resources-header h2 { margin: 2px 0 0; font-size: 22px; line-height: 1.15; }
.weekly-resources-header, .weekly-resources-period, .weekly-resources-tabs, .weekly-resources-footer { flex-shrink: 0; }
.weekly-resources-header-actions { display: flex; align-items: center; gap: 8px; }
.weekly-resource-manual {
  display: block;
  width: calc(100% - 28px);
  min-height: 40px;
  margin: 10px 14px 0;
  padding: 8px 12px;
  border: 1px dashed var(--bg-elev-2);
  border-radius: 8px;
  color: var(--accent);
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
}
.weekly-resource-manual:hover { background: var(--bg-elev); }
.weekly-resource-manual:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.weekly-resources-eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.weekly-resources-period {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  margin: 8px 14px;
  padding: 4px;
  border: 1px solid var(--bg-elev-2);
  border-radius: 10px;
  background: var(--bg);
}
.weekly-resources-period button {
  height: 44px;
  padding: 0;
  border: 1px solid var(--bg-elev-2);
  border-radius: 10px;
  color: var(--text);
  background: var(--bg-elev);
  font-family: inherit;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.weekly-resources-week { text-align: center; }
.weekly-resources-week strong { display: block; font-size: 17px; line-height: 1.3; }
.weekly-resources-summary { margin: 14px 14px 0; padding: 18px 8px 24px; border-top: 1px solid var(--bg-elev-2); }
.weekly-resources-summary h3 { margin: 0 0 8px; color: var(--text); font-size: 13px; }
.weekly-resources-source-note { margin: 10px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.weekly-resources-summary-line { margin: 0 0 8px; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.weekly-resources-topic-list { display: flex; flex-wrap: wrap; gap: 5px; }
.weekly-resources-topic {
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--bg-elev);
  border: 1px solid var(--bg-elev-2);
  font-size: 10px;
  font-weight: 700;
}
.weekly-resources-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  padding: 0 14px 10px;
  border-bottom: 1px solid var(--bg-elev-2);
}
.weekly-resources-tabs button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 56px;
  padding: 6px 2px;
  border: 1px solid var(--bg-elev-2);
  border-radius: 8px;
  color: var(--text);
  background: var(--bg-elev);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}
.weekly-resources-tabs button:hover, .weekly-resources-period button:hover { border-color: var(--accent); }
@media (max-width: 768px) {
  .weekly-resources-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .weekly-resources-tabs button { gap: 3px; padding: 6px 4px; font-size: 14px; }
}
.weekly-resources-tabs button.active { color: #1a1410; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.weekly-resources-tabs button:focus-visible, .weekly-resources-period button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.discovery-tab-icon { font-size: 20px; line-height: 1; }
.weekly-event-context { padding: 4px 8px 14px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.weekly-event-context a { color: var(--accent); }
.weekly-event-context button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--bg-elev-2); border-radius: 20px; color: var(--text); background: var(--bg-elev-1); cursor: pointer; }
.weekly-event-context button:disabled { opacity: .65; cursor: wait; }
.weekly-event-context p { margin: 4px 0; }
.resource-schedule-form .resource-schedule-row[hidden] { display: none; }
.weekly-resources-footer[hidden], .weekly-resources-summary[hidden] { display: none; }
.weekly-resources-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom);
}
.weekly-resources-list { padding: 12px 14px; }
.weekly-resource-manual[hidden] { display: none; }
.discovery-custom-options { display: grid; gap: 8px; }
.discovery-custom-options button, .discovery-custom-options a { display: block; padding: 14px; min-height: 44px; border: 1px solid var(--bg-elev-2); border-radius: 8px; background: var(--bg-elev); color: var(--text); text-align: left; font: inherit; text-decoration: none; cursor: pointer; }
.discovery-custom-options span { display: block; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.discovery-custom-options :focus-visible { outline: 2px solid var(--accent); }
.weekly-resource-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  margin-bottom: 9px;
  padding: 13px;
  border: 1px solid var(--bg-elev-2);
  border-radius: 10px;
  background: var(--bg-elev);
}
.weekly-resource-card-icon,
.weekly-resource-card-thumb {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg);
  font-size: 26px;
}
.weekly-resource-card-thumb { object-fit: cover; }
.weekly-resource-card-body { min-width: 0; }
.weekly-resource-card h3 { margin: 0; color: var(--text); font-size: 15px; line-height: 1.25; }
.weekly-resource-meta { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.weekly-resource-description { margin: 7px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.weekly-resource-why {
  margin: 7px 0 0;
  color: var(--hh-ink-highlight, #d9b57f);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}
/* Local event age label: organizer ages solid, our estimates dashed, "Age not listed" muted. */
.event-age-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 7px 0 0; font-size: 11px; line-height: 1.35; }
.event-age-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 9px; border: 1px solid var(--bg-elev-2); border-radius: 999px; color: var(--text); background: var(--bg); font-weight: 700; overflow-wrap: anywhere; }
.event-age-chip[data-age-origin="estimate"] { border-style: dashed; }
.event-age-chip[data-age-origin="unknown"], .event-age-chip[data-age-adult="true"] { color: var(--text-muted); font-weight: 600; }
.event-age-note { color: var(--text-muted); }
.event-age-reason { margin: 6px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
/* The organizer's own ages leave a child out: a warning, never a block (October 6). Not color alone: it is written out. */
.event-age-warning, .resource-schedule-age-warning { margin: 6px 0 0; padding: 6px 9px; border-left: 3px solid var(--hh-ink-warning, #f5c887); border-radius: 4px; color: var(--text); background: color-mix(in srgb, var(--hh-ink-warning, #f5c887) 12%, transparent); font-size: 12px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.resource-schedule-age-warning { flex-basis: 100%; }
.resource-kid-age-note { color: var(--hh-ink-warning, #f5c887); font-size: 11px; font-weight: 650; }
.weekly-events-more { display: block; width: 100%; min-height: 44px; margin: 2px 0 12px; padding: 8px 14px; border: 1px solid var(--bg-elev-2); border-radius: 10px; color: var(--text); background: var(--bg-elev-1); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.weekly-events-more:focus-visible, .weekly-event-adults button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Place filter and radius above the local event cards; 44px targets, wraps on phones. */
.weekly-event-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 8px 10px; color: var(--text-muted); font-size: 13px; }
.weekly-event-tools button, .weekly-event-tools select, .weekly-event-filter button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--bg-elev-2); border-radius: 20px; color: var(--text); background: var(--bg-elev-1); font: inherit; font-size: 13px; cursor: pointer; }
.weekly-event-tools select { padding: 8px 10px; margin: 0 4px; }
.weekly-event-radius { display: inline-flex; align-items: center; flex-wrap: wrap; }
.weekly-event-filter { margin: 0 8px 12px; padding: 12px; border: 1px solid var(--bg-elev-2); border-radius: 10px; color: var(--text); background: var(--bg-elev); }
.weekly-event-filter h4 { margin: 0 0 8px; font-size: 14px; }
.weekly-event-filter ul { max-height: min(50vh, 360px); margin: 8px 0; padding: 0; overflow-y: auto; list-style: none; }
.weekly-event-filter li label, .weekly-event-filter-remember { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; cursor: pointer; }
.weekly-event-filter input[type="checkbox"] { flex: none; width: 20px; height: 20px; accent-color: var(--accent); }
.weekly-event-filter-name { min-width: 0; overflow-wrap: anywhere; }
.weekly-event-filter-count { margin-left: auto; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.weekly-event-filter-bulk, .weekly-event-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.weekly-event-filter-remember { align-items: flex-start; margin: 8px 0 12px; }
.weekly-event-filter-remember input { margin-top: 2px; }
.weekly-event-filter-remember small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.weekly-event-filter .weekly-event-filter-apply { color: var(--hh-on-accent, #1a1410); border-color: var(--accent); background: var(--accent); font-weight: 700; }
.weekly-event-filter-status { margin: 0; padding: 0 8px 10px; color: var(--text-muted); font-size: 13px; }
.weekly-event-tools :focus-visible, .weekly-event-filter :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Filters: each source with its branches beneath, then "Show events for adults" at the bottom of the list. */
.weekly-event-filter .weekly-event-filter-group + .weekly-event-filter-group { border-top: 1px solid var(--bg-elev-2); }
.weekly-event-filter .weekly-event-filter-venues { max-height: none; margin: 0 0 6px; padding-left: 30px; overflow: visible; }
.weekly-event-filter-venues .weekly-event-filter-name { color: var(--text); }
.weekly-event-filter-adults { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--bg-elev-2); font-size: 13px; cursor: pointer; }
.weekly-event-filter-adults input { margin-top: 2px; }
.weekly-event-filter-adults small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.weekly-event-adults p { margin: 0; color: var(--text-muted); }
.weekly-resource-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.weekly-resource-actions a,
.weekly-resource-actions button {
  padding: 6px 9px;
  border: 1px solid var(--bg-elev-2);
  border-radius: 999px;
  color: var(--text);
  background: var(--bg);
  font-family:inherit; font-weight:700; font-size:10px; line-height:1;
  text-decoration: none;
  cursor: pointer;
}
.weekly-resource-actions a:first-child { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.weekly-resource-actions .weekly-resource-add { color: #1a1410; border-color: var(--accent); background: var(--accent); }
.weekly-resource-actions .weekly-resource-add:disabled { opacity: .55; cursor: not-allowed; }
.weekly-resources-empty { padding: 24px 14px; color: var(--text-muted); text-align: center; line-height: 1.55; }
.weekly-resources-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bg-elev-2);
  color: var(--text-dim);
  background: var(--bg);
  font-size: 10px;
}
.weekly-resources-footer button { border: 0; color: var(--accent); background: transparent; font-family:inherit; font-weight:700; font-size:11px; line-height:1; cursor: pointer; }

@media (max-width: 640px) {
  .weekly-resources-open { padding: 7px 9px; font-size: 11px; }
  .week-view-section .home-date-meta { display: none; }
  .weekly-resources-panel { width: 100%; }
  .weekly-resources-header { gap: 10px; padding: 16px 14px 14px; }
  .weekly-resources-header h2 { font-size: 20px; }
  .weekly-resources-header-actions { align-items: flex-start; }
  .weekly-resources-tabs { gap: 5px; padding-right: 10px; padding-left: 10px; }
  .weekly-resources-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .weekly-resources-week strong { font-size: 15px; }
}

/* Resource details and safe Add-to-week workflow stay inside the app. */
.resource-detail[hidden] { display: none; }
body.resource-detail-open-state { overflow: hidden; }
.resource-detail { position: fixed; inset: 0; z-index: 185; pointer-events: none; }
.resource-detail-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(0,0,0,.66);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 180ms ease;
}
.resource-detail-card {
  position: absolute;
  top: 4vh;
  right: max(18px, 4vw);
  bottom: 4vh;
  width: min(520px, calc(100vw - 36px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--bg-elev-2);
  border-radius: 16px;
  color: var(--text);
  background: #17120f;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  transform: translateX(32px);
  opacity: 0;
  transition: transform 190ms ease, opacity 190ms ease;
  pointer-events: auto;
}
.resource-detail.open .resource-detail-backdrop { opacity: 1; }
.resource-detail.open .resource-detail-card { transform: translateX(0); opacity: 1; }
.resource-detail-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 20px 13px; border-bottom: 1px solid var(--bg-elev-2); }
.resource-detail-card > header p { margin: 0 0 3px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.resource-detail-card > header h2 { margin: 0; font-size: 21px; }
.resource-detail-header-actions { display: flex; align-items: center; gap: 8px; }
.resource-detail-edit-workshop { min-height: 36px; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); font-family:inherit; font-weight:750; font-size:11px; line-height:1; cursor: pointer; }
.resource-detail-edit-workshop:hover { background: color-mix(in srgb, var(--accent) 17%, var(--bg)); }
.resource-detail-content { overflow-y: auto; padding: 17px 20px 6px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.resource-read-add { flex-shrink: 0; margin: auto 20px 18px; padding: 12px; }
.resource-read-add[hidden], .resource-schedule-form[hidden] { display: none; }
.resource-detail-content > p { margin: 0 0 10px; }
.resource-detail-content h3 { margin: 13px 0 5px; color: var(--text); font-size: 13px; }
.resource-detail-content ul, .resource-detail-content ol { margin: 0; padding-left: 21px; }
.resource-detail-why { color: var(--hh-ink-highlight, #d9b57f); }
.resource-workshop-customized { display: inline-flex; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--leaf) 42%, transparent); border-radius: 999px; color: var(--leaf); background: color-mix(in srgb, var(--leaf) 9%, transparent); font-size: 11px; font-weight: 800; }
.resource-workshop-print { width: 100%; margin: 3px 0 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--bg-elev-2)); border-radius: 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg)); font-family:inherit; font-weight:750; font-size:12px; line-height:1.2; cursor: pointer; }
.resource-workshop-print:hover, .resource-workshop-print:focus-visible { background: color-mix(in srgb, var(--accent) 16%, var(--bg)); outline: none; }
.resource-workshop-guide-section { margin-top: 13px; padding: 10px 12px; border: 1px solid var(--bg-elev-2); border-radius: 9px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.resource-workshop-guide-section h3 { margin-top: 0; }
.resource-detail-content.is-editing-workshop { display: flex; flex: 1; min-height: 0; overflow: hidden; padding: 0; }
.resource-workshop-edit-form { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.resource-workshop-edit-fields { display: grid; gap: 11px; min-height: 0; overflow-y: auto; padding: 17px 20px; overscroll-behavior: contain; }
.resource-workshop-edit-note { margin: 0 0 2px; color: var(--hh-ink-highlight, #d9b57f); }
.resource-workshop-edit-form label { display: grid; gap: 5px; color: var(--text); font-size: 11px; font-weight: 750; }
.resource-workshop-edit-form label span { color: var(--text-dim); font-weight: 500; }
.resource-workshop-edit-form input, .resource-workshop-edit-form textarea { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--bg-elev-2); border-radius: 9px; color: var(--text); background: var(--bg-elev); font-family:inherit; font-weight:600; font-size:13px; line-height:1.35; resize: vertical; }
.resource-workshop-edit-form input:focus, .resource-workshop-edit-form textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent); border-color: var(--accent); }
.resource-workshop-duration { max-width: 180px; }
.resource-workshop-edit-status { min-height: 17px; margin: 0; color: var(--text-muted); font-size: 11px; }
.resource-workshop-edit-status.error { color: var(--hh-ink-danger, #ff9d91); }
.resource-workshop-edit-form footer { display: flex; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: auto; padding: 10px 20px max(14px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bg-elev-2); background: var(--bg); }
.resource-workshop-edit-form footer .resource-workshop-edit-status { flex-basis: 100%; }
.resource-workshop-edit-form footer button { min-height: 44px; padding: 9px 12px; border: 1px solid var(--bg-elev-2); border-radius: 9px; color: var(--text); background: var(--bg-elev); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.resource-workshop-edit-form footer .primary-btn { color: #1a1410; border-color: var(--accent); background: var(--accent); }
.resource-detail-links { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 8px; }
.resource-detail-links a { padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; color: var(--accent); background: var(--bg); font-size: 11px; font-weight: 700; text-decoration: none; }
.resource-trip-options { margin: 16px 0 8px; padding-top: 3px; border-top: 1px solid var(--bg-elev-2); }
.resource-trip-options > h3 { margin-top: 15px; font-size: 15px; }
.resource-trip-loading, .resource-trip-ranking { margin: 0 0 9px; color: var(--text-dim); font-size: 11px; }
.resource-trip-options-state { padding: 11px 12px; border: 1px dashed var(--bg-elev-2); border-radius: 11px; background: var(--bg); }
.resource-trip-options-state p { margin: 0 0 8px; }
.resource-trip-option-list { display: grid; gap: 9px; }
.resource-trip-option { padding: 12px; border: 1px solid var(--bg-elev-2); border-radius: 12px; color: var(--text-muted); background: var(--bg); }
.resource-trip-option-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: start; }
.resource-trip-option h4 { margin: 0; color: var(--text); font-size: 14px; line-height: 1.3; }
.resource-trip-rating { color: var(--hh-ink-highlight, #f4b64e); font-size: 10px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.resource-trip-rating:hover, .resource-trip-map-link:hover, .resource-trip-search:hover { text-decoration: underline; }
.resource-trip-meta, .resource-trip-address, .resource-trip-expect { margin: 5px 0 0; font-size: 11px; line-height: 1.42; }
.resource-trip-meta { color: var(--hh-ink-highlight, #d9b57f); font-weight: 700; }
.resource-trip-address { color: var(--text-dim); }
.resource-trip-expect strong { color: var(--text); }
.resource-trip-map-link, .resource-trip-search { display: inline-block; margin-top: 8px; color: var(--accent); font-size: 11px; font-weight: 750; text-decoration: none; }
.resource-trip-provider { margin-top: 10px; color: var(--text-dim); font-size: 10px; line-height: 1.4; }
.resource-trip-provider strong { color: var(--text-muted); font-size: 12px; }
.resource-trip-provider a { color: var(--text-muted); }
.resource-trip-provider p { margin: 3px 0 0; }
.resource-schedule-form { margin-top: auto; padding: 14px 20px 18px; border-top: 1px solid var(--bg-elev-2); background: var(--bg); }
.resource-schedule-form h3 { margin: 0 0 11px; font-size: 16px; }
.resource-schedule-form > label, .resource-schedule-row label { display: grid; gap: 5px; color: var(--text-muted); font-size: 11px; font-weight: 700; }
.resource-schedule-form input, .resource-schedule-form select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--bg-elev-2); border-radius: 9px; color: var(--text); background: var(--bg-elev); font-family:inherit; font-weight:600; font-size:13px; line-height:1.2; }
.resource-schedule-form fieldset { margin: 10px 0; padding: 0; border: 0; }
.resource-schedule-form legend { margin-bottom: 6px; color: var(--text-muted); font-size: 11px; font-weight: 700; }
.resource-schedule-kids { display: flex; flex-wrap: wrap; gap: 6px; }
.resource-schedule-kids label { display: flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid var(--bg-elev-2); border-radius: 999px; color: var(--text); background: var(--bg-elev); font-size: 11px; }
.resource-schedule-kids input { width: auto; }
.resource-kid-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kid-color); }
.resource-schedule-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(235px, .9fr); gap: 9px; align-items: start; }
.resource-schedule-row label span { font-weight: 400; }
.resource-schedule-form .resource-time-picker { min-width: 0; margin: 0; }
.resource-time-picker legend { margin-bottom: 5px; }
.resource-time-picker legend span { font-weight: 400; }
.resource-time-controls { display: grid; grid-template-columns: minmax(88px, 1.25fr) minmax(58px, .8fr) minmax(58px, .8fr); gap: 5px; }
.resource-time-controls select { padding-left: 8px; padding-right: 8px; text-align: center; }
.resource-time-controls select:disabled { opacity: .5; cursor: not-allowed; }
.resource-time-picker small { display: block; margin-top: 5px; color: var(--text-dim); font-size: 9px; font-weight: 500; line-height: 1.3; }
.resource-schedule-status { min-height: 17px; margin: 8px 0 0; color: var(--text-muted); font-size: 11px; }
.resource-schedule-status.success { color: var(--leaf); }
.resource-schedule-status.error { color: var(--hh-ink-danger, #ff9d91); }
.resource-schedule-move { min-height: 36px; margin: 6px 6px 0 0; padding: 6px 12px; border: 1px solid var(--accent); border-radius: 18px; color: var(--text); background: var(--bg-elev-1); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.resource-schedule-move:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.resource-schedule-move:disabled { opacity: .6; cursor: progress; }
.resource-schedule-form footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 7px; }
.resource-schedule-form footer button { padding: 9px 12px; border: 1px solid var(--bg-elev-2); border-radius: 9px; color: var(--text); background: var(--bg-elev); font-family:inherit; font-weight:700; font-size:12px; line-height:1; }
.resource-schedule-form footer .primary-btn { color: #1a1410; border-color: var(--accent); background: var(--accent); }

@media (max-width: 640px) {
  .resource-detail-card { inset: 0; width: 100%; border: 0; border-radius: 0; }
  .resource-detail-content { padding-top: 13px; }
  .resource-schedule-form { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .resource-schedule-row { grid-template-columns: 1fr; }
  .resource-time-controls { grid-template-columns: minmax(104px, 1.3fr) 1fr 1fr; }
  .resource-detail-edit-workshop { max-width: 112px; line-height: 1.2; }
  .resource-trip-option-heading { grid-template-columns: 1fr; gap: 4px; }
  .resource-trip-rating { white-space: normal; }
}

/* =============================================================
   MONTH VIEW (in-page on parent.html) — 6×7 calendar grid
   ============================================================= */

.month-view-section { min-width: 0; margin: 0 0 16px; }
.month-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 0 4px;
}
.month-title {
  font-size: 24px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.15;
}
.month-subtitle { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; }
.month-today-button {
  min-width: 72px;
  padding: 8px 14px;
  border: 1px solid var(--text-dim);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family:inherit; font-weight:700; font-size:12px; line-height:1;
  cursor: pointer;
}
.month-today-button:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-elev); }
.month-today-button:disabled { opacity: .38; cursor: default; }
.month-status {
  margin: 0 4px 8px;
  padding: 8px 10px;
  border: 1px solid rgba(196,69,54,.5);
  border-radius: 8px;
  color: var(--hh-ink-danger, #ffb4a8);
  background: rgba(196,69,54,.11);
  font-size: 11px;
}
@media (max-width: 640px) {
  .home-date-strip { gap: 8px; }
  .calendar-add-event-button { padding: 8px 9px; font-size: 11px; }
  .schedule-period-copy {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    text-align: center;
  }
  .home-date-label { font-size: 15px; }
  .home-date-meta { font-size: 12px; }
  .schedule-period-nav {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .schedule-view-stack { gap: 6px; }
  .schedule-view-btn { padding: 0 9px; }
  .schedule-kid-toggle {
    max-width: 120px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(6, minmax(92px, 1fr));
  min-height: 650px;
  overflow: hidden;
  border: 1px solid var(--bg-elev-2);
  border-radius: 12px;
  background: #14110f;
}
.month-dow {
  padding: 8px 4px;
  border-right: 1px solid var(--bg-elev-2);
  border-bottom: 1px solid var(--bg-elev-2);
  background: #171412;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .7px;
}
.month-dow:nth-child(7) { border-right: 0; }
.month-cell {
  position: relative;
  min-width: 0;
  min-height: 92px;
  padding: 3px 4px 5px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--bg-elev-2);
  border-bottom: 1px solid var(--bg-elev-2);
  border-radius: 0;
  background: #171412;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  cursor: pointer;
  transition: background .12s ease;
}
.month-cell:nth-child(7n) { border-right: 0; }
.month-cell:nth-child(n+43) { border-bottom: 0; }
.month-cell:hover { background: #201a16; }
.month-cell:focus-visible { z-index: 1; outline: 2px solid var(--accent); outline-offset: -2px; }
.month-cell.other-month { background: #13110f; }
.month-cell.other-month .month-cell-number { color: var(--text-dim); }
.month-cell.other-month .month-events { opacity: .58; }
.month-cell-header { display: flex; justify-content: center; min-height: 27px; flex: 0 0 auto; }
.month-cell-number {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--text-muted);
  font-family:inherit; font-weight:700; font-size:11px; line-height:1;
}
.month-cell.today .month-cell-number {
  background: var(--accent);
  color: #fff;
}
.month-events { display: grid; align-content: start; gap: 2px; min-height: 0; overflow: hidden; }
.month-event {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 18px;
  padding: 2px 5px 2px 7px;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  color: var(--text);
  background: var(--bg-elev);
  font-family:inherit; font-weight:650; font-size:10px; line-height:1.25;
  text-align: left;
  cursor: pointer;
}
.month-event:hover { filter: brightness(1.17); }
.month-event-kid-rail { position: absolute; inset: 0 auto 0 0; width: 3px; }
.month-event-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--calendar-kind-color, var(--accent)); }
.month-event-time { flex: 0 0 auto; color: var(--text-muted); font-size: 9px; font-weight: 600; }
.month-event-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-event.done .month-event-label { opacity: .62; text-decoration: line-through; }
.month-event.in-progress { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--calendar-kind-color, var(--accent)) 60%, transparent); }
.month-external-event {
  --calendar-kind-color: var(--external-calendar-color);
  border: 1px dashed color-mix(in srgb, var(--external-calendar-color) 72%, white);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--external-calendar-color) 25%, #17120f) 0 6px, color-mix(in srgb, var(--external-calendar-color) 13%, #17120f) 6px 12px);
}
.month-external-event.timed { border-color: transparent; background: transparent; }
.month-conflict-mark { display: inline-grid; place-items: center; width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%; background: var(--danger); color: #fff; font-size: 9px; font-weight: 900; }
.month-more { justify-self: start; border: 0; padding: 1px 5px; background: transparent; color: var(--text-muted); font-family:inherit; font-weight:750; font-size:9px; line-height:1.3; cursor: pointer; }
.month-more:hover { color: var(--text); }
.month-loading { grid-column: 1 / -1; align-self: center; justify-self: center; color: var(--text-muted); font-size: 13px; }

@media (min-width: 900px) {
  body.fullbleed-month { height: 100vh; overflow: hidden; overscroll-behavior: none; }
  body.fullbleed-month .dashboard-shell {
    display: flex;
    flex-direction: column;
    max-width: none !important;
    height: 100%;
    padding: 8px 8px 0 !important;
  }
  body.fullbleed-month .dashboard-main { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  body.fullbleed-month .month-view-section { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; margin: 0 !important; }
  body.fullbleed-month .month-grid { flex: 1 1 auto; min-height: 0; }
  body.fullbleed-month .month-cell { min-height: 0; }
}

@media (max-width: 480px) {
  .week-day { grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 12px; }
  .week-day-num { font-size: 22px; }
}

@media (max-width: 640px) {
  .month-header { align-items: center; }
  .month-title { font-size: 18px; }
  .month-subtitle { display: none; }
  .month-today-button { min-width: 0; padding: 7px 10px; font-size: 10px; }
  .month-grid { grid-template-rows: auto repeat(6, minmax(42px, 1fr)); min-height: 330px; border-radius: 8px; }
  .month-dow { padding: 5px 1px; font-size: 8px; letter-spacing: .3px; }
  .month-cell { aspect-ratio: 1 / 1; min-height: 42px; padding: 2px; }
  .month-cell-header { min-height: 19px; }
  .month-cell-number { min-width: 18px; height: 18px; padding: 0 3px; font-size: 9px; }
  .month-events { display: flex; align-content: flex-start; justify-content: center; gap: 2px; flex-wrap: wrap; }
  .month-event { width: 7px; min-height: 7px; height: 7px; flex: 0 0 7px; padding: 0; border: 0; border-radius: 50%; background: var(--calendar-kind-color, var(--accent)); }
  .month-event-kid-rail, .month-event-time, .month-event-label, .month-conflict-mark { display: none; }
  .month-external-event, .month-external-event.timed { background: var(--external-calendar-color); }
  .month-event.done { opacity: .42; }
  .month-more { width: auto; padding: 0 1px; font-size: 7px; }
}

/* =============================================================
   LOCK-TIME CHECKBOX (plan.html block-edit modal)
   ============================================================= */

.block-field-checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg-elev);
  border: 1px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
}
.block-field-checkbox input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
  margin-top: 2px;
}
.block-field-checkbox span strong {
  display: block;
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 2px;
}
.block-field-checkbox .block-field-hint {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
  font-weight: 400;
}

/* =============================================================
   MANUAL EVENT COMPOSER + HOLD-TO-ADD FEEDBACK
   ============================================================= */

.manual-event-card { display: flex; flex-direction: column; max-width: 640px; overflow: hidden; padding-bottom: 0; }
.manual-event-card > .modal-header, .manual-event-card > .block-form-actions { flex-shrink: 0; }
.manual-event-card > .block-form { min-height: 0; overflow-y: auto; padding: 2px 3px 16px; overscroll-behavior: contain; }
.manual-event-card > .block-form-actions { margin-top: 0; padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); background: var(--bg); }
.manual-event-curriculum-import { display: block; min-height: 44px; padding: 12px; border: 1px solid var(--bg-elev-2); border-radius: 8px; color: var(--accent); background: var(--bg); font-size: 14px; font-weight: 600; }
.manual-event-curriculum-import span { display: block; margin-top: 4px; color: var(--text-muted); font-size: 12px; font-weight: 400; }
.manual-event-curriculum-import:hover { border-color: var(--accent); }
.manual-event-curriculum-import:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.manual-event-card .modal-header { align-items: flex-start; }
.manual-event-card .modal-header > div { min-width: 0; }
.manual-event-eyebrow {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.manual-event-context {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}
.manual-event-kids-field,
.manual-event-time-picker {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.manual-event-kids-field > legend,
.manual-event-time-picker > legend { margin-bottom: 6px; }
.manual-event-kids {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.manual-event-kids label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--bg-elev-2);
  border-radius: 999px;
  color: var(--text);
  background: var(--bg-elev);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.manual-event-kids input { width: auto; accent-color: var(--accent); }
.manual-event-timing-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.manual-event-time-controls {
  display: grid;
  grid-template-columns: minmax(96px, 1.35fr) minmax(62px, .8fr) minmax(66px, .8fr);
  gap: 6px;
}
.manual-event-time-picker select { width: 100%; min-width: 0; }
.manual-event-time-picker small {
  display: block;
  margin-top: 5px;
  color: var(--text-dim);
  font-size: 11px;
}
.manual-event-repeat-row { align-items: end; }
.manual-event-repeat-summary {
  margin: -5px 0 0;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}
.manual-event-repeat-summary strong { color: var(--text); }
.manual-event-repeat-summary[data-kind="error"] {
  border-color: rgba(220, 80, 65, 0.45);
  background: rgba(220, 80, 65, 0.08);
  color: var(--hh-ink-danger, #efb4aa);
}
.manual-event-edit-note {
  margin: -5px 0 0;
  padding: 9px 11px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.manual-event-card .block-form-actions .btn-primary,
.manual-event-card .block-form-actions .btn-secondary {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-width: 1px;
  font-size: 14px;
  cursor: pointer;
}
.manual-event-card .block-form-actions button:disabled { opacity: .55; cursor: wait; }
.manual-event-card .block-form-msg[data-kind="ok"] { color: var(--leaf); }

.week-day,
.week-calendar-untimed-day { position: relative; }
.blank-add-hold-marker {
  position: absolute;
  z-index: 30;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  background: rgba(26, 20, 16, 0.78);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 8%, transparent);
  pointer-events: none;
  animation: blank-add-hold-progress .55s linear forwards;
}
.blank-add-hold-marker::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
@keyframes blank-add-hold-progress {
  from { transform: rotate(0deg) scale(.84); opacity: .62; }
  to { transform: rotate(360deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .blank-add-hold-marker { animation-timing-function: steps(3, end); }
}
@media (max-width: 640px) {
  .manual-event-modal { align-items: flex-end; padding: 10px; }
  .manual-event-card {
    max-height: calc(100dvh - 20px);
    padding: 18px 18px 0;
    border-radius: 18px 18px 10px 10px;
  }
  .manual-event-timing-row { grid-template-columns: 1fr; }
  .manual-event-card .block-form-actions { flex-wrap: wrap; }
  .manual-event-card .block-form-msg { flex-basis: 100%; order: -1; }
}

.kid-color-setting-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kid-color-setting input[type="color"] {
  width: 58px;
  height: 42px;
  padding: 3px;
  border: 1px solid var(--bg-elev-2);
  border-radius: 8px;
  background: var(--bg-elev);
  cursor: pointer;
}
.kid-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}
.kid-color-preset {
  width: 30px;
  height: 30px;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
  cursor: pointer;
}
.kid-color-preset.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent);
}

/* =============================================================
   HOURLY SCHEDULE GRID — Today view as a calendar
   ============================================================= */

.schedule-grid {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--bg-elev-2);
  border-radius: var(--radius);
  /* Fill all the vertical room between the date strip above and the
     fixed schedule-toolbar + tab bar below. Grid scrolls internally
     so all 24 hours are reachable. No max-height cap — full screen. */
  height: calc(100vh - 200px);
  min-height: 360px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Stops the scroll chain from bubbling to the body when you reach the
     bottom (e.g. scrolling past 11 PM). Without this, Android Chrome
     bounces the whole page up + can trigger pull-to-refresh.
     `contain` keeps internal scroll fully self-contained. */
  overscroll-behavior: contain;
}

/* ---- Full-bleed Day-schedule layout (parent.html ?view=schedule) ----
 * Kills the dashboard's centered max-width + padding so the time grid
 * runs edge-to-edge with the body. ONE scrollbar (the grid's), no outer
 * page scroll. Other views (week/month/kids) keep the original layout. */
body.fullbleed-schedule {
  overflow: hidden;
  height: 100vh;
  /* Keep body.has-tab-bar's bottom padding reservation; child uses 100%
     so the schedule grid stops above the tab bar + schedule-toolbar. */
  /* Disable browser overscroll/pull-to-refresh on the page itself. The
     schedule grid uses `contain` internally; this `none` is the fallback
     for any other gesture that lands on the body. */
  overscroll-behavior: none;
}
body.fullbleed-schedule .dashboard-shell {
  max-width: none !important;
  /* Tight to screen edges. Top has the date strip with its own breathing
     room; bottom has 0 because the schedule-toolbar (fixed) sits below. */
  padding: 8px 4px 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}
body.fullbleed-schedule .dashboard-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.fullbleed-schedule .home-schedule-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0 !important;             /* kill default .dashboard-section margins */
}
body.fullbleed-schedule .home-date-strip {
  margin-bottom: 6px;                /* was 14px — recover vertical space */
  padding: 0 4px;
}

/* Yesterday's unfinished work lives outside the scrolling hourly grid, so it
 * remains available while the parent scans the rest of today. The list gets
 * its own modest scroll ceiling when a rough day left many items behind. */
.yesterday-carryover[hidden] { display: none !important; }
.yesterday-carryover {
  flex: 0 0 auto;
  margin: 0 4px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, transparent), rgba(26, 20, 16, 0.98) 42%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  z-index: 8;
}
.yesterday-carryover-header {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px 7px 12px;
}
.yesterday-carryover-toggle {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.yesterday-carryover-icon { color: var(--accent); font-size: 22px; line-height: 1; }
.yesterday-carryover-toggle > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.yesterday-carryover-toggle strong { font-size: 14px; line-height: 1.2; }
.yesterday-carryover-toggle small { color: var(--text-muted); font-size: 11px; }
.yesterday-carryover-chevron {
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.16s ease;
}
.yesterday-complete-all {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(130, 168, 80, 0.55);
  border-radius: 999px;
  background: rgba(91, 122, 58, 0.18);
  color: var(--hh-ink-success, #cce5a7);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.yesterday-complete-all[data-confirm="1"] {
  border-color: rgba(232, 200, 122, 0.68);
  color: var(--hh-ink-warning, #f5d795);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.yesterday-carryover-body {
  max-height: min(32vh, 310px);
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.yesterday-carryover.collapsed .yesterday-carryover-body { display: none; }
.yesterday-carryover.collapsed .yesterday-carryover-chevron { transform: rotate(180deg); }
.yesterday-carryover-list { display: flex; flex-direction: column; }
.yesterday-carryover-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
.yesterday-carryover-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--carryover-kid-color, var(--accent));
}
.yesterday-carryover-item:last-child { border-bottom: 0; }
.yesterday-carryover-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.yesterday-carryover-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yesterday-carryover-copy span { color: var(--text-muted); font-size: 11px; }
.yesterday-carryover-actions { display: flex; gap: 6px; }
.yesterday-carryover-actions button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--bg-elev-2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.yesterday-carryover-actions .yesterday-carryover-complete {
  border-color: rgba(130, 168, 80, 0.48);
  color: var(--hh-ink-success, #cce5a7);
}
.yesterday-carryover-actions button:hover,
.yesterday-carryover-actions button:focus-visible { border-color: var(--accent); outline: none; }
.yesterday-carryover-actions button:disabled { opacity: 0.5; cursor: default; }
.yesterday-carryover-status {
  margin: 0;
  padding: 0 14px;
  color: var(--text-muted);
  font-size: 12px;
}
.yesterday-carryover-status:not(:empty) { padding-block: 8px; }
.yesterday-carryover-status[data-kind="error"] { color: var(--hh-ink-danger, #ffb4a8); }

body.fullbleed-schedule .schedule-grid {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
  border-radius: 6px;
  /* No bottom margin — let the grid go right up to the schedule-toolbar
     above (the toolbar is position:fixed at bottom: 72px so it floats over
     the bottom edge; body.has-tab-bar reserves padding-bottom of 124px so
     the grid's last hour stops above the toolbar). */
  margin-bottom: 0;
}

.schedule-grid-loading {
  padding: 24px;
  color: var(--text-muted);
  text-align: center;
}

/* Untimed work has no Y coordinate in the hourly grid. Keep it visible in a
 * compact row at the top of that same scroller so carryover never vanishes. */
.schedule-anytime {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: min(180px, 35%);
  padding: 10px 10px 11px;
  background: #1a1410;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.schedule-anytime-heading {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}
.schedule-anytime-count {
  min-width: 19px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  color: var(--text);
  text-align: center;
}
.schedule-anytime-list { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.schedule-anytime-list:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.schedule-anytime-card {
  min-width: min(100%, 220px);
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px 8px 11px;
  border: 1px solid var(--bg-elev-2);
  border-left: 4px solid var(--kid-calendar-color, var(--accent));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}
.schedule-anytime-card:hover,
.schedule-anytime-card:focus-within {
  border-color: var(--accent);
  border-left-color: var(--kid-calendar-color, var(--accent));
  outline: none;
}
.schedule-anytime-card.logged {
  opacity: 0.58;
  border-left-color: var(--kid-calendar-color, var(--accent));
}
.schedule-anytime-open {
  min-height: 44px;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.schedule-anytime-open:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 3px; }
.schedule-anytime-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.schedule-anytime-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.schedule-anytime-copy span { color: var(--text-muted); font-size: 11px; }

/* The All kids Day view uses one family timeline. Events created for several
 * children become one card with a split child-color rail. Unrelated events
 * that overlap in time are placed in neighboring lanes by JS. */
.schedule-grid-family { min-width: 0; }
.schedule-grid-family-header {
  position: sticky;
  top: var(--schedule-anytime-height, 0px);
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 45px;
  padding: 8px 14px;
  background: rgba(26, 20, 16, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
}
.schedule-grid-family-header strong { font-size: 14px; }
.schedule-grid-family-kids {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px 12px;
  color: var(--text-muted);
  font-size: 12px;
}
.schedule-grid-family-kids > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.schedule-grid-family-kids i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.schedule-grid-family-inner { width: 100%; }
.schedule-block-family {
  container-type: inline-size;
  container-name: familyevent;
}
.schedule-block-family.schedule-block-overlap:hover {
  transform: none;
}

.schedule-block.has-kid-bar,
.schedule-anytime-card.has-kid-bar {
  border-left-color: transparent;
}
.schedule-anytime-card.has-kid-bar { position: relative; }
.schedule-block.has-kid-bar:hover,
.schedule-block.has-kid-bar.logged,
.schedule-block.has-kid-bar.in-progress,
.schedule-anytime-card.has-kid-bar:hover,
.schedule-anytime-card.has-kid-bar:focus-within,
.schedule-anytime-card.has-kid-bar.logged {
  border-left-color: transparent;
}
.schedule-kid-ownership-bar {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  border-radius: 7px 0 0 7px;
  pointer-events: none;
}
.schedule-block-kids {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@container familyevent (max-width: 280px) {
  .schedule-block-icon { display: none; }
  .schedule-block-header .schedule-block-time { display: none; }
  .schedule-block-time-below { display: block; }
  .schedule-block-kids { display: none; }
}

/* "All kids" picker row gets a slight accent so it stands out from the
 * per-kid rows below it. */
.schedule-kid-pick-row.schedule-kid-pick-all {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}
.schedule-kid-pick-row.schedule-kid-pick-all .schedule-kid-avatar {
  font-size: 11px;
  letter-spacing: 1px;
  background: var(--bg-elev-2);
  color: var(--accent);
}

.schedule-grid-inner {
  position: relative;
  /* height set by JS to 24 * HOUR_HEIGHT */
  /* Time-of-day background — subtle hint of warm/cool through the day.
   * Stays mostly in the dark family so it never clashes with block cards
   * or makes the schedule "loud". The eye reads "morning, midday, evening"
   * without the gradient screaming. Updated 2026-05-08 to dial back the
   * earlier near-#aed4e8 daylight blue which was too bright. */
  background: linear-gradient(
    to bottom,
    #1a1410 0%,                /* midnight */
    #1a1410 21%,               /* 5 AM — still dark */
    #251820 25%,               /* 6 AM — barely-there purple tint */
    #2e201a 28%,               /* 6:30 AM — barely-there warm */
    #2f2a1f 31%,               /* 7 AM — soft golden hint */
    #2a3d5e 35%,               /* 8 AM — leaning more blue */
    #2c4775 50%,               /* noon — clearly blue, still dark */
    #2a3d5e 65%,               /* 4 PM — same blue */
    #2f2a1f 70%,               /* 5 PM — back to warm hint */
    #2e1f1a 74%,               /* 6 PM — soft orange-brown */
    #251820 78%,               /* 7 PM — purple tint again */
    #1f1612 82%,               /* 8 PM — dimming */
    #1a1410 86%,               /* 9 PM — night */
    #1a1410 100%               /* midnight */
  );
}

/* Each hour row is a horizontal band with a label on the left */
.schedule-hour-row {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.schedule-hour-row:first-child { border-top: 0; }
/* Subtle band shading for daytime hours so it's easier to scan */
.schedule-hour-row[data-hour="6"],  .schedule-hour-row[data-hour="7"],
.schedule-hour-row[data-hour="8"],  .schedule-hour-row[data-hour="9"],
.schedule-hour-row[data-hour="10"], .schedule-hour-row[data-hour="11"],
.schedule-hour-row[data-hour="12"], .schedule-hour-row[data-hour="13"],
.schedule-hour-row[data-hour="14"], .schedule-hour-row[data-hour="15"],
.schedule-hour-row[data-hour="16"], .schedule-hour-row[data-hour="17"] {
  background: rgba(255, 255, 255, 0.012);
}

.schedule-hour-label {
  position: absolute;
  left: 6px;
  top: -7px;
  font-size: 10px;
  font-weight: 600;
  /* Bright white to match event titles. The text-shadow keeps it readable
   * over the lighter midday-blue band of the gradient. */
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: transparent;
  padding: 0 3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  z-index: 1;
}

/* Block cards positioned absolutely inside the grid — full-width to give
   the title plenty of room. Hour labels in the corner show through where
   blocks don't cover. */
.schedule-block {
  position: absolute;
  /* 50px gutter — wider than the hour-label width (~32px including its
     bg padding) so labels like "9 AM" / "12 PM" don't get covered by the
     block's left edge. Was 36px; bumped 2026-05-07 after a parent reported
     the overlap. */
  left: 50px;
  right: 6px;
  background: var(--bg);
  border: 1.5px solid var(--bg-elev-2);
  border-left: 4px solid var(--kid-calendar-color, var(--accent));
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  transition: transform 0.12s ease, border-color 0.12s ease;
  cursor: pointer;
  z-index: 2;
}
.schedule-block:hover {
  border-color: var(--accent);
  border-left-color: var(--kid-calendar-color, var(--accent));
  transform: translateX(2px);
}
.schedule-block.logged {
  opacity: 0.55;
  border-left-color: var(--kid-calendar-color, var(--accent));
}
/* Block was bumped — kid didn't finish the lesson, schedule shifted. Subtle
 * dashed border on the left so it's distinguishable from a fresh block but
 * not faded out (still active in the day). */
.schedule-block.in-progress {
  border-left-style: dashed;
  border-left-color: var(--kid-calendar-color, var(--accent));
}
/* Chore blocks — softer treatment so they read as "routine" not "primary". */
.schedule-block[data-type="chore"] {
  background: rgba(26, 20, 16, 0.85);
}
/* Meal blocks — warm gold accent. */
.schedule-block[data-type="meal"] {
  background: rgba(26, 20, 16, 0.85);
}

/* Title-left + time-right header row */
.schedule-block-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-width: 0;     /* allows the title to ellipsis instead of pushing time off */
}
.schedule-block-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
  /* Wrap long labels (e.g. "Botanical Garden of the Ozarks") onto multiple
   * lines instead of clipping with ellipsis. Block height is set by the
   * scheduled duration so the wrapped text fits inside if there's room.
   * If the label is taller than the block, we cap with line-clamp. */
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.schedule-block-icon {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
  /* Default placement: lead the title — visually [icon][label][time][⋯].
   * Narrow containers hide the icon (see @container rule below).
   * margin-right: 0 — the flex gap already provides icon-label spacing,
   * and we don't want it doubled. */
  order: -1;
  margin-right: 0;
}
.schedule-block-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
/* Second-line time used when a family event is placed in a narrow overlap
 * lane. overflow:hidden on the card means the line gets clipped if there is
 * no vertical room — the title wins. */
.schedule-block-time-below {
  display: none;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.1;
  margin-top: 2px;
}
.schedule-block-curriculum {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-block-logged-tag {
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-size: 10px;
  color: var(--leaf);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Pencil + camera are direct buttons, while retaining the green evidence
   check when that kind of activity has already been saved. */
.schedule-block-indicators {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}
.schedule-block-indicator {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  opacity: 0.55;
  filter: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.schedule-block-indicator:hover,
.schedule-block-indicator:focus-visible {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  outline: none;
}
.schedule-block-indicator.active {
  opacity: 1;
}
.schedule-block-indicator.active::after {
  content: "✓";
  position: absolute;
  bottom: -3px;
  right: -6px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: var(--leaf);
  border-radius: 50%;
  width: 11px;
  height: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--bg);
  line-height: 1;
}

/* Visual hint when a neighbor has been pushed down by a drag in progress */
.schedule-block.displaced, .week-calendar-event.displaced {
  opacity: 0.85;
  border-style: dashed;
}
.schedule-block.reorder-preview:not(.dragging), .week-calendar-event.reorder-preview:not(.dragging) {
  transition: top 160ms ease, opacity 120ms ease;
}
.schedule-block.dragging, .week-calendar-event.dragging { transition: none; }
.schedule-block.reorder-blocked, .week-calendar-event.reorder-blocked { outline: 2px solid #f87171; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .schedule-block.reorder-preview, .week-calendar-event.reorder-preview { transition: none; }
}

/* Resize handle on the bottom edge of soft blocks. Sized generously
   for thumb hits even on phones; the visual grip is a small horizontal
   bar centered on the bottom edge. */
.schedule-block-resize-handle {
  position: absolute;
  /* Was full-width (left:0; right:0), which made the entire bottom edge
   * a drag target — too easy to grab accidentally when scrolling or
   * tapping. Now constrained to a ~60px wide hit area centered on the
   * gray grip itself, so the parent has to deliberately aim at the grip. */
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  bottom: -6px;
  height: 14px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  touch-action: none;
}
.schedule-resize-grip {
  display: block;
  width: 28px;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  transition: background 0.12s ease, width 0.12s ease;
}
.schedule-block:hover .schedule-resize-grip,
.schedule-block-resize-handle.active .schedule-resize-grip {
  background: var(--accent);
  width: 44px;
}

/* While resizing, lift the block slightly to draw attention */
.schedule-block.resizing {
  border-color: var(--accent);
  border-left-color: var(--kid-calendar-color, var(--accent));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  z-index: 50;
}

/* Locked blocks: distinct visual so the parent knows they're hard-scheduled */
.schedule-block.locked {
  background: linear-gradient(135deg, var(--bg) 0%, rgba(74, 143, 217, 0.08) 100%);
  border-color: rgba(74, 143, 217, 0.4);
  border-left-color: var(--kid-calendar-color, var(--accent));
  cursor: pointer;     /* still clickable to log; just not draggable */
}
.schedule-block.locked .schedule-block-label {
  font-weight: 700;
}

/* Drag state: lifted block follows the finger */
.schedule-block.dragging {
  transform: scale(1.03);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 0 2px var(--accent);
  z-index: 100;
  cursor: grabbing;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  /* The transition on `top` is removed during drag for snappy feel */
}
.schedule-block:not(.dragging) {
  transition: top 0.18s ease, transform 0.12s ease, border-color 0.12s ease;
}
/* Allow the calendar to scroll vertically when the user touches a block
   and immediately swipes — only the long-press timer (380ms) elevates
   the gesture into a drag. Also disables the 300ms double-tap-zoom
   delay, so taps register instantly. */
.schedule-block { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.schedule-block:active { transform: scale(0.99); }

/* Now-line: thin red line across the grid with a clock label */
.schedule-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--danger);
  z-index: 5;
  pointer-events: none;
}
.schedule-now-line::before {
  content: "";
  position: absolute;
  left: 56px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(196, 69, 54, 0.25);
}
.schedule-now-time {
  position: absolute;
  left: 6px;
  top: -7px;
  font-size: 10px;        /* match .schedule-hour-label so it doesn't stick out wider */
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--danger);
  background: transparent;
  padding: 0 3px;
  /* Same shadow treatment as the hour labels so the red "now" stays
   * legible without a solid pill background. Shadow is dark so the red
   * pops cleanly on lighter dusty-blue daytime regions of the gradient. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

@media (max-width: 480px) {
  .schedule-grid { height: calc(100vh - 240px); }
  .schedule-hour-label { font-size: 9px; }
  .schedule-now-time   { font-size: 9px; }     /* keep parity with hour labels on mobile */
  .schedule-block { left: 46px; right: 4px; padding: 5px 8px; }
  .schedule-block-label { font-size: 13px; }
  .schedule-block-time { font-size: 10px; }
}

/* =============================================================
   ACTIVITY MODAL — rich context, bottom action bar, kid picker,
   mood row, dictation recording state, photo preview, etc.
   ============================================================= */

.act-modal-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  /* Use almost the entire viewport height — only a small top/bottom inset
     for visual breathing. Gives the activity-modal real estate for photos
     + dictation + multi-row buttons without a tight scroll. */
  max-height: calc(100vh - 16px);
  height: calc(100vh - 16px);
}
/* Trim the backdrop's vertical padding for the activity modal so the card
   actually approaches full-screen. Other modals keep the 24px breathing
   room. :has() needs Chrome 105+ / Safari 15.4+ — fine for the parent
   audience. Falls back gracefully (just smaller card). */
.modal-backdrop:has(> .act-modal-card) { padding: 8px 24px; }
.act-modal-card .modal-header.act-modal-header {
  padding: 16px 22px 12px;
  margin-bottom: 0;
  align-items: flex-start;
}
.act-modal-title-wrap {
  flex: 1;
  min-width: 0;
}
.act-modal-title-wrap h2 {
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
}
.act-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.act-edit-event-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
  font-family:inherit; font-weight:750; font-size:13px; line-height:1;
  cursor: pointer;
}
.act-edit-event-btn:hover,
.act-edit-event-btn:focus-visible {
  background: var(--accent);
  color: #fff;
  outline: none;
}
.act-modal-subtitle {
  margin-top: 2px;
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.4px;
}
.act-modal-subtitle.is-editable { cursor: pointer; }
.act-modal-subtitle.is-editable:hover { opacity: 0.85; }
.act-modal-subtitle-edit { opacity: 0.7; font-size: 12px; }
.act-modal-subtitle.is-editing { color: var(--text); }

@media (max-width: 520px) {
  .act-modal-card .modal-header.act-modal-header { gap: 10px; padding-inline: 16px; }
  .act-modal-title-wrap h2 { font-size: 19px; }
  .act-edit-event-btn { padding-inline: 10px; }
}

.act-time-editor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.act-time-editor input[type="time"] {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--bg-elev-2);
  border-radius: 6px;
  padding: 4px 6px;
  font: inherit;
  font-size: 14px;
  letter-spacing: normal;
}
.act-time-editor .act-time-arrow { color: var(--text-muted); font-weight: 400; }
.act-time-editor button {
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.act-time-editor .act-time-save {
  background: var(--accent);
  color: #1a1410;
}
.act-time-editor .act-time-cancel {
  background: var(--bg-elev-2);
  color: var(--text);
}

.act-time-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.act-time-scope-q {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: normal;
}
.act-time-scope-btn {
  border: 1px solid var(--bg-elev-2);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.act-time-scope-btn:hover { background: var(--bg-elev-2); border-color: var(--accent); }
.act-time-scope-cancel {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
}
.act-time-saving { color: var(--text-muted); font-style: italic; }
.act-time-error { color: var(--hh-ink-danger, #ffb4a8); font-size: 13px; }
.act-time-retry {
  background: var(--accent);
  color: #1a1410;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 4px;
}

.act-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.act-modal-details {
  font-size: 16px;
  color: var(--text);
  font-style: italic;
  line-height: 1.4;
  margin: 0;
}
.act-modal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.act-quick-log-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.act-quick-log-btn {
  flex: 1 1 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--bg-elev-2);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.act-quick-log-btn:hover,
.act-quick-log-btn:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); outline: none; }
.workshop-modal-card #ws-print-guide { flex-basis: 100%; border-color: color-mix(in srgb, var(--accent) 48%, var(--bg-elev-2)); color: var(--accent); }

/* ---- Rich context block (what's supposed to happen) ---- */
.act-context {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.act-context-time {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--accent);
  font-weight: 600;
}
.act-context-label {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.act-context-meta {
  font-size: 13px;
  color: var(--text-muted);
}
.act-context-details {
  font-size: 15px;
  color: var(--text);
  font-style: italic;
  line-height: 1.5;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 25%, transparent);
  margin-top: 4px;
}
.act-context-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.act-context-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--bg-elev-2);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
}
.act-context-link:hover { border-color: var(--accent); }
.act-modal-details { white-space: pre-line; }
.act-modal-details a { color: var(--accent); text-decoration: underline; overflow-wrap: anywhere; }
.act-context-link { overflow-wrap: anywhere; max-width: 100%; }
.hh-directions-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: 8px; color: var(--text); background: var(--bg-elev-2); text-decoration: none; }
.hh-directions-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Photo preview (multi-photo grid + delete + add-another) ---- */
/* Always-visible Images section header. Sits between the notes textarea
 * and the emoji row; serves as the empty-state placeholder when no
 * photos are attached yet, and as a visible label once photos arrive. */
.act-photo-section {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--bg-elev);
}
.act-photo-section-header {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.act-photo-section-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.act-photo-section-hint {
  font-size: 12px; color: var(--text-muted); font-style: italic;
}

.act-photo-preview {
  /* Inside the section now — no own border/padding/bg. */
  display: flex; flex-direction: column; gap: 8px;
}
.act-photo-preview:empty { min-height: 0; }

/* "+ Add image" button at the bottom of the Images section. Triggers the
 * native file picker (which on iOS/Android shows Camera + Gallery options
 * in a single sheet). */
.act-photo-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; margin-top: 4px;
  border: 1.5px dashed rgba(255,255,255,0.18);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.02); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.act-photo-add-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.act-photo-add-btn:active { transform: scale(0.98); }
.act-photo-add-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #000; font-weight: 800;
}
.act-photo-add-label { font-size: 14px; }

/* Inline Camera/Gallery sub-menu shown after tapping "+ Add image". Two
 * primary options + a small ✕ to dismiss without picking. */
.act-photo-add-menu {
  margin-top: 4px;
  display: flex; gap: 8px; align-items: stretch;
}
.act-photo-add-menu[hidden] { display: none; }
.act-photo-add-option {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 12px 6px;
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  background: var(--bg-elev); color: var(--text);
  font: inherit; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.act-photo-add-option:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.act-photo-add-option:active { transform: scale(0.97); }
.act-photo-add-option .act-action-icon { font-size: 22px; line-height: 1; }
.act-photo-add-cancel {
  flex: 0 0 auto;
  width: 44px; padding: 0;
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: 16px; cursor: pointer;
}
.act-photo-add-cancel:hover { color: var(--hh-ink-danger, #ffb4a8); border-color: rgba(196,69,54,0.4); }

/* Chore checklist — used for block_type='chore' instead of the notes/photo UI.
 * Each line of block.details renders as a tappable checkbox. State is visual-
 * only for now (placeholder UX); persistence comes when the chore data model
 * lands. */
.act-chore-checklist {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 4px;
}
.act-chore-checklist[hidden] { display: none; }
.act-chore-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.act-chore-item:hover { background: rgba(255,255,255,0.06); }
.act-chore-item.is-done { background: rgba(91,122,58,0.18); border-color: rgba(91,122,58,0.4); }
.act-chore-item.is-done .act-chore-text { text-decoration: line-through; color: var(--text-muted); }
.act-chore-check {
  width: 22px; height: 22px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.act-chore-text { font-size: 15px; color: var(--text); flex: 1; }

/* When the modal is in chore-mode, hide the lesson-style fields. The
 * chore checklist + the title is the whole UI — no notes, no photos, no
 * subject/source pickers, no save row. The ✕ closes the modal. */
.modal-backdrop.act-modal-chore .act-modal-subject-source-row,
.modal-backdrop.act-modal-chore .act-quick-log-actions,
.modal-backdrop.act-modal-chore .block-field:has(#act-modal-notes),
.modal-backdrop.act-modal-chore .act-photo-section,
.modal-backdrop.act-modal-chore .act-action-bar,
.modal-backdrop.act-modal-chore .act-mood-row,
.modal-backdrop.act-modal-chore .act-bottom-row {
  display: none;
}

/* Meal-mode is even simpler — just a label + time. Hide the form fields
 * for now (placeholder; future: meal name, photo of the plate). */
.modal-backdrop.act-modal-meal .act-modal-subject-source-row,
.modal-backdrop.act-modal-meal .act-action-bar,
.modal-backdrop.act-modal-meal .act-mood-row {
  display: none;
}

/* ---- Workshop modal (HHModals.openWorkshop) ---- */
.workshop-modal-card .modal-body { padding-bottom: 24px; }
.ws-section { margin-top: 18px; }
.ws-section[hidden] { display: none; }
.ws-section:first-child { margin-top: 4px; }
.ws-section-title {
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin: 0 0 8px 0;
}
.ws-section-body {
  margin: 0; font-size: 14px; line-height: 1.45; color: var(--text);
}
.ws-materials-list,
.ws-steps-list {
  margin: 0; padding-left: 22px;
  display: flex; flex-direction: column; gap: 6px;
  color: var(--text);
}
.ws-materials-list li,
.ws-steps-list li {
  font-size: 14px; line-height: 1.4;
}
.ws-section-blurb { background: color-mix(in srgb, var(--accent) 6%, transparent); border-left: 3px solid var(--accent); padding: 10px 12px; border-radius: 6px; }
.ws-section-blurb .ws-section-title { color: var(--accent); }
.ws-section-setup { background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); padding: 12px; border-radius: 9px; }
.ws-section-worksheet { background: rgba(59, 130, 184, .08); border: 1px solid rgba(59, 130, 184, .24); padding: 12px; border-radius: 9px; }
.ws-section-biz   { background: rgba(91,122,58,0.10); border-left: 3px solid #82a850; padding: 10px 12px; border-radius: 6px; }
.ws-section-biz   .ws-section-title { color: var(--hh-ink-success, #b8d99c); }
.act-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}
.act-photo-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.act-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.act-photo-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(26, 20, 16, 0.85);
  border: 1px solid var(--bg-elev-2);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.act-photo-del:hover { background: var(--danger); border-color: var(--danger); }
.act-photo-add {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 2px dashed var(--bg-elev-2);
  border-radius: 8px;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.act-photo-add:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* Print-only two-page workshop guide. It is added to <body> just long enough
   for the browser's native Print / Save PDF dialog, so printing never opens a
   second browser window. */
.workshop-print-sheet { display: none; }
.theme-discovery-status { padding: 12px 16px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev-2); font-size: 13px; line-height: 1.5; }
.theme-discovery-status p { margin: 0; }
.theme-discovery-status button { margin-top: 8px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; }
.workshop-rich-guide { margin: 20px 0; line-height: 1.6; }
.workshop-rich-guide > section { margin: 0 0 18px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.workshop-rich-guide h2 { margin: 0 0 10px; font-size: 18px; }
.workshop-rich-guide h3 { margin: 0 0 6px; font-size: 15px; }
.workshop-rich-guide p { margin: 6px 0 12px; }
.workshop-mission { border-left: 4px solid var(--accent) !important; }
.workshop-artwork { margin: 0 0 18px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: #20374d; break-inside: avoid; }
.workshop-artwork img { display: block; width: 100%; height: auto; max-height: 330px; object-fit: contain; }
.workshop-artwork img[hidden] { display: none; }
.workshop-artwork figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.weekly-resource-workshop-art { object-fit: contain; background: #fff; }
.workshop-visual-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.workshop-visual-grid figure { margin: 0; padding: 10px; border-radius: 10px; background: #f3f6f9; color: #20374d; }
.workshop-visual-grid svg { width: 100%; max-height: 160px; display: block; }
.workshop-visual-grid figcaption { font-size: 13px; font-weight: 700; line-height: 1.4; }
.workshop-facilitator-question { margin: 14px 0; }
.workshop-source { font-size: 12px; }
.workshop-observation-table { margin: 18px 0; }
.workshop-observation-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.workshop-observation-table th,.workshop-observation-table td { border: 1px solid #aeb9c3; padding: 8px; text-align: left; overflow-wrap: anywhere; }
.workshop-observation-table th { background: #eef3f7 !important; }
.workshop-drawing-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.workshop-drawing-pair > div { min-height: 3.5in; padding: 12px; border: 1px solid #8797a4; border-radius: 10px; }
@media print {
  .workshop-print-rich .workshop-rich-guide { break-before: page; }
  .workshop-print-intro { break-inside: avoid; }
  .workshop-print-sheet .workshop-print-intro .workshop-artwork { margin: 0 0 10px; padding: 6px; border-color: #b9c5ce; }
  .workshop-print-sheet .workshop-print-intro .workshop-artwork img { max-height: 2.6in; }
  .workshop-print-sheet .workshop-print-intro .workshop-artwork figcaption { font-size: 8pt; margin-top: 3px; }
  .workshop-print-rich .workshop-artwork { padding: 6px; margin-bottom: 10px; border-color: #b9c5ce; }
  .workshop-print-rich .workshop-artwork img { max-height: 2in; }
  .workshop-print-rich .workshop-artwork figcaption { font-size: 8pt; margin-top: 3px; }
  .workshop-print-rich .workshop-rich-guide > section { border-color: #b9c5ce; padding: 10px; margin-bottom: 10px; }
  .workshop-print-rich .workshop-rich-guide h2 { font-size: 13pt; }
  .workshop-print-rich .workshop-rich-guide h3 { font-size: 10pt; }
  .workshop-print-rich .workshop-rich-guide p { margin: 4px 0 7px; }
  .workshop-print-rich .workshop-rich-guide section:not(.workshop-teaching-guide), .workshop-facilitator-question { break-inside: avoid; }
  .workshop-print-rich .workshop-visual-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  .workshop-print-rich .workshop-visual-grid figure { padding: 5px; }
  .workshop-print-rich .workshop-visual-grid figcaption { font-size: 8pt; }
  .workshop-print-rich .workshop-visual-grid svg { max-height: 110px; }
  .workshop-print-rich .workshop-print-worksheet { min-height: 0 !important; }
  .workshop-print-rich .workshop-observation-table th { font-size: 9pt; }
  .workshop-print-rich .workshop-observation-table td { height: .32in; }
  .workshop-print-rich .workshop-print-prompts { gap: 10px; }
  .workshop-print-rich .workshop-draw-tell .workshop-print-prompt { margin: 24px 0; }
}
.act-photo-add-plus { font-size: 26px; line-height: 1; }
.act-photo-add-label { font-size: 12px; font-weight: 600; }
.act-photo-warn {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

/* ---- Pinned bottom region: emoji row + action bar + submit row ---- */
.act-modal-pinned {
  position: relative;            /* anchors the absolute kid-picker overlay */
  border-top: 1px solid var(--bg-elev);
  background: var(--bg);
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

/* Mood row (5 emoji buttons) */
.act-mood-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.act-mood-btn {
  background: var(--bg-elev);
  border: 1.5px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 10px 0;
  font-size: 26px;
  cursor: pointer;
  font-family: inherit;
  min-height: 48px;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.act-mood-btn:hover { background: var(--bg-elev-2); }
.act-mood-btn.selected {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  border-color: var(--accent);
  transform: scale(1.05);
}

/* Kid picker column (toggled by Kid button) — overlay so it doesn't shove
   the emoji row up; emojis hide BEHIND it which is fine because the
   picker collapses as soon as a kid is chosen. */
.act-kid-picker {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(78px + env(safe-area-inset-bottom));   /* sits just above action bar + submit row */
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 6px;
  background: var(--bg-elev);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
  z-index: 10;
}
.act-kid-pick-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.act-kid-pick-row:hover {
  background: var(--bg);
  border-color: var(--bg-elev-2);
}
.act-kid-pick-row.selected {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}

/* Action bar — 4 buttons (Kid / Photo / Dictate / Done) */
.act-action-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.act-action-bar.four-cols  { grid-template-columns: repeat(4, 1fr); }
/* Three-column layout: Kid (compact) + the two save buttons (wider).
 * Used by the activity modal after we collapsed the camera/gallery/dictate
 * row into the photo section + native keyboard mic. */
.act-action-bar.three-cols { grid-template-columns: 0.65fr 1fr 1fr; }
.act-action-bar.record-only { grid-template-columns: 0.65fr 2fr; }

/* Inline save buttons live in the same row as Kid — match the action-btn
 * shape (icon on top, label below) so the row reads as one unit. They keep
 * their accent colors so the eye still finds them as the primary action. */
.act-save-btn.act-save-inline {
  flex-direction: column;
  gap: 3px;
  padding: 10px 6px;
  min-height: 60px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius);
}
.act-save-btn.act-save-inline .act-action-icon { font-size: 22px; line-height: 1; }
.act-save-btn.act-save-inline .act-save-label  { font-size: 12px; text-align: center; line-height: 1.15; }

/* Save row: two big CTAs side by side. Still working (left, neutral) +
 * Completed (right, primary green). Sits under the action bar in row 3. */
.act-save-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.act-save-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 12px;
  border-radius: var(--radius);
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--bg-elev-2); background: var(--bg-elev); color: var(--text);
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.act-save-btn:active { transform: scale(0.98); }
.act-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.act-save-btn .act-action-icon { font-size: 18px; line-height: 1; }
.act-save-btn .act-save-label { font-size: 15px; }
.act-save-still { color: var(--hh-ink-warning, #f5c887); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.act-save-still:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); }
.act-save-done {
  background: rgba(91,122,58,0.12); border-color: rgba(91,122,58,0.45); color: var(--hh-ink-success, #b8d99c);
}
.act-save-done:hover { background: rgba(91,122,58,0.20); border-color: #82a850; }
/* "Active" state — applied by JS when this button matches the block's
 * current completion_status. Visually marks the saved choice so the parent
 * sees which one is "live" and can re-tap the other to flip. */
.act-save-btn.act-save-active {
  filter: brightness(1.0);
}
.act-save-still.act-save-active {
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--hh-ink-warning, #f5c887); border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent) inset;
}
.act-save-done.act-save-active {
  background: rgba(91,122,58,0.30); color: var(--hh-ink-success, #d9e9bf); border-color: #82a850;
  box-shadow: 0 0 0 2px rgba(91,122,58,0.25) inset;
}
.act-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 6px;
  min-height: 60px;
  background: var(--bg-elev);
  border: 1.5px solid var(--bg-elev-2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.act-action-btn:hover { background: var(--bg-elev-2); border-color: var(--accent); }
.act-action-btn:active { transform: scale(0.97); }
.act-action-icon { font-size: 22px; line-height: 1; }
.act-action-label { font-size: 12px; font-weight: 600; }

.act-action-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.act-action-btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Recording state for the Dictate button (pulse + red glow) */
.act-action-btn.recording {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  animation: act-pulse 1.2s ease-in-out infinite;
}
.act-action-btn.recording:hover { background: #d4574a; border-color: #d4574a; }
@keyframes act-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 69, 54, 0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(196, 69, 54, 0); }
}

/* Avatar circle used inside the Kid button + Kid picker rows */
.act-kid-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}

/* Bottom row: status message + (when editing) delete-as-link */
.act-bottom-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 16px;
}
.act-bottom-row .block-form-msg { flex: 1; font-size: 13px; }
.act-delete-link {
  background: transparent;
  border: 0;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.act-delete-link:hover { color: var(--hh-ink-danger, #e26054); }
/* Two-step delete: first tap arms the button. Second tap within 4s deletes.
 * The "armed" state visually escalates so a thumb-skim can't dispatch the
 * destructive action — same pattern Slack/GitHub use. */
.act-delete-link.act-delete-armed {
  background: rgba(196, 69, 54, 0.15);
  color: var(--hh-ink-danger, #ffb4a8);
  text-decoration: none;
  border: 1px solid rgba(196, 69, 54, 0.5);
  border-radius: 8px;
  padding: 8px 12px;
  animation: act-delete-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes act-delete-pulse {
  from { box-shadow: 0 0 0 0 rgba(196, 69, 54, 0.0); }
  to   { box-shadow: 0 0 0 4px rgba(196, 69, 54, 0.18); }
}

@media (max-width: 480px) {
  .yesterday-carryover-header { align-items: flex-start; }
  .yesterday-carryover-item { grid-template-columns: 1fr; gap: 7px; }
  .yesterday-carryover-actions { width: 100%; }
  .yesterday-carryover-actions button { flex: 1 1 0; }
  .yesterday-complete-all { max-width: 134px; white-space: normal; line-height: 1.1; }
  .schedule-anytime-list { flex-direction: column; flex-wrap: nowrap; }
  .schedule-anytime-card { min-width: 0; flex: 0 0 auto; width: 100%; }
  .act-action-btn { padding: 8px 4px; min-height: 56px; }
  .act-action-icon { font-size: 20px; }
  .act-action-label { font-size: 11px; }
  .act-mood-btn { font-size: 24px; padding: 8px 0; }
  .act-context-label { font-size: 18px; }
}

/* =============================================================
   KID SUB-DASHBOARD (kid.html)
   ============================================================= */

.kid-today-blocks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kid-today-block {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--bg-elev-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.kid-today-block:hover {
  border-color: var(--accent);
  transform: translateX(2px);
}
.kid-today-block-done {
  opacity: 0.65;
}
.kid-today-block-time {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}
.kid-today-block-body { display: flex; flex-direction: column; gap: 4px; }
.kid-today-block-label {
  font-size: 17px;
  color: var(--text);
  font-weight: 500;
}
.kid-today-block-curriculum {
  font-size: 13px;
  color: var(--text-muted);
}
.kid-today-block-log {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.kid-today-block-log:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.kid-today-block-log.logged {
  background: rgba(91, 122, 58, 0.2);
  border-color: var(--leaf);
  color: var(--leaf);
}

.activity-entry-blocktag {
  font-size: 11px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 500;
}

.kid-profile-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--bg-elev-2);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.kid-profile-row {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}
.kid-profile-row strong { color: var(--text-muted); font-weight: 500; }

/* =============================================================
   TODAY DETAIL PANEL — log button + status
   ============================================================= */

.detail-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bg-elev);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.detail-log-btn {
  width: 100%;
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.detail-logged-status {
  font-size: 14px;
  color: var(--leaf);
  font-weight: 500;
}

/* Calendar color has two independent jobs: the narrow rail says WHO owns an
   event, while this muted background says WHAT kind of event it is. Text and
   icons remain the primary labels so the distinction never depends on color
   alone. These shared rules cover Day, Any time, desktop/mobile Week, and the
   detailed Weekly planner. */
:is(.schedule-block, .schedule-anytime-card, .week-calendar-event,
    .week-calendar-untimed-card, .week-block-chip, .planner-block, .month-event)[data-calendar-kind="curriculum"] {
  --calendar-kind-color: #d97706;
}
:is(.schedule-block, .schedule-anytime-card, .week-calendar-event,
    .week-calendar-untimed-card, .week-block-chip, .planner-block, .month-event)[data-calendar-kind="book"] {
  --calendar-kind-color: #2f9e74;
}
:is(.schedule-block, .schedule-anytime-card, .week-calendar-event,
    .week-calendar-untimed-card, .week-block-chip, .planner-block, .month-event)[data-calendar-kind="video"] {
  --calendar-kind-color: #8b6bc7;
}
:is(.schedule-block, .schedule-anytime-card, .week-calendar-event,
    .week-calendar-untimed-card, .week-block-chip, .planner-block, .month-event)[data-calendar-kind="workshop"] {
  --calendar-kind-color: #c45a78;
}
:is(.schedule-block, .schedule-anytime-card, .week-calendar-event,
    .week-calendar-untimed-card, .week-block-chip, .planner-block, .month-event)[data-calendar-kind="field_trip"] {
  --calendar-kind-color: #3b82b8;
}
:is(.schedule-block, .schedule-anytime-card, .week-calendar-event,
    .week-calendar-untimed-card, .week-block-chip, .planner-block, .month-event)[data-calendar-kind="chore"] {
  --calendar-kind-color: #6f8a51;
}
:is(.schedule-block, .schedule-anytime-card, .week-calendar-event,
    .week-calendar-untimed-card, .week-block-chip, .planner-block, .month-event)[data-calendar-kind]:not([data-calendar-kind="other"]) {
  background: color-mix(in srgb, var(--calendar-kind-color) 31%, #1a1410);
}
.month-event.timed[data-calendar-kind] { background: transparent; }
@media (max-width: 640px) {
  .month-event.timed[data-calendar-kind] { background: var(--calendar-kind-color, var(--accent)); }
}

/* =============================================================
   Mobile tweaks
   ============================================================= */

@media (max-width: 768px) {
  .kid-today-block { grid-template-columns: 90px 1fr auto; gap: 10px; padding: 12px 14px; }
  .kid-today-block-time { font-size: 12px; }
  .kid-today-block-label { font-size: 15px; }
  .kid-action-btn { padding: 12px 16px; font-size: 15px; }
  .modal-card-wide { max-width: 100%; }
}

/* Kept last so later component rules cannot override printable records/week. */
@media print {
  @page { margin: .35in; size: landscape; }
  @page workshop-guide { margin: .48in; size: letter portrait; }
  body { background: white !important; color: black !important; padding: 0 !important; overflow: visible !important; height: auto !important; }
  .no-print, .tab-bar, .schedule-toolbar, .calendar-add-event-fab, .weekly-resources, .schedule-recovery,
  .records-tabs, .records-global-status, .today-footer { display: none !important; }
  .dashboard-shell, .dashboard-main, .week-view-section, .week-grid { width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
  .week-calendar-desktop { display: flex !important; min-height: 6.7in !important; border-color: #bbb !important; background: white !important; color: black !important; }
  .week-calendar-desktop * { color: black !important; border-color: #ccc !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  :is(.week-calendar-event, .week-calendar-untimed-card)[data-calendar-kind]:not([data-calendar-kind="other"]) {
    background: color-mix(in srgb, var(--calendar-kind-color) 14%, white) !important;
  }
  .week-list-mobile { display: none !important; }
  .records-shell { width: 100% !important; padding: 0 !important; }
  .records-panel { border: 0 !important; padding: 0 !important; background: white !important; }
  .records-panel[hidden] { display: none !important; }
  .records-table th, .records-table td { color: black !important; border-color: #bbb !important; }
  .portfolio-preview { max-width: none !important; min-height: 0 !important; padding: 0 !important; }

  body.workshop-print-mode > :not(.workshop-print-sheet) { display: none !important; }
  html:has(body.workshop-print-mode), body.workshop-print-mode { background: #fff !important; }
  body.workshop-print-mode .workshop-print-sheet {
    page: workshop-guide;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #1f2933 !important;
    background: white !important;
    font: 10.5pt/1.4 Arial, Helvetica, sans-serif !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .workshop-print-sheet * { box-sizing: border-box; color: inherit !important; }
  .workshop-print-header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; padding-bottom: 14px; border-bottom: 3px solid #d97706; }
  .workshop-print-header p, .workshop-print-worksheet-heading p { margin: 0 0 4px; color: #a65300 !important; font-size: 8pt; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .workshop-print-header h1 { margin: 0; font-size: 24pt; line-height: 1.08; }
  .workshop-print-header > span { flex: 0 0 auto; padding: 6px 9px; border: 1px solid #e7b16f; border-radius: 999px; color: #7c3e00 !important; font-size: 8.5pt; font-weight: 700; }
  .workshop-print-overview { margin: 14px 0; padding: 10px 12px; border-left: 4px solid #d97706; background: #fff7e8 !important; font-size: 11pt; }
  .workshop-print-prep-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 14px; }
  .workshop-print-prep-grid > section, .workshop-print-instructions, .workshop-print-extension { break-inside: avoid; margin: 0 0 12px; padding: 12px 14px; border: 1px solid #d7dde3; border-radius: 10px; }
  .workshop-print-sheet h2 { margin: 0 0 8px; color: #7c3e00 !important; font-size: 13pt; }
  .workshop-print-sheet ul, .workshop-print-sheet ol { margin: 0; padding-left: 22px; }
  .workshop-print-sheet li { margin: 0 0 5px; break-inside: avoid; }
  .workshop-print-checklist { padding-left: 0 !important; list-style: none; }
  .workshop-print-checklist li { display: flex; align-items: flex-start; gap: 7px; }
  .workshop-print-checkbox { flex: 0 0 11px; width: 11px; height: 11px; margin-top: 2px; border: 1.5px solid #4b5563; border-radius: 2px; }
  .workshop-print-extension { border-left: 4px solid #6f8a51; background: #f4f8ed !important; }
  .workshop-print-extension p { margin: 0; }
  .workshop-print-worksheet { break-before: page; min-height: 9.2in; padding-top: 2px; }
  .workshop-print-worksheet-heading { display: flex; justify-content: space-between; gap: 25px; align-items: flex-end; padding-bottom: 12px; border-bottom: 3px solid #3b82b8; }
  .workshop-print-worksheet-heading h2 { margin: 0; color: #1f5f88 !important; font-size: 22pt; }
  .workshop-print-name-lines { display: grid; grid-template-columns: 2.2in 1.35in; gap: 14px; }
  .workshop-print-name-lines span { display: block; padding: 0 0 3px; border-bottom: 1px solid #4b5563; color: #4b5563 !important; font-size: 8pt; }
  .workshop-print-prompts { display: grid; gap: 13px; margin-top: 18px; }
  .workshop-print-prompt { break-inside: avoid; }
  .workshop-print-prompt h3, .workshop-print-drawing h3 { margin: 0 0 10px; font-size: 10.5pt; font-weight: 700; }
  .workshop-print-prompt span { display: block; height: 21px; border-bottom: 1px solid #9aa3ad; }
  .workshop-print-drawing { min-height: 3.2in; margin-top: 18px; padding: 12px; border: 1.5px dashed #7b8794; border-radius: 8px; }
  .workshop-print-footer { position: static; margin-top: 16px; text-align: center; color: #6b7280 !important; font-size: 7pt; }
}

/* ---- Read-only personal-calendar overlays ----------------------------- */
.calendar-layer-control { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.calendar-layer-label { flex: 0 0 auto; color: var(--text-muted); font-size: 11px; }
.calendar-layer-toggle {
  display: flex;
  height: 36px;
  padding: 2px;
  border: 1.5px solid var(--bg-elev-2);
  border-radius: 999px;
  background: var(--bg-elev);
}
.calendar-layer-toggle button {
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: var(--text-muted);
  background: transparent;
  font-family:inherit; font-weight:700; font-size:11px; line-height:1;
  cursor: pointer;
}
.calendar-layer-toggle button.active { color: #fff; background: #356b9f; }
.calendar-layer-mobile { display: none; }

.schedule-block.personal-calendar-conflict {
  right: calc(50% + 2px) !important;
  width: auto !important;
}
.schedule-external-event {
  position: absolute;
  left: 50px;
  right: 6px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 6px 10px;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--external-calendar-color) 78%, white);
  border-left: 5px solid var(--external-calendar-color);
  border-radius: 8px;
  color: var(--text);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--external-calendar-color) 23%, #17120f) 0 8px, color-mix(in srgb, var(--external-calendar-color) 13%, #17120f) 8px 16px);
  text-align: left;
  cursor: pointer;
}
.schedule-external-event.calendar-conflict { left: calc(50% + 28px); }
.schedule-external-event strong { max-width: 100%; overflow: hidden; font-size: 13px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.schedule-external-event span, .schedule-external-event small { color: var(--text-muted); font-size: 10px; }
.schedule-external-anytime {
  border-left: 5px solid var(--external-calendar-color) !important;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--external-calendar-color) 20%, #17120f) 0 8px, color-mix(in srgb, var(--external-calendar-color) 10%, #17120f) 8px 16px) !important;
  color: var(--text);
  text-align: left;
}
.schedule-external-anytime strong, .schedule-external-anytime span { display: block; }
.schedule-external-anytime span { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.calendar-conflict-mark {
  position: absolute;
  top: 4px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #1a1410 !important;
  background: #f6c453;
  font-size: 11px !important;
  font-weight: 900;
  line-height: 1;
}
.week-calendar-external-event {
  z-index: 5;
  border: 1px dashed color-mix(in srgb, var(--external-calendar-color) 78%, white);
  border-left: 5px solid var(--external-calendar-color);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--external-calendar-color) 24%, #17120f) 0 7px, color-mix(in srgb, var(--external-calendar-color) 12%, #17120f) 7px 14px);
}
.week-calendar-event.personal-calendar-conflict { right: calc(50% + 2px); }
.week-calendar-external-event.calendar-conflict { left: calc(50% + 2px); right: 4px; }
.week-calendar-external-untimed {
  border-left: 5px solid var(--external-calendar-color);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--external-calendar-color) 22%, #17120f) 0 7px, color-mix(in srgb, var(--external-calendar-color) 10%, #17120f) 7px 14px);
}
.week-block-external {
  width: 100%;
  padding: 6px 8px;
  border: 1px dashed color-mix(in srgb, var(--external-calendar-color) 75%, white);
  border-left: 4px solid var(--external-calendar-color);
  border-radius: 6px;
  color: var(--text);
  background: color-mix(in srgb, var(--external-calendar-color) 15%, var(--bg));
  font-family:inherit; font-weight:700; font-size:11px; line-height:1.25;
  text-align: left;
}
.external-event-dialog {
  width: min(520px, calc(100vw - 28px));
  max-height: min(720px, calc(100vh - 28px));
  padding: 22px;
  overflow: auto;
  border: 1px solid var(--bg-elev-2);
  border-radius: 16px;
  color: var(--text);
  background: #17120f;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.external-event-dialog::backdrop { background: rgba(0,0,0,.72); }
.external-event-dialog form { float: right; }
.external-event-dialog h2 { margin: 5px 42px 18px 0; font-size: 24px; }
.external-event-eyebrow { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.external-event-dialog dl { display: grid; gap: 12px; margin: 0; }
.external-event-dialog dl > div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; }
.external-event-dialog dt { color: var(--text-muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.external-event-dialog dd { margin: 0; white-space: pre-wrap; line-height: 1.45; }
.external-event-readonly { margin: 18px 0 8px; color: var(--text-muted); font-size: 12px; }
.external-event-link { color: var(--accent); font-weight: 700; }

@media (max-width: 640px) {
  .schedule-toolbar { gap: 4px; padding-inline: 5px; }
  .schedule-kid-toggle { max-width: 42px; width: 42px; padding: 5px 8px; }
  .schedule-kid-name, .schedule-kid-chevron { display: none; }
  .calendar-layer-toggle { display: none; }
  .calendar-layer-label { display: none; }
  .calendar-layer-mobile { display: block; width: 76px; height: 36px; color: transparent; font-size: 0; }
  .calendar-layer-mobile select { width: 76px; height: 36px; padding: 4px 5px; border: 1.5px solid var(--bg-elev-2); border-radius: 999px; color: var(--text); background: var(--bg-elev); font-family:inherit; font-weight:700; font-size:10px; line-height:1; }
  .schedule-view-stack { gap: 2px; }
  .schedule-period-controls { height: 36px; }
  .schedule-period-nav { width: 28px; height: 28px; flex-basis: 28px; }
  .schedule-view-toggle { height: 36px; }
  .schedule-view-btn { padding-inline: 7px; font-size: 11px; }
  .external-event-dialog { padding: 18px; }
}

/* The family theme sits above the calendar and follows its visible week. */
.week-view-section > .home-date-strip { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,340px) minmax(0,1fr); align-items: center; flex-shrink: 0; }
.week-view-section > .home-date-strip > .schedule-period-copy { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
.week-view-section > .home-date-strip .home-date-meta { font-size: 11px; }
.week-view-section .week-header-actions { justify-content: flex-end; }
.week-theme { position: relative; min-width: 0; width: 100%; text-align: left; }
.week-theme label { display: block; margin: 0 0 4px; color: var(--accent); font-size: 11px; font-weight: 700; }
.week-theme label span { color: var(--text-muted); font-weight: 400; font-size: 10px; }
.week-theme-entry { display: flex; gap: 6px; }
.week-theme-entry input { width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid var(--bg-elev-2); border-radius: 10px; color: var(--text); background: var(--bg-elev); font-family: inherit; font-size: 16px; }
.week-theme-entry input::placeholder { color: var(--text-muted); }
.week-theme-entry input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.week-theme-entry button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent); color: #17120f; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.week-theme-entry button:disabled { opacity: .45; cursor: default; }
.week-theme-status { margin: 4px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.week-theme-status:empty { display: none; }
.week-theme-status.error { color: var(--hh-ink-danger, #ffb6a8); }
.week-theme-popover { position: absolute; z-index: 100; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(420px,calc(100vw - 32px)); max-height: min(480px,55vh); overflow-y: auto; overscroll-behavior: contain; padding: 14px; border: 1px solid var(--bg-elev-2); border-radius: 14px; background: #211a15; box-shadow: 0 12px 32px #0009; }
.week-theme-popover[hidden] { display: none; }
.week-theme-popover-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.week-theme-popover-heading button { min-width: 36px; min-height: 36px; border: 0; border-radius: 50%; color: var(--text); background: var(--bg-elev); cursor: pointer; }
.week-theme-popover p { margin: 6px 0 12px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.week-theme-suggestion { display: block; width: 100%; min-height: 52px; margin-top: 6px; padding: 10px 12px; text-align: left; border: 1px solid var(--bg-elev-2); border-radius: 9px; color: var(--text); background: var(--bg); font-family: inherit; cursor: pointer; }
.week-theme-suggestion:hover, .week-theme-suggestion:focus-visible { border-color: var(--accent); outline: 1px solid var(--accent); }
.week-theme-suggestion strong { display: block; font-size: 13px; }
.week-theme-suggestion span { display: block; margin-top: 4px; color: var(--text-muted); font-size: 11px; }
.week-theme-suggestion .week-theme-suggestion-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin:0; }
.week-theme-suggestion-heading strong { flex:1 1 165px; min-width:0; color:var(--text); overflow-wrap:anywhere; }
.week-theme-suggestion .week-theme-suggestion-sources { flex:0 1 auto; margin:0 0 0 auto; text-align:right; color:var(--accent); font-size:10px; line-height:1.4; }
.week-theme-suggestion .week-theme-suggestion-reason { line-height:1.5; overflow-wrap:anywhere; }
.week-theme-local-status a { color:var(--accent); text-decoration:underline; }
.week-theme-suggestion-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:6px; }
.week-theme-event-source { min-width:44px; min-height:44px; margin-top:6px; padding:8px; border:1px solid var(--bg-elev-2); border-radius:9px; background:var(--bg-elev); color:var(--accent); font:inherit; font-size:11px; cursor:pointer; }
.week-theme-event-source:focus-visible,.week-theme-event-dialog button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.week-theme-event-dialog { margin:auto; width:480px; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); box-sizing:border-box; overflow:auto; overscroll-behavior:contain; padding:16px; border:1px solid var(--bg-elev-2); border-radius:14px; background:var(--bg-elev); color:var(--text); font:inherit; text-align:left; box-shadow:0 12px 32px #0009; }
.week-theme-event-dialog::backdrop { background:rgba(0,0,0,.55); }
.week-theme-event-dialog header { position:sticky; top:-16px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; background:var(--bg-elev); }
.week-theme-event-dialog h2 { margin:0; font-size:16px; line-height:1.4; }
.week-theme-event-dialog button { flex-shrink:0; min-width:44px; min-height:44px; border:1px solid var(--bg-elev-2); border-radius:50%; background:var(--bg); color:var(--text); font:inherit; cursor:pointer; }
.week-theme-event-dialog p { font-size:12px; line-height:1.5; color:var(--text-muted); overflow-wrap:anywhere; }
.week-theme-event-dialog [data-theme] { color:var(--accent); font-weight:700; }
.week-theme-event-dialog ul { padding-left:22px; }
.week-theme-event-dialog li { margin:10px 0; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
@media (max-width: 899px) {
  .week-view-section > .home-date-strip { grid-template-columns: minmax(0,1fr); justify-items: center; gap: 12px; }
  .week-view-section > .home-date-strip > .schedule-period-copy { align-items: center; }
  .week-theme { max-width: 420px; }
}
@media print { .week-theme { display: none; } }

/* Inbound calendar health remains visible beside layer controls. */
#calendar-overlay-health{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.75rem;max-width:38rem} #calendar-overlay-health:empty{display:none} #calendar-overlay-health button{min-height:36px;padding:5px 9px}

/* Onboarding: line up input boxes along the bottom of each row, whatever their labels' height. */
.wizard-row { align-items: end; }
.wizard-row > .wizard-remove { align-self: end; }
.wizard-help { margin: 0 0 12px; color: var(--text-muted); line-height: 1.5; font-size: 14px; }
/* Week view: the now-line crosses only today's column; its time sits in the hour column (October 6). */
.week-calendar-lane > .week-calendar-now-line { left: 0; right: 0; }
.week-calendar-now-label { position: absolute; left: 2px; right: 3px; z-index: 3; transform: translateY(-50%); padding: 1px 2px; border-radius: 4px; background: #b83c2e; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.3; text-align: center; white-space: nowrap; pointer-events: none; }
/* Shared events show only the split child-color bar, whatever their state (locked, resizing, ...). */
.schedule-block.has-kid-bar.locked, .schedule-block.has-kid-bar.resizing, .schedule-block.has-kid-bar.locked:hover { border-left-color: transparent; }