/* ============================================
   MyDay Design System
   Target: iPhone 15 Pro, iOS 17+, Guided Access
   UX law: 60px min touch, 24pt min text, no scroll
   ============================================ */

:root {
  /* ── Soothing B palette ─────────────────────────────────── */
  --color-success: #3D8B5C;
  --color-action: #B8860B;
  --color-bg: #FAF8F5;
  --color-header-morning: #8FB4D4;
  --color-header-afternoon: #C9A227;
  --color-header-evening: #4A3B7A;
  --color-header-night: #252B3B;
  --color-danger: #A63D3D;
  /* Talk-to-someone bar: inviting, not alarm (Grampy — friendly assistant) */
  --color-talk-bar: #3A5A7A;
  --color-talk-bar-text: #C5D8E8;
  --color-text: #1a1a1a;
  --color-text-light: #FFFFFF;
  --color-text-muted: #666666;
  --color-card-bg: #FFFEFB;
  --color-secondary-btn: #999999;
  --color-success-bg: #E8F5EC;
  --color-success-gradient: linear-gradient(135deg, #E8F5EC 0%, #F5F0E0 100%);
  --color-rest-bg: #E3F2FD;
  --font-stack: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-headline: var(--font-stack);
  --radius: 16px;
  --transition-speed: 300ms;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-stack);
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- Eternal Header (top 15%) ---- */

#eternal-header {
  position: fixed;
  /* Start below the iOS status bar so yellow/blue header never bleeds
     behind it. env(safe-area-inset-top) = 59px on iPhone 15 Pro. */
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  /* Fixed height so view-container never overlaps when greeting wraps to two lines.
     Design: top ~15% of screen; 100px fits two lines of 24pt at 1.2 line-height. */
  min-height: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 16px;
  z-index: 100;
  background: var(--color-header-morning);
  transition: background var(--transition-speed) ease;
}

/* Inner flex column — greeting centred in header */
.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#eternal-header .greeting {
  font-family: var(--font-headline);
  font-size: 24pt;
  font-weight: 700;
  color: var(--color-text-light);
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Evening/night header needs light text that contrasts with dark bg */
#eternal-header.block-evening .greeting,
#eternal-header.block-night .greeting {
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Afternoon header has yellow bg -- use dark text */
#eternal-header.block-afternoon .greeting {
  color: var(--color-text);
  text-shadow: none;
}

/* ---- View Container (below header) ---- */

#view-container {
  position: fixed;
  /* Push below the header: safe-area + 100px so content never overlaps wrapped greeting. */
  top: calc(env(safe-area-inset-top, 0px) + 100px);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Align content to top so tall task cards don't get centered and overlap the header. */
  justify-content: flex-start;
  padding: 16px;
  /* Extra bottom space so primary button (e.g. "All Done") stays above browser chrome. */
  padding-bottom: 48px;
}

/* Reserve space for the "Talk to someone" banner in celebration screen.
   Caption and "See you..." hint must sit above the bar (not under it).
   Bar: 12px + 80px per button + 8px gap + 12px; safe-area at bottom. */
#view-container.rest-state-with-banner {
  padding-bottom: calc(240px + env(safe-area-inset-bottom, 0px));
}

/* ---- View transitions ---- */

.view {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-height: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-speed) ease-out,
              transform var(--transition-speed) ease-out;
}

