.motivation-page {
  min-height: calc(100dvh - 140px);
  padding: 20px;
  padding-bottom: calc(136px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
}


.motivation-top {
  display: grid;
  gap: 6px;
}


.motivation-readme-card {
  width: min(100%, 640px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* The parent's grid (place-items:end) sizes its implicit row from this card's
     unclamped intrinsic content height, which visually misplaces a tall, max-height
     clamped card. Taking the card out of grid flow and self-centering avoids that. */
  position: fixed;
  inset: 0;
  margin: auto;
}

.motivation-readme-body {
  display: grid;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.motivation-readme-section {
  display: grid;
  gap: 6px;
}

.motivation-readme-section h3 {
  color: var(--text);
}

.motivation-readme-section p {
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0;
}

.motivation-readme-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.motivation-readme-compare-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: var(--bg-elev);
  box-shadow: var(--shadow);
}

.motivation-readme-compare-card strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
}

.motivation-readme-compare-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.motivation-readme-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.4;
}

.motivation-readme-closing {
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0;
  border-top: 1px solid var(--divider-color);
  padding-top: 12px;
}


.motivation-focal-area {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}


.motivation-focal-area .empty-state {
  border-radius: 24px;
  padding: 24px 20px;
  text-align: center;
}


.motivation-viewer {
  display: grid;
  width: 100%;
  gap: 24px;
}

.motivation-content-section {
  display: grid;
  gap: 14px;
}

.motivation-content-section[aria-labelledby="motivationGoalsHeading"] {
  order: -1;
}

.motivation-section-heading {
  margin: 0;
  color: var(--text);
  font-size: 1.15rem;
}

.motivation-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
}


.motivation-hero-card {
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border) 76%);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--primary-soft) 55%, var(--bg-elev) 45%), var(--bg-elev));
  padding: 20px 16px 16px;
  text-align: center;
  display: grid;
  gap: 12px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 10%, transparent);
  min-height: unset;
  /* Let vertical scroll pass through natively; horizontal swipe is handled in JS. */
  touch-action: pan-y;
}

@keyframes motivationSlideExitLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-6%);
  }
}

@keyframes motivationSlideExitRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(6%);
  }
}

@keyframes motivationSlideEnterFromRight {
  from {
    opacity: 0;
    transform: translateX(6%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes motivationSlideEnterFromLeft {
  from {
    opacity: 0;
    transform: translateX(-6%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.motivation-hero-card.motivation-quote-exit-left {
  animation: motivationSlideExitLeft 150ms ease-in forwards;
}

.motivation-hero-card.motivation-quote-exit-right {
  animation: motivationSlideExitRight 150ms ease-in forwards;
}

.motivation-hero-card.motivation-quote-enter-right {
  animation: motivationSlideEnterFromRight 200ms ease-out;
}

.motivation-hero-card.motivation-quote-enter-left {
  animation: motivationSlideEnterFromLeft 200ms ease-out;
}


.motivation-hero-label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.78;
}


.motivation-hero-text {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: pre-wrap;
  max-width: 100%;
  margin-inline: auto;
}


.motivation-hero-reference {
  margin: 0;
  margin-top: 16px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-soft);
  opacity: 0.78;
}


.quote-count {
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--text-soft);
  margin-top: 4px;
}


.motivation-card-menu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

[hidden] {
  display: none;
}

.motivation-card-menu {
  margin-top: 0;
  transition: opacity 150ms ease, transform 150ms ease;
}

/* Higher specificity than [hidden] so a closed menu can't be forced visible by the rule above. */
.motivation-card-menu[hidden] {
  display: none;
}

.motivation-action {
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--text) 18%);
  border-radius: 10px;
  padding: 9px 16px;
  background: color-mix(in srgb, var(--bg-elev) 82%, var(--text) 18%);
  color: var(--text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.motivation-action:hover,
.motivation-action:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 62%, var(--bg-elev) 38%);
}

.motivation-action:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.motivation-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.motivation-action-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary, #fff);
}

