/* Home and lesson summary on paper: the same ground, rules, and accents as the
   landing page and the lesson screen (lesson-paper.css). Scoped to
   body.view-home and body.view-summary; styles.css is untouched. The streak
   card keeps its week-of-smiles layout - only its colours move to ink. */

body.view-home,
body.view-summary {
  --lp-paper: #f3efe5;
  --lp-ink: #15171b;
  --lp-muted: #5e625f;
  --lp-coral: #ff654a;
  --lp-coral-text: #a83224;
  --lp-blue: #3448e5;
  --lp-lime: #dbff65;
  --lp-lime-text: #5d7a00;
  --lp-white: #fffdf8;
  --lp-line: rgba(21, 23, 27, 0.16);
  background: var(--lp-paper);
  color: var(--lp-ink);
}

body.view-home::before,
body.view-summary::before {
  background:
    linear-gradient(var(--lp-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--lp-line) 1px, transparent 1px),
    var(--lp-paper);
  background-size: 44px 44px, 44px 44px, auto;
  opacity: 0.55;
  transform: none;
}

body.view-home::after,
body.view-summary::after {
  background: none;
}

/* ---------- Home ---------- */

body.view-home .home-screen,
body.view-home .home-topbar,
body.view-home .home-hero {
  color: var(--lp-ink);
}

body.view-home .home-topbar .eyebrow {
  color: var(--lp-coral-text);
}

body.view-home #homeTitle {
  color: var(--lp-ink);
}

body.view-home .menu-button {
  border: 1.5px solid var(--lp-ink);
  border-radius: 4px;
  background: var(--lp-white);
  box-shadow: 2px 2px 0 var(--lp-ink);
}

body.view-home .menu-line {
  background: var(--lp-ink);
}

body.view-home .home-smile-button {
  border: 3px solid var(--lp-ink);
  box-shadow: 4px 4px 0 var(--lp-ink);
}

body.view-home .home-kicker {
  color: var(--lp-muted);
}

body.view-home .home-plan-status {
  border: 1.5px solid var(--lp-ink);
  border-radius: 4px;
  background: var(--lp-white);
}

body.view-home .plan-status-badge {
  background: var(--lp-lime);
  color: var(--lp-ink);
}

body.view-home .plan-status-copy {
  color: var(--lp-ink);
}

body.view-home .start-button {
  border: 2px solid var(--lp-ink);
  border-radius: 6px;
  background: var(--lp-coral);
  color: var(--lp-ink);
  box-shadow: 5px 5px 0 var(--lp-ink);
  font-weight: 900;
}

body.view-home .start-button:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--lp-ink);
}

body.view-home .start-button span,
body.view-home .start-button-icon {
  color: var(--lp-ink);
}

body.view-home .cannot-speak-button {
  border: 1.5px solid var(--lp-ink);
  border-radius: 4px;
  background: var(--lp-white);
  color: var(--lp-ink);
  font-weight: 800;
}

/* The hero must grow with the sentence block instead of clipping under the cards */
body.view-home .home-hero {
  min-height: auto;
  margin-bottom: 6px;
}

/* あなたがIeru文: the one sentence the learner grew furthest, on ink */
body.view-home .home-learning-status {
  margin-top: 14px;
  padding: 12px 14px;
  border: 2px solid var(--lp-ink);
  border-radius: 6px;
  background: var(--lp-ink);
  color: var(--lp-white);
  display: grid;
  gap: 4px;
}

body.view-home .home-learning-status strong {
  color: var(--lp-lime);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

body.view-home .home-learning-status [data-learning-status-detail] {
  color: var(--lp-white);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.3;
}

body.view-home .home-learning-status [data-learning-next-prompt] {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 253, 248, 0.35);
  color: rgba(255, 253, 248, 0.85);
  font-size: 0.82rem;
  font-weight: 700;
}

body.view-home .home-learning-status [data-learning-next-prompt]::before {
  margin-right: 8px;
  color: var(--lp-lime);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  content: "次に育つ";
}

