/*! © 2026 Nuvira Technologies, LLC. All rights reserved. WonderWise, its tutors, artwork, voices, lessons and software may not be copied, scraped or reused. See /terms. */
/* Home (learner dashboard): shared action roles with large, rounded navigation cards. */
.home-page{display:flex;flex-direction:column;gap:28px;padding-top:36px}
/* Your learning and Where to? are section cards with ink header bands, the Test Prep Home pattern; 14px between cards. */
.home-page>.section-card+.section-card{margin-top:-14px}
.home-page h2:not(.section-title){font-family:var(--heading);font-weight:400;font-size:28px;line-height:1.2;margin:0 0 14px;color:var(--ink)}

.home-hero{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:24px 28px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.home-teacher{width:132px;height:132px;object-fit:contain;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--sage)}
.home-hello h1{font-family:var(--heading);font-weight:400;font-size:48px;line-height:1.1;margin:0;color:var(--ink)}
.home-hello p{margin:10px 0 0;font-size:22px;line-height:1.4;color:var(--muted)}
.home-quote{position:relative;margin:0;padding:22px 24px 22px 64px;background:#FFF7E3;border:1px solid #F5D594;border-radius:20px}
.home-quote-mark{position:absolute;left:20px;top:22px;width:32px;height:32px}
.home-quote blockquote{margin:0}
.home-quote p{margin:0;font-family:var(--heading);font-size:24px;line-height:1.35;color:var(--ink)}
.home-quote figcaption{margin-top:10px;font-size:17px;font-weight:600;color:var(--muted)}
.home-quote figcaption[hidden]{display:none}

.home-continue{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag go" "name go" "detail go";align-items:center;gap:4px 20px;width:100%;min-height:var(--action-height);padding:22px 26px;text-align:left;font:inherit;color:var(--ink);background:var(--lamp);border:2px solid var(--ink);border-radius:22px;cursor:pointer}
.home-continue[hidden]{display:none}
.home-continue-tag{grid-area:tag;font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.home-continue strong{grid-area:name;font-family:var(--heading);font-weight:400;font-size:28px;line-height:1.2;overflow-wrap:anywhere}
#home-continue-detail{grid-area:detail;font-size:19px;color:var(--ink)}
.home-continue-go{grid-area:go;padding:12px 22px;border:2px solid var(--ink);border-radius:var(--action-radius);color:var(--ink);font-size:19px;font-weight:700;white-space:nowrap}
.home-continue:is(:hover,:active,[aria-pressed=true]):not(:disabled){background:var(--lagoon);border-color:#fff;color:#fff}
.home-continue:is(:hover,:active,[aria-pressed=true]):not(:disabled) :is(.home-continue-tag,#home-continue-detail,.home-continue-go){color:#fff;border-color:#fff}
.home-continue:disabled{background:var(--action-disabled-bg);border-color:var(--action-disabled-border);color:var(--action-disabled-ink);opacity:1;cursor:not-allowed;box-shadow:none;transform:none}
.home-continue:disabled :is(.home-continue-tag,#home-continue-detail,.home-continue-go){color:inherit;border-color:var(--action-disabled-border)}

.home-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.home-stat{display:flex;flex-direction:column;gap:4px;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;border-top:6px solid var(--lagoon)}
.home-stat[data-stat=pending]{border-top-color:var(--lamp)}
.home-stat[data-stat=score]{border-top-color:var(--peach)}
.home-stat[data-stat=streak]{border-top-color:var(--sage)}
.home-stat-label{font-size:18px;font-weight:700;color:var(--muted)}
.home-stat strong{font-size:46px;line-height:1.1;font-weight:800;color:var(--ink)}
.home-stat-note{font-size:17px;color:var(--muted);min-height:1.4em}
.home-stats[aria-busy=true] strong{color:var(--line)}
.home-stats-note{margin:12px 0 0;font-size:17px;color:#A03A28}
.home-stats-note[hidden]{display:none}

.home-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
/* Laptops: lesson and homework help lead in a wide first row, the other three share the second. */
.home-cards>li{grid-column:span 2}
.home-cards>li:nth-child(-n+2){grid-column:span 3}
.home-cards>li:nth-child(-n+2) .home-card{min-height:128px}
.home-card{display:flex;align-items:center;gap:18px;width:100%;height:100%;min-height:112px;padding:20px 22px;text-align:left;font:inherit;color:var(--ink);text-decoration:none;background:var(--action-secondary-bg);border:2px solid var(--action-border);border-radius:22px;cursor:pointer}
.home-card-icon{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:var(--pool);color:var(--lagoon-deep)}
.home-card-icon svg{width:32px;height:32px}
.home-card-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.home-card-copy strong{font-size:23px;line-height:1.2;font-weight:800}
.home-card-copy>span{font-size:18px;line-height:1.35;color:var(--muted)}
.home-card-arrow{flex:none;font-size:34px;line-height:1;color:var(--lagoon)}
.home-card:hover{border-color:var(--action-primary-hover);background:var(--action-selected)}
.home-card:active{border-color:var(--action-primary-pressed);background:var(--sage)}
.home-card:focus-visible,.home-continue:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Tablets: quote moves under the greeting, stats in two rows. */
@media(max-width:1099px){
  .home-hero{grid-template-columns:auto minmax(0,1fr)}
  .home-quote{grid-column:1 / -1}
  .home-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-cards>li,.home-cards>li:nth-child(-n+2){grid-column:auto}
  .home-cards>li:last-child:nth-child(odd){grid-column:1 / -1}
}
/* Phones: one column, slightly smaller headline, cards still large to tap. */
@media(max-width:760px){
  .home-page{gap:22px;padding-top:20px;padding-bottom:36px}
  .home-hero{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:18px;border-radius:20px}
  .home-teacher{width:84px;height:84px}
  .home-hello h1{font-size:34px}
  .home-hello p{font-size:19px;margin-top:6px}
  .home-quote{padding:18px 18px 18px 54px}
  .home-quote-mark{left:16px;top:19px;width:26px;height:26px}
  .home-quote p{font-size:20px}
  .home-page h2:not(.section-title){font-size:24px}
  .home-continue{grid-template-columns:1fr;grid-template-areas:"tag" "name" "detail" "go";padding:20px}
  .home-continue-go{justify-self:start;margin-top:10px}
  .home-stats{gap:12px}
  .home-stat{padding:16px}
  .home-stat strong{font-size:38px}
  .home-stat-label{font-size:17px}
  .home-stat-note{font-size:15px}
  .home-cards{grid-template-columns:1fr;gap:12px}
  .home-cards>li:last-child:nth-child(odd){grid-column:auto}
  .home-cards>li:nth-child(-n+2) .home-card{min-height:96px}
  .home-card{min-height:96px;padding:16px 18px;gap:14px}
  .home-card-icon{width:52px;height:52px}
  .home-card-copy strong{font-size:21px}
  .home-card-copy>span{font-size:17px}
}

/* Dashboard uses the same readable section and action sizes as the centers. */
.home-page>.home-section{border:3px solid var(--ink);font-size:20px;line-height:1.45}
.home-page>.home-section>.section-title{font-size:30px;line-height:1.3;padding-block:20px;border-bottom:3px solid var(--ink)}
.home-hero{border:3px solid var(--ink)}
.home-stat{border:3px solid var(--ink);border-top-width:6px}
.home-stat-label{font-size:20px}
.home-stat-note,.home-stats-note{font-size:18px;line-height:1.45}
.home-card,.home-cards>li:nth-child(-n+2) .home-card{min-height:160px;padding:22px;border:3px solid var(--ink);background:var(--pool)}
.home-card-copy strong{font-size:26px;line-height:1.25}
.home-card-copy>span{font-size:20px;line-height:1.45;color:var(--ink)}
.home-page .home-cards>li>.home-card:is(:hover,:focus-visible,:active){background:var(--lamp);border-color:var(--ink);color:var(--ink)}
.home-card:is(:hover,:focus-visible,:active) .home-card-copy>span{color:var(--ink)}
.home-continue{border-width:3px;min-height:64px}
.home-continue-tag{font-size:18px}
#home-continue-detail{font-size:20px;line-height:1.4}
.home-continue-go{display:inline-flex;align-items:center;justify-content:center;min-height:64px;padding:12px 24px;border-width:3px;font-size:22px}
@media(max-width:760px){
  .home-page>.home-section>.section-title{font-size:26px;padding-block:16px}
  .home-stat{padding:14px}
  .home-stat-label{font-size:18px}
  .home-stat-note{font-size:17px}
  .home-card,.home-cards>li:nth-child(-n+2) .home-card{min-height:144px;padding:18px}
  .home-card-copy strong{font-size:24px}
  .home-card-copy>span{font-size:20px}
}
@media(min-width:1100px){.home-cards>li:nth-child(-n+3){grid-column:span 2}}

/* Tutor roundel: crop to the head and shoulders, centered, instead of shrinking the whole figure into the circle. */
.home-teacher{object-fit:cover;object-position:50% 50%}

/* Where to?: dark teal on hover, focus and press. */
.home-page .home-cards>li>.home-card:is(:hover,:focus-visible,:active){background:var(--lagoon);border-color:var(--lagoon);color:var(--surface)}
.home-page .home-card:is(:hover,:focus-visible,:active) :is(.home-card-copy strong,.home-card-copy>span,.home-card-arrow){color:var(--surface)}
.home-page .home-card:is(:hover,:focus-visible,:active) .home-card-icon{background:var(--surface);color:var(--lagoon-deep)}

/* Your Learning: a shorter band of stats. */
.home-stat{padding:10px 18px;gap:0}
.home-stat strong{font-size:38px}
.home-stat-label{font-size:19px}
.home-stat-note{font-size:17px;min-height:0;line-height:1.3}

/* Quote: fills the hero. It stretches to the full height of the row, centers its text and reads larger. */
.home-quote{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:26px 30px 26px 76px}
.home-quote-mark{left:24px;top:50%;transform:translateY(-50%);width:40px;height:40px}
.home-quote p{font-size:30px;line-height:1.3}
.home-quote figcaption{font-size:19px}
@media(max-width:760px){
  .home-quote{padding:18px 18px 18px 60px}
  .home-quote-mark{left:16px;width:30px;height:30px}
  .home-quote p{font-size:22px}
}

/* Pick up where you left off: a shorter banner. */
.home-continue{padding:10px 22px;gap:0 20px;min-height:0}
.home-continue strong{font-size:26px;line-height:1.15}
.home-continue-tag{font-size:16px}
#home-continue-detail{font-size:18px;line-height:1.25}
.home-continue-go{min-height:48px;padding:6px 20px;font-size:20px}
@media(max-width:760px){.home-continue{padding:14px 18px}}

/* Quote: border is a bold gold line, the same weight as the section cards. */
.home-quote{border:3px solid var(--lamp)}
#home-continue-detail:empty{display:none}

/* Keep going: a white button on the gold banner. */
.home-continue .home-continue-go{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.home-continue:is(:hover,:active,[aria-pressed=true]):not(:disabled) .home-continue-go{background:var(--surface);color:var(--lagoon-deep);border-color:var(--surface)}

/* Keep going on hover: the banner turns teal, so the button stays a white fill with dark text and a dark border. */
.home-continue:is(:hover,:active,[aria-pressed=true]):not(:disabled) .home-continue-go{background:var(--surface);color:var(--ink);border-color:var(--ink);box-shadow:0 0 0 3px var(--surface)}
#home-continue:is(:hover,:active,[aria-pressed=true]):not(:disabled) .home-continue-go{background:var(--surface);color:var(--ink);border-color:var(--ink);box-shadow:0 0 0 3px var(--surface)}

/* Status Board tiles: the same plain dark blue border as the sections, no colored top edge. */
.home-stat,.home-stat[data-stat=pending],.home-stat[data-stat=score],.home-stat[data-stat=streak]{border:3px solid var(--ink)}