/* ============================================================
   AACPOJ Home dashboard — v5.2
   Loaded only on the home page (templates/home.html).
   Tokens come from aaoj/tokens.css; navbar from aaoj/navbar.css.
   ============================================================ */

.home-page {
  width: min(1800px, calc(100% - 24px));
  margin: 32px auto 60px;
}

.home-greeting {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: var(--text);
  font-weight: 700;
}
.home-greeting .name { color: var(--brand-dark); }

.home-subtitle {
  color: var(--text-soft);
  margin: 0 0 28px;
  font-size: 1rem;
  font-family: var(--display);
}

/* === Hero row: greeting + latest pinned sticky note (Anna 2026-05-15) === */
/* Three-column grid so the greeting stays anchored to the left while
   the pinned-note card sits in the true centre of the page (Anna
   2026-05-15 third-pass: previous flex-with-justify-center grouped
   the two and dragged the greeting away from the page edge). The
   right column is an invisible 1fr spacer that mirrors the left
   greeting column so the card column is mathematically centred. */
.home-hero-row {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px) 1fr;
  column-gap: 32px;
  align-items: start;
  margin-bottom: 24px;
}
.home-hero-left {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
}
.home-hero-left .home-greeting,
.home-hero-left .home-subtitle { margin-bottom: 4px; }
.home-hero-left .home-subtitle { margin-bottom: 28px; }

.home-sticky-card {
  grid-column: 2;
  max-width: 560px;
  width: 100%;
  /* DMOJ defaults to content-box. With width:100% the 18px padding + 2px
     border sit OUTSIDE the declared width, so on phones the card paints
     ~40px past the parent and clips off the right of the screen.
     Switch to border-box so padding/border are folded in. */
  box-sizing: border-box;
  background: linear-gradient(135deg, #ffffff 0%, #fffaf3 100%);
  /* Neon-amber glow so the pinned card draws the eye on a quiet
     dashboard (Anna 2026-05-15 fourth-pass). Pulses gently every
     ~3.2s — slow enough to not distract reading, fast enough that
     a student loading the page notices the breathing. */
  border: 2px solid #ff9500;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow:
    0 0 0 1px rgba(255, 149, 0, 0.22),
    0 0 14px rgba(255, 149, 0, 0.55),
    0 0 32px rgba(255, 149, 0, 0.30),
    0 0 56px rgba(255, 149, 0, 0.14);
  animation: pinned-card-pulse 3.2s ease-in-out infinite;
  font-family: var(--display);
}
@keyframes pinned-card-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 149, 0, 0.22),
      0 0 14px rgba(255, 149, 0, 0.55),
      0 0 32px rgba(255, 149, 0, 0.30),
      0 0 56px rgba(255, 149, 0, 0.14);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 149, 0, 0.32),
      0 0 22px rgba(255, 149, 0, 0.75),
      0 0 44px rgba(255, 149, 0, 0.45),
      0 0 76px rgba(255, 149, 0, 0.22);
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-sticky-card { animation: none; }
}
.home-sticky-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.home-sticky-icon { font-size: 1.1rem; line-height: 1; }
.home-sticky-label {
  font-weight: 700;
  color: #8a5500;
  letter-spacing: 0.02em;
  font-size: 0.9rem;
  text-transform: uppercase;
}
.home-sticky-author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-soft);
  font-size: 0.9rem;
}
.home-sticky-author i { font-size: 0.78em; opacity: 0.7; }
.home-sticky-date {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.home-sticky-title {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  text-decoration: none;
  margin: 4px 0 8px;
}
.home-sticky-title:hover {
  color: var(--brand-dark, #007e6e);
  text-decoration: underline;
}

.home-sticky-desc {
  margin: 0 0 12px;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-sticky-cta {
  display: inline-block;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--brand-dark, #007e6e);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
}
.home-sticky-cta:hover { border-bottom-color: var(--brand-dark, #007e6e); }

/* On narrow viewports the three-column grid collapses to a single
   column so greeting and card stack instead of crushing each other. */
@media (max-width: 980px) {
  .home-hero-row {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .home-hero-left,
  .home-sticky-card {
    grid-column: 1;
    max-width: none;
    width: 100%;
  }
}

/* === Hero: next class card === */
.home-next-class {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #fafefd 100%);
  border: 1px solid rgba(0, 168, 150, 0.18);
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 28px;
  box-shadow: 0 6px 24px rgba(0, 168, 150, 0.08), 0 1px 3px rgba(15,23,42,0.04);
  position: relative;
  overflow: hidden;
}
.home-next-class::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
}

.nc-date {
  font-family: var(--display);
  text-align: center;
  padding: 12px 18px 12px 22px;
}
.nc-date .month {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.nc-date .day {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin: 4px 0 2px;
}
.nc-date .dow {
  font-size: 0.92rem;
  color: var(--text-soft);
  font-weight: 600;
}

.nc-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nc-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.nc-title {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text);
}
.nc-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  color: var(--text-soft);
  font-size: 0.92rem;
  margin-top: 2px;
}
.nc-meta span { display: inline-flex; align-items: center; gap: 6px; }
.nc-meta i { color: var(--brand); font-size: 0.9em; }
.nc-meta a {
  color: var(--brand-dark);
  text-decoration: none;
  font-weight: 500;
}
.nc-meta a:hover { text-decoration: underline; }
.nc-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--display);
}
.nc-badge.exam { background: #fef3c7; color: #92400e; }

.nc-countdown {
  text-align: center;
  font-family: var(--display);
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  border-radius: 12px;
  color: #fff;
  min-width: 130px;
}
.nc-countdown .num {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}
.nc-countdown .num.today,
.nc-countdown .num.tomorrow {
  font-size: 1.4rem;
}
.nc-countdown .unit {
  font-size: 0.88rem;
  opacity: 0.92;
  margin-top: 2px;
}

/* Empty state */
.home-next-class.empty {
  grid-template-columns: 1fr;
  background: rgba(255,255,255,.7);
  border-color: rgba(17,24,39,.08);
  text-align: center;
  color: var(--text-soft);
  padding: 24px;
}
.home-next-class.empty::before { display: none; }
.home-next-class.empty .empty-text {
  font-family: var(--display);
  font-size: 0.95rem;
}

/* === Card grid (assignments + side stack) === */
.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
@media (min-width: 980px) {
  .home-grid { grid-template-columns: 2fr 1fr; }
}
.home-side-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.home-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  /* Grid items default to min-width:auto = their min-content size, so a long
     unbreakable word inside (e.g. a CamelCase note title with nowrap) refuses
     to shrink and pushes the card past the viewport on phones. Allow shrink. */
  min-width: 0;
}
.home-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 14px;
}
.home-card-title {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--text);
}
.home-card-link {
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--brand-dark);
  text-decoration: none;
  font-weight: 500;
}
.home-card-link:hover { color: var(--brand); text-decoration: underline; }
.home-card-empty {
  color: var(--text-muted);
  font-family: var(--display);
  font-size: 0.92rem;
  padding: 8px 0;
}

