/* LectureRoom home page. Loaded after style.css and scoped to body.hp, so the classroom is not affected. */

@font-face { font-family: "Bitter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/bitter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/bitter-latin-700-normal.woff2") format("woff2"); }

html:has(body.hp) { height: auto; min-height: 100%; }
body.hp {
  height: auto;
  min-height: 100%;
  background:
    radial-gradient(900px 520px at 10% -8%, #1d4236 0%, rgba(29, 66, 54, 0) 62%),
    radial-gradient(720px 500px at 108% 32%, #17382d 0%, rgba(23, 56, 45, 0) 60%),
    var(--board);
  background-repeat: no-repeat;
}

.hp-skip { position: absolute; left: 12px; top: -64px; z-index: 10; background: var(--yellow); color: var(--yellow-ink); padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.hp-skip:focus { top: 12px; }

/* ---- header */
.hp-top { max-width: 1120px; margin: 0 auto; padding: 22px 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hp-nav { display: flex; gap: 4px; }
.hp-nav a { padding: 8px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 15px; white-space: nowrap; }
.hp-nav a:hover { color: var(--chalk); background: var(--board-2); }

body.hp main { max-width: 1120px; margin: 0 auto; padding: 34px 24px 56px; }

/* ---- hero */
.hp-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; min-height: min(640px, calc(100dvh - 150px)); }

.hp-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 15px 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(22, 50, 42, .7); color: #cfe0d6; font-size: 14px; }
.hp-eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(244, 207, 87, .18); }

.hp h1 { font-family: var(--display); font-size: clamp(34px, 4.7vw, 54px); line-height: 1.07; margin: 0 0 18px; font-weight: 700; letter-spacing: -.5px; }
.hp-lede { font-size: 18.5px; line-height: 1.55; color: #cfdcd4; max-width: 33em; margin: 0 0 26px; }

/* ---- the two ways in */
.hp-panel { max-width: 36em; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, #183529, #152f26); box-shadow: 0 22px 60px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .04); }
.hp-block label { display: block; font-weight: 600; font-size: 15px; margin: 0 0 9px; }
.hp-inputrow { display: flex; gap: 10px; }
.hp-inputrow input { flex: 1; min-width: 0; min-height: 50px; padding: 0 15px; border-radius: 12px; border: 1px solid var(--line); background: #0e211a; color: var(--chalk); font-size: 16px; }
.hp-inputrow input::placeholder { color: #8aa699; }
.hp-inputrow input:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(244, 207, 87, .18); }
.hp-go, .hp-join { min-height: 50px; padding: 0 20px; border-radius: 12px; white-space: nowrap; flex: none; }
.hp-go svg { transition: transform .15s ease; }
.hp-go:not(:disabled):hover svg { transform: translateX(3px); }
.hp-join { background: transparent; }
.hp-join:not(:disabled) { border-color: var(--yellow); color: var(--yellow); }
.hp-join:not(:disabled):hover { background: var(--yellow); color: var(--yellow-ink); }
.hp-join:disabled { opacity: 1; color: #7f9a8d; border-style: dashed; cursor: not-allowed; }
.hp-hint { margin: 9px 2px 0; font-size: 14px; color: var(--muted); }

.hp-or { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em; }
.hp-or::before, .hp-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.hp-panel .err { min-height: 0; margin: 0; }
.hp-panel .err:not(:empty) { margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: rgba(232, 96, 76, .12); border: 1px solid rgba(232, 96, 76, .35); line-height: 1.45; }

/* ---- recent classes */
.hp-recent { max-width: 36em; margin-top: 22px; }
.hp-recent h2 { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0 0 10px; }
.hp-recent h2 span { font-weight: 400; opacity: .85; }
#recentList { display: flex; flex-wrap: wrap; gap: 10px; }
#recentList a { display: grid; grid-template-columns: auto auto; gap: 2px 14px; align-items: baseline; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--board-2); text-decoration: none; }
#recentList a:hover { border-color: var(--yellow); }
#recentList strong { grid-column: 1 / -1; font-weight: 600; }
#recentList code { font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); }
#recentList time { font-size: 13px; color: var(--muted); }

/* ---- the picture of a class */
.hp-visual .hall { box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.legend { display: flex; justify-content: center; gap: 24px; margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.legend .k { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.legend .d { background: #254a3d; border: 1px solid #3a6656; }
.legend .y { background: var(--yellow); }

/* ---- how it works */
.hp-how { margin-top: 64px; }
.hp-how h2 { font-family: var(--display); font-size: 28px; margin: 0 0 20px; }
.hp-how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hp-how li { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--board-2); }
.hp-how .n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); font-weight: 700; margin-bottom: 14px; }
.hp-how h3 { margin: 0 0 6px; font-size: 18px; }
.hp-how p { margin: 0; color: #cfdcd4; font-size: 15.5px; line-height: 1.55; }

.hp-features { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hp-features li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: #cfe0d6; font-size: 14.5px; }
.hp-features li::before { content: "\2713"; color: var(--ok); font-weight: 700; }

/* ---- footer */
.hp-foot { max-width: 1120px; margin: 0 auto; padding: 22px 24px 34px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.hp-foot a { color: var(--chalk); }

/* ---- smaller screens */
@media (max-width: 900px) {
  .hp-hero { grid-template-columns: 1fr; gap: 40px; min-height: 0; }
  .hp-how ol { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hp-top { padding-top: 16px; }
  .hp-nav a { padding: 8px 8px; font-size: 14px; }
  body.hp main { padding-top: 24px; }
  .hp-panel { padding: 18px; }
  .hp-inputrow { flex-direction: column; }
  .hp-go, .hp-join { width: 100%; }
  .hp-lede { font-size: 17px; }
  .seats { gap: 8px; }
  #recentList a { width: 100%; }
}
@media (max-width: 420px) { .hp-nav a[href="#how"] { display: none; } }
@media (prefers-reduced-motion: reduce) { .hp-go svg { transition: none; } }