body.view-home .home-learning-status [data-learning-next-prompt][hidden] {
  display: none;
}

body.view-home .home-attempt-notice {
  border: 1.5px solid var(--lp-ink);
  background: var(--lp-white);
  color: var(--lp-ink);
}

body.view-home .home-card {
  border: 2px solid var(--lp-ink);
  border-radius: 6px;
  background: var(--lp-white);
  color: var(--lp-ink);
  box-shadow: 4px 4px 0 var(--lp-ink);
}

body.view-home .card-kicker,
body.view-home .card-side-note,
body.view-home .home-user-name {
  color: var(--lp-muted);
}

body.view-home .home-card h2 {
  color: var(--lp-ink);
}

/* Streak card: same week of smiles, ink instead of white-on-black */
body.view-home .week-label {
  color: var(--lp-muted);
}

body.view-home .week-dot {
  border: 1.5px solid var(--lp-ink);
  background: var(--lp-white);
  color: rgba(21, 23, 27, 0.35);
}

body.view-home .week-eye,
body.view-home .week-mouth {
  background: rgba(21, 23, 27, 0.35);
}

body.view-home .week-day.active .week-dot {
  background: var(--lp-lime);
  color: var(--lp-ink);
}

body.view-home .week-day.active .week-eye,
body.view-home .week-day.active .week-mouth {
  background: var(--lp-ink);
}

body.view-home .week-day.today .week-dot {
  box-shadow: 2px 2px 0 var(--lp-ink);
}

body.view-home .week-milestone-badge {
  background: var(--lp-coral);
  color: var(--lp-ink);
}

body.view-home .effort-row {
  border: 1.5px solid var(--lp-ink);
  border-radius: 4px;
  background: var(--lp-paper);
}

body.view-home .effort-row span {
  color: var(--lp-muted);
}

body.view-home .effort-row strong {
  color: var(--lp-ink);
}

/* 14-day graph */
body.view-home .progress-chart-panel {
  border-top-color: rgba(21, 23, 27, 0.14);
}

body.view-home .progress-chart-head h3,
body.view-home .progress-chart-head,
body.view-home .progress-y-axis span,
body.view-home .progress-x-axis-labels span,
body.view-home .progress-bar-value {
  color: var(--lp-ink);
}

body.view-home .progress-x-axis-labels span.today {
  color: var(--lp-coral-text);
}

body.view-home .progress-grid-line {
  background: rgba(21, 23, 27, 0.12);
}

body.view-home .progress-bar-fill {
  box-shadow: none;
}

body.view-home .progress-chart-panel.time .progress-bar-fill,
body.view-home .progress-chart-panel.time .progress-bar.active .progress-bar-fill {
  background: var(--lp-coral);
}

body.view-home .progress-chart-panel.words .progress-bar-fill,
body.view-home .progress-chart-panel.words .progress-bar.active .progress-bar-fill {
  background: var(--lp-blue);
}

body.view-home .progress-chart-panel.answers .progress-bar-fill,
body.view-home .progress-chart-panel.answers .progress-bar.active .progress-bar-fill {
  background: var(--lp-ink);
}

/* ---------- Summary ---------- */

body.view-summary .lesson-summary-panel {
  border: 2px solid var(--lp-ink);
  border-radius: 6px;
  background: var(--lp-white);
  color: var(--lp-ink);
  box-shadow: 8px 8px 0 var(--lp-blue);
}

body.view-summary .summary-kicker {
  color: var(--lp-coral-text);
}

body.view-summary #lessonSummaryTitle {
  color: var(--lp-ink);
}

body.view-summary .summary-message {
  color: var(--lp-muted);
}

body.view-summary .summary-spoken-sentences {
  border: 2px solid var(--lp-ink);
  border-radius: 6px;
  background: var(--lp-paper);
}

body.view-summary .summary-sentence-title {
  color: var(--lp-coral-text);
}