/* === Legacy: production main still uses .home-top-grid (hero + events sidebar). === */
.home-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  margin-bottom: 24px;
  align-items: start;
}
.home-top-grid .events-card {
  margin-bottom: 0;
  position: sticky;
  top: calc(var(--navbar-h) + 12px);
  max-height: calc(100vh - var(--navbar-h) - 24px);
  overflow-y: auto;
}
@media (max-width: 1100px) {
  .home-top-grid { grid-template-columns: 1fr; }
  .home-top-grid .events-card { position: static; max-height: none; overflow-y: visible; }
}
.home-hero-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-content: start;
}
.home-hero-stack .home-next-class { margin-bottom: 0; padding: 18px 22px; gap: 22px; }
.home-hero-stack .nc-date { padding: 8px 14px; min-width: 88px; }
.home-hero-stack .nc-date .day { font-size: 2.4rem; }
@media (min-width: 1600px) {
  .home-top-grid { grid-template-columns: minmax(0, 1fr) 400px; }
  .home-hero-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === New (staging template): 3-col lessons | exams | 重大事件 === */
.home-three-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 540px;
  gap: 20px;
  margin-bottom: 24px;
  align-items: start;
}
.home-three-col .events-card {
  margin-bottom: 0;
  position: sticky;
  top: calc(var(--navbar-h) + 12px);
  max-height: calc(100vh - var(--navbar-h) - 24px);
  overflow-y: auto;
}
@media (max-width: 1280px) {
  .home-three-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-three-col .events-card { grid-column: 1 / -1; position: static; max-height: none; overflow-y: visible; }
}
@media (max-width: 760px) {
  .home-three-col { grid-template-columns: 1fr; }
}