.view.view-active {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Task Card ---- */

.task-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

/* Content area: static bits never shrink so question/title never disappear; only grid shrinks. */
.task-card-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Question, subtext, hint stay visible — do not shrink (overlap prevention). */
.task-card-content > .task-question,
.task-card-content > .task-subtext,
.task-card-content > .multi-select-hint {
  flex-shrink: 0;
}

/* Hero area: flexible center block for confirmation tasks; fills space between question and buttons. */
.task-hero-area {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.task-hero-area .task-hero-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.task-hero-emoji {
  font-size: clamp(48px, 18vh, 120px);
  line-height: 1;
  text-align: center;
}

/* Grid wrapper is the only area that shrinks when space is tight. */
.task-grid-wrapper {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* One row: Not yet (left), Done / confirmation (right). Always on screen; no overlaps (Grampy: mapping). */
.task-action-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 8px;
}

.task-action-row .btn {
  flex: 1;
  min-width: 0;
  min-height: 60px;
  font-size: 20pt;
  padding: 12px 16px;
}

.task-question {
  font-family: var(--font-headline);
  font-size: 28pt;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  color: var(--color-text);
}

.task-subtext {
  font-size: 20pt;
  text-align: center;
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* Evening/night: question and labels must contrast on purple/dark gradient */
body.block-evening .task-question,
body.block-night .task-question {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

body.block-evening .task-subtext,
body.block-night .task-subtext {
  color: rgba(255,255,255,0.9);
}

body.block-evening .multi-select-hint,
body.block-night .multi-select-hint {
  color: rgba(255,255,255,0.75);
}

/* Hero emoji: ensure contrast on evening/night gradients */
body.block-evening .task-hero-emoji,
body.block-night .task-hero-emoji {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* ---- Button System (60px+ touch targets) ---- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 80px;
  padding: 16px 24px;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-stack);
  font-size: 24pt;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  touch-action: manipulation;
  transition: transform 150ms ease, filter 150ms ease;
  text-align: center;
  line-height: 1.2;
}

.btn:active {
  transform: scale(0.97);
  filter: brightness(1.15);
}

.btn-primary {
  background: var(--color-success);
  color: var(--color-text-light);
  box-shadow: 0 4px 12px rgba(34,139,34,0.3);
}

.btn-secondary {
  background: var(--color-secondary-btn);
  color: var(--color-text-light);
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-text-light);
  box-shadow: 0 4px 0 #8b0000, 0 6px 12px rgba(0,0,0,0.3);
}

.btn-danger:active {
  box-shadow: 0 2px 0 #8b0000, 0 3px 6px rgba(0,0,0,0.3);
  transform: translateY(2px) scale(0.98);
}

.btn-pagination {
  background: #4A6FA5;
  color: #ffffff;
  min-height: 60px;
  font-size: 20pt;
  font-weight: 700;
}

.grid-pagination-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.grid-pagination-label {
  font-size: 14pt;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
}

.btn-pagination-last {
  background: rgba(74, 111, 165, 0.85);
  font-size: 16pt;
}

/* Reserve space when task has only one page so "See more options" doesn't appear/disappear */
.grid-pagination-spacer {
  min-height: 72px;
  margin-top: 12px;
}

/* ---- Selection Grid ---- */

/* 6 options per screen (3 rows x 2). Compact gap so 3 rows fit; question/title never move. */
.selection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}

/* Tile: 80px min-height (still >60px touch); grid is only shrinkable area so no overlap. */
.grid-tile {
  min-height: 80px;
  border-radius: var(--radius);
  background: var(--color-card-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  cursor: pointer;
  -webkit-appearance: none;
  touch-action: manipulation;
  border: 3px solid transparent;
  transition: transform 150ms ease, border-color 150ms ease;
  font-family: var(--font-stack);
}

.grid-tile:active {
  transform: scale(0.95);
  border-color: var(--color-success);
}

.grid-tile.tile-selected {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  box-shadow: 0 2px 12px rgba(34,139,34,0.25);
}

.grid-tile.tile-selected::before {
  content: '\2713';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 18pt;
  font-weight: 700;
  color: var(--color-success);
  line-height: 1;
  z-index: 1;
}

.grid-tile.tile-selected {
  overflow: visible;
}

.grid-tile .tile-emoji {
  font-size: 32px;
  line-height: 1;
}

.grid-tile .tile-label {
  font-size: 16pt;
  font-weight: 700;
  text-align: center;
  color: var(--color-text);
  line-height: 1.1;
}

.grid-tile .tile-initial {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22pt;
  font-weight: 700;
  color: var(--color-text-light);
}

.grid-tile img.tile-image {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 12px;
}

/* ---- Multi-select hint (subtle so it doesn't compete with the question) ---- */

.multi-select-hint {
  font-size: 14pt;
  color: var(--color-text-muted);
  opacity: 0.85;
  text-align: center;
  margin-top: 2px;
}

.multi-done-btn {
  transition: opacity var(--transition-speed) ease, transform 150ms ease, filter 150ms ease;
}

.multi-done-btn.hidden {
  display: none;
}

/* ---- Ghost Task (already completed) ---- */

.ghost-task {
  width: 100%;
  background: var(--color-success-bg);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ghost-task .ghost-icon {
  font-size: 64px;
}

.ghost-task .ghost-message {
  font-size: 24pt;
  font-weight: 700;
  color: var(--color-success);
  line-height: 1.3;
}

.ghost-task .ghost-time {
  font-size: 20pt;
  color: var(--color-text-muted);
}

/* ---- Success Overlay ---- */

#success-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-success-gradient);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-speed) ease;
}

#success-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

#success-overlay .success-icon {
  font-size: 120px;
  animation: popIn 400ms ease-out;
}

#success-overlay .success-phrase {
  font-size: 28pt;
  font-weight: 700;
  text-align: center;
  color: var(--color-text);
  line-height: 1.3;
}

