/*
 * css/home.css · The Long Game — Today / Home screen styles
 * Purpose: visual styles specific to the home feature module (js/home.js).
 *   Extends the base design system (css/styles.css) — imports no tokens,
 *   just references the CSS custom properties already declared in :root.
 *   Covers: hero greeting, glimpse card (North Star + target pills),
 *   due-revisit zone, calm rotating prompt, quick-action row, empty/first-run state.
 *   A11y: glimpse card and due-revisit card are real <button> elements (not
 *   div[role=button]). appearance:none resets here ensure they look identical.
 * Related: js/home.js (renders these classes), css/styles.css (token definitions)
 */

/* ===== HERO ===== */

/* The serif greeting on Today uses a slightly tighter weight than
   the default .greeting — Newsreader 400 sits well at this size. */
.home-greeting {
  font-weight: 400;  /* Newsreader 400 — warm, not bold */
  color: var(--ink);
}

.home-date {
  margin-bottom: var(--space-5);
}

/* ===== NORTH STAR / TARGETS GLIMPSE ===== */

/* .home-glimpse-btn: resets a <button> so it looks identical to the previous
   div[role=button]. appearance:none removes native button chrome. We deliberately
   omit background and border here — those come from .surface-card and
   .surface-card--flat (in styles.css, lower source-order precedence than home.css).
   Setting them here would accidentally override the card surface color. */
.home-glimpse-btn {
  appearance: none;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}

.home-glimpse {
  margin-bottom: var(--space-4);
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.home-glimpse:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2));
}

.home-glimpse:active {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}

.home-glimpse:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.home-glimpse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.home-glimpse-overline {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
}

.home-glimpse-arrow {
  font-size: 0.9rem;
  color: var(--accent);
  opacity: 0.75;
}

/* North Star italic serif line */
.home-glimpse-star {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.97rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 var(--space-2);
}

/* Target pills row */
.home-glimpse-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* Individual target pill: accent-tinted instead of default grey */
.home-target-pill {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent-ink);
}

/* ===== DUE REVISIT ZONE ===== */

.home-due-zone {
  margin-bottom: var(--space-4);
}

/* .home-due-card is now a real <button>. Reset browser defaults so it looks
   identical to the previous div. appearance:none removes native button chrome
   (border, bg, padding) in modern browsers. We deliberately do NOT set
   background, border, or padding here — those come from .surface-card and
   .revisit-card which have lower source-order precedence in styles.css.
   Keeping them out of home.css avoids an inadvertent override.
   Adds hover/active feedback on top. */
.home-due-card {
  appearance: none;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  display: block;
  transition: box-shadow 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.home-due-card:hover {
  box-shadow: 0 8px 28px rgba(44, 110, 99, 0.14);
}

.home-due-card:active {
  transform: scale(0.995);
}

.home-due-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* "N more when you're ready" beneath the card */
.home-due-more {
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: var(--space-2) 0 0;
}

/* No-due quiet state (replaces the due card when nothing is ready) */
.home-no-due {
  padding: var(--space-3) 0;
}

.home-no-due-text {
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-style: italic;
  font-family: var(--serif);
  text-align: center;
  margin: 0;
  line-height: 1.55;
}

/* ===== CALIBRATOR INSIGHTS CARD ===== */

/* Sits between the due-revisit zone and the calm prompt.
   Subtle left accent tick — matches the prompt card family. */
.home-insights {
  margin-bottom: var(--space-5);
  border-left: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.home-insights-header {
  margin-bottom: var(--space-2);
}

.home-insights-overline {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
}

/* Empty / early state */
.home-insights-empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* Individual insight item */
.home-insights-item {
  margin-bottom: var(--space-3);
}

.home-insights-item:last-child {
  margin-bottom: 0;
}

.home-insights-text {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 var(--space-1);
}

/* Transparency line — small, muted, honest provenance */
.home-insights-transparency {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
}

/* "See the fuller picture" — quiet footer link into the deeper Calibrator overlay.
   Only shown when there are more insights than the calm, pace-limited card shows. */
.home-insights-more {
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  padding: 8px 2px;
  min-height: 44px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
}
.home-insights-more:hover { text-decoration: underline; }
.home-insights-more-arrow { transition: transform 0.2s ease; }
.home-insights-more:hover .home-insights-more-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .home-insights-more-arrow { transition: none; }
}

/* ===== "FULLER PICTURE" — deeper Calibrator overlay ===== */

.insights-overlay-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
}

.insights-group {
  margin-bottom: var(--space-5);
}

.insights-group-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  margin: 0 0 var(--space-3);
}

.insights-group-item {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.insights-group-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.insights-overlay-about {
  margin-top: var(--space-5);
}
.insights-overlay-about-head {
  margin-bottom: var(--space-2);
}
.insights-overlay-about-text {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
}

/* ===== "WORTH REMEMBERING" — resurfaced past lesson ===== */

/* A gently highlighted memory: one aged lesson, resurfaced. Warmer (accent-tinted)
   than the flat insight/prompt cards so it reads as a small gift, not another nudge.
   Self-contained (own bg/padding/radius) — a real <button>; appearance reset here. */
.home-resurface {
  appearance: none;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  display: block;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  border-left: 3px solid color-mix(in srgb, var(--accent) 50%, transparent);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.home-resurface:hover {
  box-shadow: 0 8px 24px rgba(44, 110, 99, 0.12);
  background: color-mix(in srgb, var(--accent) 11%, var(--surface));
}
.home-resurface:active { transform: scale(0.995); }
.home-resurface:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.home-resurface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.home-resurface-overline {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent-ink);
}
.home-resurface-arrow {
  font-size: 0.9rem;
  color: var(--accent);
  opacity: 0.75;
  transition: transform 0.2s ease;
}
.home-resurface:hover .home-resurface-arrow { transform: translateX(3px); }

/* The lesson itself — serif, like a quote you wrote to yourself */
.home-resurface-text {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 var(--space-2);
}
.home-resurface-meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.45;
}
.home-resurface-from { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .home-resurface,
  .home-resurface-arrow { transition: none; }
}

/* ===== CALM ROTATING PROMPT ===== */

.home-prompt {
  margin-bottom: var(--space-5);
  /* Subtle left accent tick — same family as revisit-card's left border */
  border-left: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.home-prompt-line {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}

/* CTA is a ghost button but slightly smaller and left-aligned */
.home-prompt-cta-btn {
  font-size: 0.9rem;
  padding: 10px 16px;
  align-self: flex-start;
}

/* ===== QUICK ACTIONS ===== */

.home-quick-actions {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.home-qa-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  min-height: var(--tap);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  cursor: pointer;
  font: 500 0.82rem / 1 var(--sans);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
}

.home-qa-btn:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  color: var(--accent-ink);
}

.home-qa-btn:active {
  transform: scale(0.97);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.home-qa-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Icon inside quick-action button */
.home-qa-icon {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.home-qa-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.home-qa-label {
  line-height: 1.2;
  text-align: center;
}

/* ===== EMPTY / FIRST-RUN STATE ===== */

.home-empty {
  padding: var(--space-6) var(--space-4);
}

/* The first-run CTA matches the primary btn style but auto-width,
   centred via flex margin above — no additional overrides needed. */

/* ===== REDUCED-MOTION GUARD ===== */
/* The global guard in styles.css already disables all transitions/animations.
   Any home-specific animation fallbacks go here for clarity. */
@media (prefers-reduced-motion: reduce) {
  .home-glimpse,
  .home-due-card,
  .home-qa-btn {
    transition: none;
  }
}