/* Compact event cards (.ec-card): lessons + exams columns */
.ec-col { min-width: 0; }
.ec-col-title {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-dark);
  margin: 0 0 12px 4px;
  display: flex; align-items: center; gap: 8px;
}
.ec-col-title i { font-size: 0.92rem; opacity: 0.85; }
.ec-col-title.ec-exam-title { color: #b45309; }
.ec-col-title.ec-exam-title i { color: #d97706; }

.ec-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ec-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: stretch;
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #fafefd 100%);
  border: 1px solid rgba(0, 168, 150, 0.18);
  border-radius: 12px;
  padding: 14px 14px 14px 20px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
  text-decoration: none !important;
  color: var(--text) !important;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  overflow: hidden;
}
.ec-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
}
.ec-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,168,150,.14);
  border-color: rgba(0, 168, 150, 0.4);
}

.ec-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ec-date {
  font-family: var(--display);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--brand-dark);
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}
.ec-countdown {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  align-self: stretch;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color: #fff;
  border-radius: 10px;
  padding: 12px 18px;
  min-width: 96px;
  font-family: var(--display);
  text-align: center;
}
.ec-num {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}
.ec-unit {
  font-size: 0.82rem;
  opacity: 0.92;
  margin-top: 4px;
}
/* In-progress / ended states: text label instead of big number — shrink so
   the countdown block doesn't push the left .ec-info column into per-char wrap */
.ec-countdown.ec-in-progress .ec-num,
.ec-countdown.ec-ended .ec-num {
  font-size: 1rem;
  line-height: 1.25;
  white-space: nowrap;
}

.ec-time {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-bottom: 2px;
}
.ec-class {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 6px;
}
.ec-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-family: var(--display);
  font-size: 0.75rem;
}
.ec-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  background: rgba(0,168,150,.1);
  color: var(--brand-dark);
  font-weight: 600;
}
.ec-slide {
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 4px;
}
.ec-slide i { font-size: 0.78rem; opacity: 0.7; }