#success-overlay .success-specific {
  font-size: 22pt;
  text-align: center;
  color: var(--color-success);
  line-height: 1.3;
}


/* ---- Activity Takeover (full-screen, no pop-up per Myday Design) ---- */

.activity-takeover {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  flex: 1;
  min-height: 0;
  padding: 0 16px;
}

.activity-takeover-icon {
  font-size: 48pt;
  line-height: 1;
}

.activity-takeover-icon .activity-takeover-hero-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.activity-takeover-heading {
  font-size: 24pt;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.activity-takeover-text {
  font-size: 22pt;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
}

.activity-takeover-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 8px;
}

.activity-thumbs-btn,
.activity-maybe-later {
  min-width: 60px;
  min-height: 60px;
  padding: 12px 24px;
  font-size: 28pt;
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.activity-thumbs-up {
  background: var(--color-success-bg);
  border: 2px solid var(--color-success);
  color: var(--color-success);
}

.activity-thumbs-down {
  background: #fff5f5;
  border: 2px solid var(--color-danger);
  color: var(--color-danger);
}

.activity-maybe-later {
  background: var(--color-bg);
  border: 2px solid var(--color-secondary-btn);
  color: var(--color-text-muted);
  font-size: 18pt;
}

.activity-thumbs-btn:active,
.activity-maybe-later:active {
  opacity: 0.8;
}

body.block-evening .activity-takeover-heading,
body.block-evening .activity-takeover-text,
body.block-night .activity-takeover-heading,
body.block-night .activity-takeover-text {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ---- Celebration Reward ---- */

.celebration-reward {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  flex: 1;
  min-height: 0;
  padding: 0 16px;
}

.celebration-reward-icon {
  font-size: 64pt;
  line-height: 1;
}

.celebration-reward-heading {
  font-size: 24pt;
  font-weight: 700;
  color: var(--color-success);
  line-height: 1.3;
}

.celebration-reward-stats {
  font-size: 20pt;
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.3;
  display: none;
}

.celebration-reward-text {
  font-size: 26pt;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.celebration-reward-prompt {
  font-size: 20pt;
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.celebration-reward-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 8px;
}

.celebration-reward-buttons .activity-thumbs-btn,
.celebration-reward-buttons .activity-maybe-later {
  min-width: 60px;
  min-height: 60px;
}

body.block-evening .celebration-reward-heading,
body.block-evening .celebration-reward-text,
body.block-evening .celebration-reward-stats,
body.block-night .celebration-reward-heading,
body.block-night .celebration-reward-text,
body.block-night .celebration-reward-stats {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

body.block-evening .celebration-reward-stats,
body.block-night .celebration-reward-stats {
  color: rgba(255,255,255,0.9);
}

body.block-evening .celebration-reward-prompt,
body.block-night .celebration-reward-prompt {
  color: rgba(255,255,255,0.9);
}

body.block-evening .celebration-reward-heading,
body.block-night .celebration-reward-heading {
  color: #C9A227;
}

/* ---- Vacation Screen ---- */
/* Full-screen warm celebration screen when caregiver enables Vacation Mode.
   Reuses the same centered-column pattern as activity-takeover. */

.vacation-screen {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  flex: 1;
  min-height: 0;
  padding: 40px 24px;
}

.vacation-screen-icon {
  font-size: 72pt;
  line-height: 1;
}

.vacation-screen-heading {
  font-size: 32pt;
  font-weight: 700;
  color: var(--color-text, #2D3339);
  line-height: 1.2;
}

.vacation-screen-sub {
  font-size: 22pt;
  font-weight: 400;
  color: var(--color-text-muted, #6B737C);
}

body.block-evening .vacation-screen-heading,
body.block-night .vacation-screen-heading {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

body.block-evening .vacation-screen-sub,
body.block-night .vacation-screen-sub {
  color: rgba(255,255,255,0.8);
}

/* ---- Celebration Screen (rest-state class for layout) ---- */

.rest-state {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  flex: 1;
  min-height: 0;
}

.rest-state .rest-message {
  font-size: 31pt;
  font-weight: 700;
  color: var(--color-success);
  line-height: 1.2;
}

.rest-state .rest-submessage {
  font-size: 22pt;
  color: var(--color-text-muted);
}

/* Photo frame: fills space between message and Contact button; top of image always visible */
.rest-state .rest-photo-frame {
  width: 100%;
  flex: 1;
  min-height: 38vh;
  max-height: none;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Caption between image and Contact button (not on top of image) */
.rest-state .rest-photo-caption {
  flex-shrink: 0;
  padding: 8px 16px 0;
  font-size: 18pt;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  line-height: 1.3;
}

body.block-evening .rest-state .rest-photo-caption,
body.block-night .rest-state .rest-photo-caption {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Photo controls: overlay at bottom right of photo (60px min touch targets) */
.rest-state .rest-photo-controls {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  z-index: 2;
}

.rest-state .rest-photo-btn {
  min-width: 60px;
  min-height: 60px;
  padding: 0;
  font-size: 28pt;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rest-state .rest-photo-btn:active {
  opacity: 0.7;
}

/* Anchor image to top so faces/heads are always shown in the box */
.rest-state .rest-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius);
  transition: opacity 1s ease;
}

.rest-state .rest-next-hint {
  font-size: 22pt;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  line-height: 1.3;
}

/* Evening/night: "See you tomorrow." must be readable on purple (design: text always readable) */
body.block-evening .rest-state .rest-next-hint,
body.block-night .rest-state .rest-next-hint {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ---- Emergency Bar ---- */

#emergency-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 8px;
  display: none;
  z-index: 90;
  width: 100%;
  box-sizing: border-box;
}

#emergency-bar.visible {
  display: block;
}

#emergency-bar-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#emergency-bar-content a,
#emergency-bar-content .btn {
  display: flex;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  text-decoration: none;
}

/* Spacer keeps subsequent buttons aligned with the first (which has an avatar) */
.emergency-bar-avatar-spacer {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

/* "Talk to someone" banner — navy only; override .btn-danger so bar is never red */
#emergency-bar-content .emergency-bar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 80px;
  background: var(--color-talk-bar);
  color: var(--color-talk-bar-text);
  box-shadow: 0 4px 12px rgba(27,58,92,0.35);
}

#emergency-bar-content .emergency-bar-btn:active {
  filter: brightness(1.1);
}

/* 56px avatar: large enough to recognise a face at a glance */
.emergency-bar-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}

/* Label + icon on same line; label takes remaining space, icon on the right */
.emergency-bar-label {
  flex: 1;
  text-align: left;
}

.emergency-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}

.emergency-bar-icon-svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* ---- Idle Dim Overlay ---- */

#dim-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
}

#dim-overlay.visible {
  display: flex;
}

/* Wrapper for dim content so items stack centered */
.dim-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 32px 24px;
  max-width: 420px;
  width: 100%;
}

