/* LectureRoom "calm" theme: a light, quiet look in the spirit of Google Meet.
   Loaded after every other stylesheet, so it only repaints; nothing about how the app works changes.
   Switch it off any time:  touch /var/lib/lectureroom-stats/theme-classic   (and rm that file to switch it back on). */

:root {
  /* shared palette used by style.css, home.css, room.css and watch.css */
  --board: #ffffff;          /* page */
  --board-2: #f5f7fa;        /* cards, tiles, inputs */
  --board-3: #eaeff5;        /* buttons */
  --line: #dde3ea;
  --chalk: #1c2430;          /* main text */
  --muted: #5b6776;
  --yellow: #1877f2;         /* the one accent colour (now Facebook blue) */
  --yellow-ink: #ffffff;
  --red: #d64541;
  --ok: #2e9b6a;
  --display: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* extras used only here */
  --calm-accent-hover: #166fe5;
  --calm-soft: #e7f0fe;
  --calm-sand: #f3f7fd;
  --calm-ink-soft: #425064;
  --calm-shadow: 0 1px 2px rgba(28, 36, 48, .06), 0 8px 28px rgba(28, 36, 48, .08);

  /* landing page */
  --bg: #ffffff; --panel: #f5f7fa; --ink: #1c2430; --mute: #5b6776; --acc: #1877f2; --accink: #ffffff;
}

html, body { color-scheme: light; }
body { background: var(--board); color: var(--chalk); font-family: var(--sans); letter-spacing: .005em; }
h1, h2, h3, .brand, .cls-title, .chalk, #waiting, .hp-how h2, #goodbye h1, .lobby-side h1 {
  font-family: var(--sans); font-weight: 600; letter-spacing: -.01em;
}
:focus-visible { outline: 3px solid rgba(24, 119, 242, .45); outline-offset: 2px; }