/* Exam variant — amber */
.ec-card.ec-exam {
  background: linear-gradient(135deg, #fffaf0 0%, #fef3c7 100%);
  border-color: rgba(245,158,11,.4);
}
.ec-card.ec-exam::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.ec-card.ec-exam:hover {
  border-color: rgba(245,158,11,.65);
  box-shadow: 0 6px 18px rgba(245,158,11,.16);
}
.ec-card.ec-exam .ec-date { color: #92400e; }
.ec-card.ec-exam .ec-countdown {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: #fff;
}
.ec-card.ec-exam .ec-tag {
  background: rgba(245,158,11,.18);
  color: #92400e;
}

.ec-empty {
  color: var(--text-muted);
  font-size: 0.92rem;
  padding: 14px 4px;
  margin: 0;
}

/* Exam variant of .home-next-class — strong amber accent for distinction */
.home-next-class.nc-exam {
  background: linear-gradient(135deg, #fffaf0 0%, #fef3c7 100%);
  border: 1px solid rgba(245,158,11,.5);
  box-shadow: 0 6px 24px rgba(245,158,11,.15), 0 1px 3px rgba(15,23,42,0.04);
}
.home-next-class.nc-exam::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.home-next-class.nc-exam .nc-label { color: #92400e; font-weight: 700; }
.home-next-class.nc-exam .nc-label i { color: #d97706; }
.home-next-class.nc-exam .nc-date {
  background: linear-gradient(135deg, rgba(245,158,11,.28), rgba(245,158,11,.1));
  border: 1px solid rgba(245,158,11,.5);
  border-radius: 12px;
}
.home-next-class.nc-exam .nc-date .month { color: #92400e; }
.home-next-class.nc-exam .nc-date .day { color: #78350f; }
.home-next-class.nc-exam .nc-date .dow { color: #92400e; }
.home-next-class.nc-exam .nc-countdown {
  background: linear-gradient(135deg, #d97706, #f59e0b);
}

/* Assignments list */
.assignment-list { list-style: none; padding: 0; margin: 0; }
.assignment-list li.assn-row {
  border-bottom: 1px solid rgba(17,24,39,0.06);
}
.assignment-list li.assn-row:last-child { border-bottom: none; }
.assn-row-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  text-decoration: none !important;
  color: inherit !important;
  transition: background .12s, transform .12s;
}
.assn-row-link:hover {
  background: rgba(0,168,150,.06);
  transform: translateX(2px);
}
.assn-row-link:hover .assn-name { color: var(--brand-dark) !important; }
.assn-row-meta { min-width: 0; }
.assn-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text) !important;
  text-decoration: none !important;
  display: block;
  transition: color .12s;
}
.assn-class {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
}
.assn-progress {
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand-dark);
  white-space: nowrap;
}
.assn-progress.partial { background: #fef3c7; color: #92400e; }
.assn-progress.empty { background: #fee2e2; color: #991b1b; }
.assn-progress.done { background: #dcfce7; color: #166534; }

/* Major events list */
.events-list { list-style: none; padding: 0; margin: 0; }
.events-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(17,24,39,0.06);
}
.events-list li:last-child { border-bottom: none; }
.events-list li:first-child { padding-top: 4px; }
.event-date {
  font-family: var(--display);
  text-align: center;
  min-width: 50px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0, 168, 150, 0.08);
  border: 1px solid rgba(0, 168, 150, 0.18);
}
.event-date .m {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
  line-height: 1;
}
.event-date .d {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.05;
}
.event-date.urgent {
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.18);
}
.event-date.urgent .m { color: #b91c1c; }
.event-date.soon {
  background: rgba(245, 158, 11, 0.05);
  border-color: rgba(245, 158, 11, 0.18);
}
.event-date.soon .m { color: #a16207; }
.event-date.is-important {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid rgba(212, 160, 23, 0.4);
}
.event-date.is-important .m { color: #92400e; }
.event-date.is-important .d { color: #78350f; }

.event-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.event-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text) !important;
  text-decoration: none !important;
  line-height: 1.35;
}
.event-title:hover { color: var(--brand-dark) !important; }
.event-title::before { content: ''; }
.events-list li.is-important .event-title::before { content: "⭐ "; }

.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--display);
}
.event-meta .countdown {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e5e5e5;
  color: #555;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.72rem;
}
.events-list li.urgent .countdown { background: #fee2e2; color: #b91c1c; }
.events-list li.soon .countdown { background: #fef3c7; color: #a16207; }
.events-list li.in-progress .countdown { background: #dcfce7; color: #166534; }
.events-list li.is-important .countdown { background: #fef9c3; color: #78350f; }

/* Recent submissions */
.recent-list { list-style: none; padding: 0; margin: 0; }
.recent-list li {
  padding: 9px 0;
  border-bottom: 1px solid rgba(17,24,39,0.06);
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.recent-list li:last-child { border-bottom: none; }
/* Verdict pills — match the AACPOJ Submissions table style in
   templates/homework/_status_modal.html so the home page recent-subs
   list and the homework cell modal speak the same visual language. */
.recent-list .verdict {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
  font-family: var(--mono);
  font-size: 0.78rem;
  min-width: 36px;
  text-align: center;
}
.recent-list .verdict.v-AC  { background: #e6f5f2; color: #00A896; }
.recent-list .verdict.v-WA  { background: #fdebeb; color: #c0392b; }
.recent-list .verdict.v-CE  { background: #fdf2e0; color: #b9770e; }
.recent-list .verdict.v-TLE,
.recent-list .verdict.v-MLE,
.recent-list .verdict.v-OLE,
.recent-list .verdict.v-RTE { background: #fff3cd; color: #856404; }
.recent-list .verdict.v-IR,
.recent-list .verdict.v-IE,
.recent-list .verdict.v-AB,
.recent-list .verdict.v-PENDING { background: #e8e8e8; color: #555; }
.recent-list a {
  color: var(--text) !important;
  text-decoration: none !important;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-list a:hover { color: var(--brand-dark) !important; }
.recent-list .when {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* === Blog posts section === */
.home-blog-section {
  margin-top: 32px;
}
.home-section-divider {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px;
}
.home-section-divider h2 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--text);
}
.home-section-divider hr {
  flex: 1; border: 0; border-top: 1px solid rgba(17,24,39,0.1);
}

.blog-post-item {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 12px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.blog-post-item:hover {
  transform: translateY(-1px);
  border-color: rgba(0,168,150,.3);
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
}
.blog-post-item.sticky {
  border-color: rgba(212, 160, 23, 0.4);
  background: linear-gradient(135deg, #ffffff 0%, #fffdf5 100%);
}
.blog-post-item h3 {
  font-family: var(--display);
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 600;
}
.blog-post-item h3 a {
  color: var(--text) !important;
  text-decoration: none !important;
}
.blog-post-item h3 a:hover { color: var(--brand-dark) !important; }
.blog-post-item .meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--display);
}
.blog-post-item .meta .fa-star { color: #d4a017; }
.blog-post-item .summary {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}
.blog-post-item .summary :is(h1, h2, h3, h4) { font-size: 1rem; margin: 0.6em 0 0.3em; }
.blog-post-item .summary p:last-child { margin-bottom: 0; }
.blog-post-item .summary img { max-width: 100%; height: auto; border-radius: 8px; }

.home-pagination {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

@media (max-width: 720px) {
  .home-next-class { grid-template-columns: auto 1fr; }
  .home-next-class .nc-countdown { grid-column: 1 / -1; }
}

/* Anon hero (when not logged in) */
.home-anon-hero {
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  color: #fff;
  padding: 36px 32px;
  border-radius: 18px;
  margin-bottom: 28px;
  box-shadow: 0 10px 30px rgba(0,168,150,.18);
}
.home-anon-hero h1 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.home-anon-hero p {
  margin: 0 0 18px;
  opacity: 0.92;
  font-family: var(--display);
}
.home-anon-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.home-anon-hero .cta {
  display: inline-flex; align-items: center; padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: 0.95rem;
  text-decoration: none !important;
}
.home-anon-hero .cta.prim {
  background: #fff;
  color: var(--brand-dark) !important;
}
.home-anon-hero .cta.prim:hover { background: rgba(255,255,255,.92); }
.home-anon-hero .cta.ghost {
  background: rgba(255,255,255,.12);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.3);
}
.home-anon-hero .cta.ghost:hover { background: rgba(255,255,255,.2); }

/* === Phase 2 — 公告 + 最新筆記 right column ===================
   Layout is the shared .home-grid (2fr/1fr on desktop) used by
   My Assignments / Recent Submissions above. Announcement cards
   inside the left .home-card reuse .blog-post-item chrome from the
   old BlogPost section — but strip the card-in-card padding /
   background / border so the inner items read as a list inside the
   outer .home-card, not as nested cards.                          */
.home-card .blog-post-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(17, 24, 39, 0.08);
}
.home-card .blog-post-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.home-card .blog-post-item + .blog-post-item {
    padding-top: 16px;
}
.home-card .blog-post-item:hover {
    transform: none;
    border-color: rgba(17, 24, 39, 0.08);
    box-shadow: none;
}

/* === Right col compact note list ============== */
.home-side-notes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.home-side-note-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 4px;
}
.home-side-note-row:hover { background: #f5f5f5; }
.home-side-note-title {
    color: var(--brand-dark, #028090);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Allow the title to shrink so the ellipsis can actually take effect. Without
       this, flex item min-width:auto pins the width to the title's content size
       and an unbreakable long title pushes the whole card off-screen. */
    min-width: 0;
}
.home-side-note-title:hover { text-decoration: underline; }
.home-side-note-author {
    font-size: 11px;
    color: #a8a29e;
}
.home-side-note-author a {
    color: #6a5232;
    text-decoration: none;
}
.home-side-note-author a:hover { text-decoration: underline; }
.home-side-note-when {
    font-size: 11px;
    color: var(--text-muted, #a8a29e);
    margin-left: auto;
    white-space: nowrap;
}
.home-side-note-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}
.home-side-note-title { flex: 1 1 100%; }

.home-card-empty--side {
    font-size: 12px;
    color: #999;
    padding: 6px 0;
}

   Anonymous landing page (visitor not logged in)
   ============================================================ */
.home-anon {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin: 0 auto;
  padding: 4px 0 32px;
}

/* --- Hero ------------------------------------------------- */
.home-anon-hero {
  position: relative;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  color: #fff;
  border-radius: 22px;
  padding: 60px 56px 64px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0, 168, 150, 0.22),
              0 4px 12px rgba(15, 23, 42, 0.08);
}
.home-anon-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.home-anon-hero .hero-eyebrow {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, 0.95);
}
.home-anon-hero h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 18px;
}
.home-anon-hero p {
  font-family: var(--display);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  opacity: 0.95;
  margin: 0 0 28px;
}
.home-anon-hero .ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.home-anon-hero .cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none !important;
  transition: transform 0.08s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.home-anon-hero .cta.prim {
  background: #fff;
  color: var(--brand-dark) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}
.home-anon-hero .cta.prim:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
}
.home-anon-hero .cta.ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.home-anon-hero .cta.ghost:hover { background: rgba(255, 255, 255, 0.22); }

/* --- Section heading -------------------------------------- */
.home-anon-section .anon-section-title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 8px;
  color: #1c1917;
}
.home-anon-section .anon-section-sub {
  text-align: center;
  font-family: var(--display);
  font-size: 0.96rem;
  color: #57534e;
  margin: 0 0 32px;
}

/* --- Features grid ---------------------------------------- */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.feat-card {
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: 14px;
  padding: 24px 22px;
  transition: border-color 0.15s, transform 0.08s, box-shadow 0.15s;
}
.feat-card:hover {
  border-color: rgba(0, 168, 150, 0.4);
  box-shadow: 0 8px 24px rgba(0, 168, 150, 0.10);
  transform: translateY(-2px);
}
.feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(2, 128, 144, 0.12) 0%, rgba(0, 168, 150, 0.18) 100%);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}
.feat-card h3 {
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #1c1917;
  letter-spacing: -0.005em;
}
.feat-card p {
  font-family: var(--display);
  font-size: 0.92rem;
  line-height: 1.55;
  color: #57534e;
  margin: 0;
}

/* --- Level path (mirrors aacpschool.com/roadmap) ----------- */
.home-anon-section.levels {
  background: #fafaf9;
  border: 1px solid #e7e5e4;
  border-radius: 18px;
  padding: 44px 32px 40px;
}
.lvl-group {
  margin-top: 28px;
}
.lvl-group:first-of-type { margin-top: 16px; }
.lvl-group-label {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--brand-dark);
  margin-bottom: 14px;
  padding-left: 4px;
  border-left: 3px solid var(--brand);
  padding: 2px 0 2px 12px;
}
.lvl-cards {
  display: grid;
  gap: 14px;
}
.lvl-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.lvl-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.lvl-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }

.lvl-card {
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  padding: 18px 18px 20px;
  transition: border-color 0.15s, transform 0.08s, box-shadow 0.15s;
  display: block;
}
.lvl-card:hover {
  border-color: rgba(0, 168, 150, 0.45);
  box-shadow: 0 6px 18px rgba(0, 168, 150, 0.10);
  transform: translateY(-2px);
}
.lvl-card .lvl-badge {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.lvl-card h3 {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #1c1917;
  letter-spacing: -0.005em;
}
.lvl-card p {
  font-family: var(--display);
  font-size: 0.86rem;
  line-height: 1.55;
  color: #57534e;
  margin: 0;
}
.lvl-cta {
  margin-top: 24px;
  text-align: center;
  font-family: var(--display);
  font-size: 0.92rem;
  color: #57534e;
}
.lvl-cta p { margin: 0; }
.lvl-cta a {
  color: var(--brand-dark);
  font-weight: 600;
  text-decoration: none;
}
.lvl-cta a:hover { text-decoration: underline; }

/* --- Final CTA strip -------------------------------------- */
.home-anon-cta-strip {
  text-align: center;
  background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
  border: 1px solid rgba(0, 168, 150, 0.18);
  border-radius: 18px;
  padding: 44px 32px;
}
.home-anon-cta-strip h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 700;
  margin: 0 0 8px;
  color: #1c1917;
  letter-spacing: -0.01em;
}
.home-anon-cta-strip p {
  font-family: var(--display);
  font-size: 0.98rem;
  color: #57534e;
  margin: 0 0 22px;
}
.home-anon-cta-strip .ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.home-anon-cta-strip .cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none !important;
  transition: transform 0.08s, background 0.12s, box-shadow 0.12s;
}
.home-anon-cta-strip .cta.prim {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 168, 150, 0.30);
}
.home-anon-cta-strip .cta.prim:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 168, 150, 0.36);
}
.home-anon-cta-strip .cta.ghost {
  background: #fff;
  color: var(--brand-dark) !important;
  border: 1px solid rgba(0, 168, 150, 0.32);
}
.home-anon-cta-strip .cta.ghost:hover {
  background: rgba(0, 168, 150, 0.06);
}

/* --- Responsive ------------------------------------------- */
@media (max-width: 880px) {
  .home-anon { gap: 40px; }
  .home-anon-hero {
    padding: 44px 28px 48px;
  }
  .home-anon-section.levels { padding: 36px 20px 36px; }
  .lvl-cards.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .lvl-cards.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .home-anon-hero {
    padding: 36px 22px 40px;
    border-radius: 18px;
  }
  .home-anon-hero h1 { font-size: 1.7rem; }
  .home-anon-hero p { font-size: 0.98rem; }
  .feat-card { padding: 20px 18px; }
  .home-anon-cta-strip { padding: 36px 22px; }
  .lvl-cards.cols-2,
  .lvl-cards.cols-3,
  .lvl-cards.cols-4 { grid-template-columns: 1fr; }
}