#dim-overlay .dim-text {
  font-size: 24pt;
  color: rgba(255,255,255,0.6);
  text-align: center;
}

/* Call button shown on the dim overlay when a callable person is available */
.dim-call-btn {
  display: block;
  width: 100%;
  padding: 20px 24px;
  background: var(--color-danger);
  color: var(--color-text-light);
  font-family: var(--font-stack);
  font-size: 24pt;
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 0 #8b0000, 0 6px 20px rgba(0,0,0,0.4);
  touch-action: manipulation;
}

/* ---- Loading / Warm State ---- */

.warm-state {
  text-align: center;
  padding: 40px 24px;
}

.warm-state .warm-text {
  font-size: 24pt;
  color: var(--color-text-muted);
}

/* ---- Animations ---- */

@keyframes popIn {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Tap flash -- brief white overlay on any button press */
.btn::after,
.grid-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.3);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 100ms;
  pointer-events: none;
}

.btn,
.grid-tile {
  position: relative;
  overflow: hidden;
}

.btn:active::after,
.grid-tile:active::after {
  opacity: 1;
}

/* ---- Safe area padding for iPhone notch ---- */

/* Header is already positioned below the status bar via top: env(safe-area-inset-top).
   Do not add safe-area as header padding or the fixed 100px height gets eaten and greeting overflows. */
