/* The game-like welcome belongs to the home page; lessons retain their
   subject backgrounds and comfortable reading type. */
body.school-home { background: #f4f4ef; color: var(--color-text-slate); }
.school-home__container { padding-bottom: 1rem; }
.school-home__welcome { padding: 1.5rem; border: 3px solid #111; background: #080808; color: #fff; }
.school-home .school-heading { margin: 0 0 1rem; align-items: flex-end; }
.school-home .school-heading__label { margin: 0 0 .25rem; color: #ffe85c; font-family: "Pixelify Sans", ui-monospace, monospace; font-size: 1rem; letter-spacing: .1em; }
.school-home .school-heading h1 { font-family: "Pixelify Sans", ui-monospace, monospace; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.2; overflow-wrap: anywhere; }
.school-home .school-heading h1 span { margin-left: .5rem; padding: .25rem .5rem; border: 1px solid #b8b8b8; font-family: var(--font-main); font-size: .9rem; white-space: nowrap; vertical-align: middle; }
.school-home .school-heading__hint { max-width: 15rem; font-size: .95rem; color: #d5d5d5; }
.school-home__welcome .guide-dialogue { margin: 0 0 1rem; outline: none; padding: 1rem; }
.school-home .home-latest { margin: 0; padding: 1.25rem; background: #151515; color: #fff; border: 2px solid #fff; border-radius: 0; }
.school-home .home-latest__label { color: #ffe85c; margin-bottom: .35rem; }
.school-home .home-latest h2 { font-family: "Pixelify Sans", ui-monospace, monospace; font-size: clamp(1.6rem, 4vw, 2.15rem); line-height: 1.3; color: #fff; margin-bottom: .35rem; }
.school-home .home-latest__lesson { margin-bottom: .85rem; color: #fff; }
.school-home .home-latest__start { background: #ffe85c; color: #080808; border: 2px solid #ffe85c; border-radius: 0; box-shadow: none; font-weight: 800; }
.school-home .home-latest__start:hover { background: #fff; color: #080808; border-color: #fff; transform: none; }
.school-home .home-latest__all { color: #fff; text-underline-offset: .2em; }
.school-home .home-latest a:focus-visible { outline: 3px solid #ffe85c; outline-offset: 5px; }
.school-home__section-title { margin: 1.5rem 0 .75rem; font-size: 1.4rem; }
.school-home .review-dashboard,
.school-home .home-archive-links,
.school-home .info-card { border: 1px solid #c9cec9; background: #fff; color: var(--color-text-slate); box-shadow: none; }
.school-home .review-dashboard { border-left: 5px solid #111; }
.school-home .btn-secondary { background: #edf0eb; color: #182426; border: 1px solid #c0c8c0; box-shadow: none; }
.school-home .btn-secondary:hover { background: #e2e6dd; transform: none; }
.school-home .review-dashboard .btn-primary { background: #19599f; color: #fff; border: 1px solid #19599f; box-shadow: none; }
.school-home a:focus-visible, .school-home button:focus-visible { outline: 3px solid #111; outline-offset: 4px; }
.school-home .guide-dialogue button:focus-visible { outline-color: #fff; }
.school-home .subject-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.school-home .subject-card { min-width: 0; min-height: 220px; text-align: left; border: 1px solid #c9cec9; border-radius: var(--radius-medium); box-shadow: none; background: #fff; padding: 1.25rem; transition: border-color .15s; }
.school-home .subject-card::before { display: none; }
.school-home .subject-card:hover,
.school-home .subject-card:active { transform: none; border-color: #111; box-shadow: none; }
.school-home .subject-card:focus-visible { outline: 3px solid #111; outline-offset: 4px; }
.school-home .subject-icon { animation: none; font-size: 2rem; }
.school-home .subject-card h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
.school-home .subject-card p { color: #46515b; }
.school-home .subject-disabled { opacity: 1; cursor: pointer; background: #f7f8f5; }
.school-home .subject-status { align-self: flex-start; color: #46515b; border-radius: 5px; }
.school-home .subject-status-ready { color: #17643c; background: #e1f3e7; }
.school-home .dashboard-footer { color: #46515b; }
.school-home .dashboard-info { gap: 1rem; }
.school-home .info-card h3 { overflow-wrap: anywhere; }
.school-home .info-card p, .school-home .dashboard-footer p { color: #46515b; }
.school-home .home-archive-links .btn { white-space: normal; overflow-wrap: anywhere; }

/* This point appears only after the server has actually saved completion. */
.school-save { margin: 1.5rem 0; padding: 1.25rem; border: 3px solid #fff; outline: 2px solid #000; background: #000; color: #fff; }
.school-save__heading { display: flex; align-items: center; gap: .75rem; }
.school-save__star { flex: 0 0 64px; width: 64px; height: 64px; margin: 0; border: 0; border-radius: 0; object-fit: contain; image-rendering: pixelated; }
.school-save .school-save__title { margin: 0; color: #ffe85c; font-family: "Pixelify Sans", ui-monospace, monospace; font-size: 1.6rem; line-height: 1.3; overflow-wrap: anywhere; }
.school-save .guide-dialogue { margin: .75rem 0 0; padding: 0; border: 0; outline: 0; }
@media (max-width: 700px) {
  .school-home .subject-grid { grid-template-columns: 1fr; }
  .school-home .subject-card { min-height: 0; }
  .school-home .school-heading { display: block; }
  .school-home .school-heading__hint { margin-top: .5rem; max-width: none; }
}
@media (max-width: 600px) {
  .school-home__welcome { padding: .875rem; }
  .school-home .home-latest { padding: 1rem; }
  .school-home .home-latest__start { display: block; width: 100%; }
  .school-home .home-latest__all { margin: .25rem 0 0; }
  .school-home .school-heading h1 span { margin-left: 0; }
  .school-save { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .school-home .subject-card { transition: none; }
}
@media (forced-colors: active) {
  .school-home__welcome, .school-home .home-latest, .school-save { color: CanvasText; background: Canvas; border-color: CanvasText; outline-color: CanvasText; }
  .school-home .school-heading__label, .school-home .school-heading__hint, .school-home .home-latest__label, .school-home .home-latest h2, .school-home .home-latest__lesson, .school-home .home-latest__all, .school-save .school-save__title { color: CanvasText; }
  .school-home .home-latest__start { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
}