/* ------------------------------------------------------------ buttons and fields */
.btn { border-radius: 999px; border: 1px solid var(--line); background: var(--board-3); color: var(--chalk); font-weight: 600; }
.btn:hover { background: #dde7f4; }
.btn.accent { background: var(--yellow); color: #fff; border-color: var(--yellow); }
.btn.accent:hover { background: var(--calm-accent-hover); border-color: var(--calm-accent-hover); }
.btn.ghost { background: transparent; }
.field input, .joinbox input, .search input, #chatForm input { background: #fff; border-color: #ccd5df; border-radius: 12px; }
.field input::placeholder, .joinbox input::placeholder { color: #8b97a8; }
.field input:focus, .joinbox input:focus, .search input:focus, #chatForm input:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(24, 119, 242, .16); outline: none; }
.err, .lobby-err, .lp-err { color: #b3382f; }
.joinbox button:not(:disabled):hover { background: #dde7f4; }

.brand .mark { background: var(--yellow); color: #fff; border-radius: 10px; }
.notice, .lp .notice { background: #fff7e3; border: 1px solid #f0dfaa; color: #6b5200; }
.notice code { background: rgba(0, 0, 0, .06); }

/* ------------------------------------------------------------ home page (sign-in page and course pages) */
body.hp {
  background:
    radial-gradient(900px 520px at 6% -10%, #e8f1fd 0%, rgba(232, 241, 253, 0) 62%),
    radial-gradient(720px 500px at 106% 28%, #eef2fb 0%, rgba(238, 242, 251, 0) 60%),
    #ffffff;
  background-repeat: no-repeat;
}
.hp-skip { background: var(--yellow); color: #fff; }
.hp-nav a { color: var(--muted); }
.hp-nav a:hover { color: var(--chalk); background: var(--board-2); }
.hp-eyebrow { background: rgba(255, 255, 255, .85); border-color: var(--line); color: var(--calm-ink-soft); }
.hp-eyebrow span { background: var(--yellow); box-shadow: 0 0 0 4px rgba(24, 119, 242, .16); }
.hp-lede, .lede { color: var(--calm-ink-soft); }
.hp-panel, .lg form { background: #fff; border: 1px solid var(--line); box-shadow: var(--calm-shadow); border-radius: 20px; }
.hp-inputrow input, .hp-course select, .hp-coursenew, .lg input { background: #f7f9fc; border-color: #ccd5df; color: var(--chalk); }
.hp-inputrow input::placeholder { color: #8b97a8; }
.hp-inputrow input:focus, .hp-course select:focus, .hp-coursenew:focus, .lg input:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(24, 119, 242, .16); }
.hp-go, .hp-join, .lg .btn { border-radius: 999px; }
.hp-join:not(:disabled) { border-color: var(--yellow); color: var(--yellow); }
.hp-join:not(:disabled):hover { background: var(--yellow); color: #fff; }
.hp-join:disabled { color: #8b97a8; }
.hp-panel .err:not(:empty), .lg .err:not(:empty) { background: #fdeeed; border-color: #f2c6c2; color: #a8342b; }
.hp-courseacts a, .hp-foot a { color: var(--yellow); }
#recentList a { background: #fff; }
#recentList a:hover { border-color: var(--yellow); }
.hp-how li { background: #fff; box-shadow: var(--calm-shadow); border-radius: 18px; }
.hp-how .n { background: var(--calm-soft); color: var(--yellow); }
.hp-how p, .hp-features li { color: var(--calm-ink-soft); }
.hp-features li::before { color: var(--ok); }

.hall { background: var(--calm-sand); border-color: #dbe6f5; border-radius: 22px; }
.hp-visual .hall { box-shadow: var(--calm-shadow); }
.board { background: #e7effb; border: 6px solid #cfdcf0; box-shadow: none; border-radius: 10px; }
.chalk { color: #2a3f5f; opacity: 1; }
.seats i { background: #cfdcee; }
@keyframes seat-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes seat-on { 0% { transform: scale(.4); opacity: 0; background: #cfdcee; } 60% { transform: none; opacity: 1; background: #cfdcee; } 100% { background: var(--yellow); } }
.legend .d { background: #cfdcee; border-color: #b4c5dd; }
@media (prefers-reduced-motion: reduce) { .seats i:nth-child(3n) { background: var(--yellow); } }

/* ------------------------------------------------------------ landing page */
.lp-brand .mark { background: var(--acc); color: #fff; }
.lp a { color: var(--acc); }
.lp-brand { color: var(--ink) !important; }
.lp-card { background: #fff; border-color: var(--line); box-shadow: var(--calm-shadow); border-radius: 22px; }
.lp-teach { background: linear-gradient(180deg, #f2f7fe, #ffffff); border-color: #d3e2f8; }
.lp input[type=text], .lp input:not([type]), .lp select { background: #f7f9fc; border: 1.5px solid #ccd5df; color: var(--ink); border-radius: 14px; }
.lp input::placeholder { color: #8b97a8; }
.lp input:focus, .lp select:focus, .lp summary:focus-visible { outline: 3px solid rgba(24, 119, 242, .35); border-color: var(--acc); }
.lp-btn { border-radius: 999px; }
.lp-go { background: var(--acc); color: #fff; }
.lp-go:hover { filter: none; background: var(--calm-accent-hover); }
.lp-joinbtn { background: var(--calm-soft); color: #1553b0; }
.lp-joinbtn:disabled { background: #eff2f6; color: #9aa6b6; }
.lp-btn:focus-visible { outline: 3px solid rgba(24, 119, 242, .45); }
.lp-recent a { background: #fff; color: var(--ink); }
.lp-recent a:hover { border-color: var(--acc); }
.lp-rec summary { color: var(--acc); }
.lp-rec summary::before { border-color: var(--acc); }
.lp-step { color: var(--mute); }
.lp h1 { font-weight: 600; letter-spacing: -.02em; }

/* ------------------------------------------------------------ lobby */
.preview { background: var(--board-2); border-color: var(--line); border-radius: 20px; box-shadow: var(--calm-shadow); }
.preview .off-msg { background: var(--board-2); color: var(--muted); }
.fine, .sub { color: var(--muted); }

/* ------------------------------------------------------------ round controls, Meet style */
.ctl { background: #eef2f7; border-color: #eef2f7; color: var(--chalk); }
.ctl:hover { background: #e1e8f1; }
.ctl.off { background: var(--red); border-color: var(--red); color: #fff; }
.ctl.on { background: var(--calm-soft); border-color: var(--calm-soft); color: var(--yellow); }
.ctl.leave { background: var(--red); border-color: var(--red); color: #fff; }
.ctl.endall { background: #fff; border-color: #efc4c0; color: #b3382f; }
.ctl.endall:hover { background: #fdeeed; }
.ctl .count { background: var(--yellow); color: #fff; }

/* ------------------------------------------------------------ class room */
#meeting, #goodbye { background: #fff; }
#topbar { border-bottom: 1px solid var(--line); background: #fff; }
.live { background: #fdeeed; color: #b3382f; }
.rec { background: #fdeeed; color: #b3382f; }
.link-btn:hover { background: var(--board-2); color: var(--chalk); }
#banner { background: #fff4d6; color: #6b4b00; }
#audioBanner { background: var(--yellow); color: #fff; }
#netNote { background: #fff4d6; color: #6b4b00; box-shadow: 0 2px 10px rgba(28, 36, 48, .15); }
#waiting { border-color: #d3dce8; background: var(--board-2); border-radius: 18px; color: var(--muted); font-size: 20px; font-weight: 500; }

.tile { background: #e9eef4; border: 0; border-radius: 16px; box-shadow: 0 1px 3px rgba(28, 36, 48, .12); }
.tile video { background: #e1e7ef; }
.tile.screen video { background: #172030; }
.tile.speaking { box-shadow: 0 0 0 3px var(--yellow); }
.tile .avatar, .tile .card { background: #e9eef4; }
.tile .card { color: var(--muted); }
.nm-bar { background: rgba(23, 32, 48, .68); color: #fff; }
.nm-bar .role { background: #fff; color: var(--yellow); }
#strip .tile { border-radius: 14px; }

#panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; margin: 12px 12px 12px 0; box-shadow: var(--calm-shadow); overflow: hidden; }
.tabs { border-bottom: 1px solid var(--line); }
.tabs button { color: var(--muted); }
.tabs button.on { color: var(--yellow); border-bottom-color: var(--yellow); }
.badge { background: var(--yellow); color: #fff; }
.msg .meta b { color: var(--chalk); }
.msg.lec .meta b { color: var(--yellow); }
.msg .txt { background: #f0f3f8; }
.msg.mine .txt { background: var(--calm-soft); }
.msg.lec .txt { border: 1px solid #bcd3f6; }
.locked-note { color: #8a5a00; border-top-color: var(--line); }
#chatForm, .search { border-color: var(--line); }
#chatForm button { background: var(--yellow); color: #fff; border-radius: 999px; }
.person:hover { background: rgba(28, 36, 48, .04); }
.person.hand-up { background: rgba(24, 119, 242, .1); }
.person.speaking .dot { box-shadow: 0 0 0 2px var(--yellow); }
.person .ic svg, .nm-bar .mico svg { color: #d64541; }
.nm-bar .mico svg { color: #ff9d8f; }
.pbtn { background: var(--board-3); border-color: var(--line); border-radius: 999px; }
.pbtn:hover { background: #dde7f4; }
.pbtn.go { background: var(--yellow); color: #fff; border-color: var(--yellow); }
.pbtn.danger { color: #b3382f; background: transparent; border-color: transparent; }
.panel-foot { border-top-color: var(--line); }

#controls { background: #fff; border-top: 1px solid var(--line); }
.quality select { background: var(--board-2); border-color: var(--line); border-radius: 999px; color: var(--chalk); }

.toast { background: #1c2430; color: #fff; box-shadow: 0 8px 24px rgba(28, 36, 48, .25); border-radius: 999px; }

@media (max-width: 860px) {
  #panel { margin: 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
}

/* presenting from a phone (slides, photos, whiteboard) */
#present { background: #fff; }
.pr-stage { background: #eef2f7; }
.pr-danger { border-color: #efc4c0; color: #b3382f; }
.pr-tools button.on { box-shadow: 0 0 0 2px rgba(24, 119, 242, .35); }

/* ------------------------------------------------------------ recordings and sign-in (watch.php) */
.wp-note { background: var(--board-2); color: var(--calm-ink-soft); border-radius: 16px; }
.wp-list a { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(28, 36, 48, .06); }
.wp-list a:hover, .wp-list a:focus-visible { border-color: var(--yellow); }
.wp-player { border-radius: 18px; box-shadow: var(--calm-shadow); }
.wp-parts button { background: #fff; border-radius: 14px; }
.wp-parts button:hover { border-color: #a9c6f0; }
.wp-parts .pn { background: var(--calm-soft); color: var(--yellow); }
.wp-parts .on .pn { background: var(--yellow); color: #fff; }
.wp-save { background: #fff; border-radius: 14px; }
.wp-crumb a:hover { color: var(--chalk); }
.vw .vw-err { background: #fdeeed; border-color: #f2c6c2; color: #a8342b; }
.vw input[type=text], .vw input[type=email], .vw input[type=password] { background: #f7f9fc; border-color: #ccd5df; color: var(--chalk); }
.vw .btn { border-radius: 999px; }

/* ------------------------------------------------------------ help guide (the ? button and its panel) */
html .lrg-fab { background: var(--yellow); color: #fff; box-shadow: 0 4px 16px rgba(28, 36, 48, .22); }
html .lrg-fab .q { background: #fff; color: var(--yellow); }
html .lrg-hint { background: #fff; color: var(--chalk); border-color: var(--line); box-shadow: var(--calm-shadow); }
html .lrg-hint button { color: var(--muted); }
html .lrg-panel { background: #fff; color: var(--chalk); border-color: var(--line); box-shadow: 0 12px 40px rgba(28, 36, 48, .22); }
html .lrg-head { background: var(--board-2); border-bottom-color: var(--line); }
html .lrg-head small { color: var(--muted); }
html .lrg-x { color: var(--chalk); }
html .lrg-x:hover { background: rgba(28, 36, 48, .08); }
html .lrg-msg.a { background: #eef2f7; color: var(--chalk); }
html .lrg-msg.u { background: var(--yellow); color: #fff; }
html .lrg-msg.n { color: var(--muted); }
html .lrg-chips button { border-color: #ccd5df; color: var(--chalk); background: #fff; }
html .lrg-chips button:hover { background: var(--calm-soft); }
html .lrg-form { background: #fff; border-top-color: var(--line); }
html .lrg-form input { background: #f7f9fc; border-color: #ccd5df; color: var(--chalk); }
html .lrg-form input::placeholder { color: #8b97a8; }
html .lrg-form button { background: var(--yellow); color: #fff; }
html .lrg-fab:focus-visible, html .lrg-panel button:focus-visible, html .lrg-panel input:focus-visible { outline-color: rgba(24, 119, 242, .5); }

/* help guide: start card, coach bubbles, "Ask me" box */
html .lrg-foot { background: #fff; color: var(--muted); }
html .lrg-dots span { background: var(--muted); }
html .lrg-start, html .lrg-ask { background: var(--board-2); color: var(--chalk); border-color: var(--line); border-radius: 20px; }
html .lrg-ask { border-style: solid; }
html .lrg-start h2 { color: var(--chalk); }
html .lrg-start p { color: var(--calm-ink-soft); }
html .lrg-start .pick { background: #fff; border-color: #ccd5df; color: var(--chalk); }
html .lrg-start .pick:hover { border-color: var(--yellow); }
html .lrg-start .pick small { color: var(--muted); }
html .lrg-start li i { border-color: #a3b3c8; color: var(--calm-ink-soft); }
html .lrg-start li.done i { background: var(--ok); border-color: var(--ok); color: #fff; }
html .lrg-start li.now i { border-color: var(--yellow); color: var(--yellow); }
html .lrg-start .link { color: var(--yellow); }
html .lrg-start .close { color: var(--muted); }
html .lrg-glow { outline-color: var(--yellow) !important; }
html .lrg-coach-dim { background: rgba(28, 36, 48, .28); }
html .lrg-coach { background: #fff; color: var(--chalk); box-shadow: 0 10px 34px rgba(28, 36, 48, .28); }
html .lrg-coach::after { background: #fff; }
html .lrg-coach .acts .cnt, html .lrg-coach .skip { color: var(--muted); }
html .lrg-coach .next { background: var(--yellow); color: #fff; border-radius: 999px; }
html .lrg-ring { border-color: var(--yellow); }
html .lrg-ask input { background: #fff; border-color: #ccd5df; color: var(--chalk); }
html .lrg-ask input:focus { outline-color: rgba(24, 119, 242, .45); }
html .lrg-ask form button, html .lrg-act { background: var(--yellow); color: #fff; border-radius: 999px; }
html .lrg-ask-chips button { border-color: #ccd5df; color: var(--chalk); background: #fff; }
html .lrg-ask-chips button:hover { background: var(--calm-soft); }
html .lrg-ask-out { background: #fff; border: 1px solid var(--line); color: var(--chalk); }

/* calm-landing-v2: one main action (Start a class) with a quiet "join with a code" row beneath it */
.lp-top, .lp-main, .lp-foot { max-width: 680px; }
.lp-cards { grid-template-columns: 1fr; gap: 14px; }
.lp-teach { padding: 26px; }
.lp-join { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 14px 16px; background: transparent; box-shadow: none; border: 1px solid var(--line); border-radius: 18px; }
.lp-join .lp-step { display: none; }
.lp-join h2 { grid-column: 1 / -1; margin: 0; font-size: 15px; font-weight: 600; color: var(--mute); }
.lp-join input { height: 48px; }
.lp-join .lp-btn { width: auto; height: 48px; padding: 0 22px; font-size: 16px; }
.lp-join .lp-hint { grid-column: 1 / -1; font-size: 13px; }
@media (max-width: 420px) { .lp-join { grid-template-columns: 1fr; } .lp-join .lp-btn { width: 100%; } }

/* calm-admin-v1: the admin dashboard in the same light blue theme */
.adm { --green: #2e9b6a; --blue: #5aa9f0; background: #f5f7fa; color: var(--chalk); }
.adm h1 { font-weight: 600; letter-spacing: -.01em; }
.adm h2 { color: var(--yellow); }
.adm a { color: var(--yellow); }
.adm .tile, .adm .card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(28, 36, 48, .05); }
.adm .pill { background: #fff; border-color: var(--line); }
.adm .pill.bad { background: #fdeeed; border-color: #efc4c0; color: #b3382f; }
.adm .banner { background: #fff4d6; border-color: #f0dfaa; color: #6b4b00; border-radius: 14px; }
.adm .table-wrap { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(28, 36, 48, .05); }
.adm table, .adm th:first-child, .adm td:first-child { background: #fff; }
.adm th { color: var(--muted); }
.adm .bar { background: #e6ebf2; }