@supports (padding-top: env(safe-area-inset-top)) {
  #view-container {
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
  }
  #emergency-bar {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ================================================================
   Circadian Backgrounds — Phase 1: Static Gradients
   Applied to <body> via body.block-* class set in app.js.
   The gradient fills the entire viewport behind all content.
   Cards, buttons, and overlays keep their solid white surfaces
   so no interactive element ever floats directly over a gradient.
   ================================================================ */

/* Base: gradient layer behind everything, fixed so it never scrolls */
body.block-morning,
body.block-afternoon,
body.block-evening,
body.block-night {
  background-attachment: fixed;
}

/* Morning — Soothing B: muted steel blue fading to warm cream */
body.block-morning {
  background: linear-gradient(180deg,
    #8FB4D4 0%,      /* steel blue at top (matches header) */
    #B8D0E8 30%,     /* lighter mid-sky */
    #F0D9B8 75%,     /* warm peach horizon */
    #FAF0E6 100%     /* pale cream at bottom */
  );
}

/* Afternoon — Soothing B: soft blue sky warming to golden horizon */
body.block-afternoon {
  background: linear-gradient(180deg,
    #7AA8D0 0%,      /* muted blue at top */
    #A8C8E0 40%,     /* lighter mid-sky */
    #EDE5C0 80%,     /* warm golden near horizon */
    #FAF5E0 100%     /* very pale warm white at bottom */
  );
}

/* Evening — Soothing B: deep plum fading to rose-plum horizon */
body.block-evening {
  background: linear-gradient(180deg,
    #2A1F4A 0%,      /* deep plum at top */
    #4A3B7A 25%,     /* matches header color */
    #6B4A82 60%,     /* warm plum mid */
    #9B4A72 100%     /* rose-plum at horizon */
  );
}

/* Night — Soothing B: near-black to dark slate */
body.block-night {
  background: linear-gradient(180deg,
    #0F0A1A 0%,      /* near-black at top */
    #1A1525 40%,     /* deep dark */
    #252B3B 70%,     /* matches header color */
    #1A2030 100%     /* dark blue-black at bottom */
  );
}

/* Evening + night: body text switches to light so any un-carded text
   (e.g. .warm-text during loading) stays readable on dark backgrounds */
body.block-evening .warm-state .warm-text,
body.block-night .warm-state .warm-text {
  color: rgba(255, 255, 255, 0.75);
}

/* ---- Task anchor hint (catch-up: task from prior block) ---- */
/* Rendered inside the task card by tasks.js when task.anchor != currentBlock */

.task-anchor-hint {
  font-size: 13pt;
  color: var(--color-text-muted);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: -4px; /* tighten gap before question text */
}