.motivation-action-danger {
  border-color: color-mix(in srgb, var(--border) 62%, #a65d64 38%);
  color: color-mix(in srgb, var(--text) 72%, #a65d64 28%);
}

.motivation-menu-toggle {
  width: 44px;
  padding-inline: 0;
  font-size: 1.35rem;
  line-height: 1;
}

.motivation-hero-card > .motivation-card-menu {
  margin-top: 0;
}

.motivation-goal-empty {
  min-height: 1.4em;
}

/* Reminder cards always reserve a line for the date so the grid stays even. */
.motivation-reminder-date {
  min-height: 1.4em;
  font-weight: 650;
  opacity: 0.9;
}

.motivation-standalone-action {
  justify-self: center;
  width: min(100%, 220px);
}

@media (max-width: 430px) {
  .motivation-action {
    flex: 1 1 auto;
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  .motivation-menu-toggle {
    flex: 0 0 40px;
    width: 40px;
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motivation-action,
  .motivation-card-menu,
  .motivation-hero-card.motivation-quote-exit-left,
  .motivation-hero-card.motivation-quote-exit-right,
  .motivation-hero-card.motivation-quote-enter-right,
  .motivation-hero-card.motivation-quote-enter-left {
    transition: none;
    animation: none;
  }
}
@media (min-width: 900px) {
  .motivation-page {
    max-width: 1000px;
    margin-inline: auto;
  }

  .motivation-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .motivation-hero-card {
    padding: 24px 20px 20px;
  }
}


@media (max-width: 600px) {
  .motivation-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}


.motivation-page-spacer {
  min-height: calc(14px + env(safe-area-inset-bottom));
}


.motivation-page-footer-note {
  text-align: center;
}


[data-theme="cozy-pastel"] .motivation-hero-card {
  background: linear-gradient(145deg, rgba(95, 158, 154, 0.12), rgba(213, 190, 146, 0.16), rgba(255, 255, 255, 0.98));
  border-color: rgba(95, 158, 154, 0.42);
  box-shadow: var(--shadow-card);
}


[data-theme="cozy-pastel"] .motivation-hero-reference {
  color: var(--text-secondary);
}


[data-theme="cozy-pastel"] .motivation-hero-label {
  color: var(--cozy-teal);
}


[data-theme="cyber-minimalism"] .motivation-hero-card {
  background: radial-gradient(110% 140% at 50% 0%, rgba(32, 143, 145, 0.14), rgba(32, 199, 217, 0.1) 52%, var(--surface-primary));
  border-color: color-mix(in srgb, var(--cyber-teal) 50%, var(--border-primary) 50%);
  box-shadow: var(--shadow-card);
}


[data-theme="cyber-minimalism"] .motivation-hero-reference {
  color: var(--text-secondary);
}


[data-theme="cyber-minimalism"] .motivation-hero-label {
  color: var(--cyber-cyan);
}


[data-theme="cyber-minimalism"] .motivation-nav .chip-btn,
[data-theme="cyber-minimalism"] .motivation-secondary-actions .chip-btn {
  border-color: color-mix(in srgb, var(--cyber-steel) 52%, var(--border-primary) 48%);
}


/* ----- Motivation hero card ----- */
[data-theme="graphite"] .motivation-hero-card {
  background:
    radial-gradient(120% 140% at 50% 0%,
      rgba(148, 174, 187, 0.10),
      rgba(27, 34, 41, 0.96));
  border-color: rgba(148, 174, 187, 0.22);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
}


/* ── MOTIVATION QUOTE PANEL ────────────────────────────────– */

[data-theme="graphite"] .motivation-hero-card {
  background: rgba(10, 16, 28, 0.70);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.50),
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 40px rgba(80, 140, 200, 0.06);
  position: relative;
  overflow: hidden;
}


[data-theme="graphite"] .motivation-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(122, 170, 187, 0.05), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(196, 154, 74, 0.04), transparent 50%);
  pointer-events: none;
}


[data-theme="graphite"] .motivation-hero-label {
  color: rgba(122, 170, 187, 0.80);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.10em;
  font-weight: 900;
  position: relative;
  z-index: 1;
}


[data-theme="graphite"] .motivation-hero-text {
  color: #e2eef5;
  line-height: 1.50;
  font-weight: 600;
  position: relative;
  z-index: 1;
}


[data-theme="cozy-pastel"] .motivation-hero-card {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 40%),
    linear-gradient(138deg, rgba(255, 250, 241, 0.96), rgba(239, 247, 247, 0.94));
  border-color: rgba(95, 127, 150, 0.22);
}


[data-theme="graphite"] .motivation-hero-reference {
  color: rgba(106, 136, 152, 0.85);
  font-style: italic;
  font-size: 0.85rem;
  position: relative;
  z-index: 1;
}


/* ── MOTIVATION QUOTE: IRIDESCENT ────────────────────────────── */

[data-theme="graphite"] .motivation-hero-card {
  background: rgba(4, 6, 18, 0.72);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow:
    0 16px 56px rgba(0, 0, 0, 0.70),
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 0 60px rgba(77, 159, 255, 0.07);
  position: relative;
  overflow: hidden;
}


[data-theme="graphite"] .motivation-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(77,  159, 255, 0.06), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(168, 120, 255, 0.05), transparent 50%);
  pointer-events: none;
}


[data-theme="graphite"] .motivation-hero-label {
  background: linear-gradient(90deg, #90c8ff, #c8b4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  font-weight: 900;
  position: relative;
  z-index: 1;
}


[data-theme="graphite"] .motivation-hero-text {
  color: #e8f4fe;
  line-height: 1.52;
  font-weight: 600;
  position: relative;
  z-index: 1;
}


[data-theme="graphite"] .motivation-hero-reference {
  color: rgba(74, 106, 154, 0.88);
  font-style: italic;
  font-size: 0.85rem;
  position: relative;
  z-index: 1;
}


/* ── MOTIVATION PANEL WITH ASSET FRAME ───────────────────── */

[data-theme="graphite"] .motivation-hero-card {
  background-image: url("../../assets/themes/graphite/misc/graphite-motivation-panel.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}


/* Ensure content is above the SVG layer */
[data-theme="graphite"] .motivation-hero-card > * {
  position: relative;
  z-index: 1;
}