body.view-summary .summary-sentence {
  background: var(--lp-white);
  color: var(--lp-ink);
}

body.view-summary .summary-sentence.is-hardest {
  border-color: var(--lp-ink);
  background: var(--lp-lime);
  color: var(--lp-ink);
}

body.view-summary .summary-lineage + .summary-lineage {
  border-top-color: rgba(21, 23, 27, 0.14);
}

body.view-summary .summary-lineage-steps {
  border-left-color: var(--lp-ink);
}

body.view-summary .summary-lineage-step.is-ancestor {
  color: var(--lp-muted);
}

body.view-summary .summary-lineage-step.is-said {
  border: 1.5px solid var(--lp-ink);
  background: var(--lp-white);
  color: var(--lp-ink);
}

body.view-summary .summary-lineage-next {
  color: var(--lp-ink);
}

body.view-summary .summary-lineage-next span {
  color: var(--lp-coral-text);
}

body.view-summary .summary-main {
  border: 2px solid var(--lp-ink);
  border-radius: 6px;
  background: var(--lp-coral);
  color: var(--lp-ink);
}

body.view-summary #summaryMainLabel,
body.view-summary #summaryMainWords {
  color: var(--lp-ink);
}

body.view-summary .summary-effort-track {
  background: rgba(21, 23, 27, 0.18);
}

body.view-summary #summaryEffortFill {
  background: var(--lp-ink);
}

body.view-summary .summary-metric-card,
body.view-summary .summary-metric-card.is-impact {
  border: 1.5px solid var(--lp-ink);
  border-radius: 4px;
  background: var(--lp-white);
  color: var(--lp-ink);
}

body.view-summary .summary-metric-label,
body.view-summary .summary-unit {
  color: var(--lp-muted);
}

body.view-summary .summary-metric-value {
  color: var(--lp-ink);
}

body.view-summary .summary-plus {
  background: var(--lp-lime);
  color: var(--lp-ink);
}

body.view-summary .summary-learning-gains {
  border-color: rgba(21, 23, 27, 0.14);
}

body.view-summary .summary-learning-gain {
  border-color: rgba(21, 23, 27, 0.14);
}

body.view-summary .summary-learning-gain span,
body.view-summary .summary-learning-gain strong {
  color: var(--lp-ink);
}

body.view-summary .summary-next-step {
  border: 1.5px solid var(--lp-ink);
  background: var(--lp-paper);
  color: var(--lp-ink);
}

body.view-summary .summary-standard-prompt {
  border: 2px solid var(--lp-ink);
  border-radius: 6px;
  background: var(--lp-paper);
  color: var(--lp-ink);
}

body.view-summary .summary-standard-kicker {
  color: var(--lp-coral-text);
}

body.view-summary #summaryStandardPromptTitle {
  color: var(--lp-ink);
}

body.view-summary #summaryStandardPromptText {
  color: var(--lp-muted);
}

body.view-summary .summary-standard-button {
  border: 2px solid var(--lp-ink);
  border-radius: 4px;
  background: var(--lp-coral);
  color: var(--lp-ink);
  box-shadow: 3px 3px 0 var(--lp-ink);
}

body.view-summary .summary-landing-button {
  border: 1.5px solid var(--lp-ink);
  border-radius: 6px;
  background: var(--lp-white);
  color: var(--lp-ink);
}

body.view-summary #summaryShareXButton {
  background: var(--lp-ink);
  color: var(--lp-white);
  box-shadow: 3px 3px 0 var(--lp-coral);
}

body.view-summary .summary-ok-button {
  border: 2px solid var(--lp-ink);
  border-radius: 6px;
  background: var(--lp-coral);
  color: var(--lp-ink);
  box-shadow: 5px 5px 0 var(--lp-ink);
  font-weight: 900;
}

@media (prefers-reduced-motion: reduce) {
  body.view-home .start-button {
    transition: none;
  }
}