/* GU Learn for faculty. The page frame (side menu, top bar on phones, cards) comes from ../student-ui/student.css,
   so both panels look and behave alike; this file adds what only faculty need. */

.s-content { max-width: 1200px; }
.s-me a { white-space: nowrap; }
.s-side .s-brand em { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 999px; background: var(--dark-raised); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-primary-on-dark); }

/* A row of figures at the top of a page */
.f-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.f-kpis > div { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border-left: 1px solid var(--line-subtle); }
.f-kpis > div:first-child { border-left: 0; }
.f-kpis strong { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.05; }

/* Filter chips */
.f-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.f-chips button { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.f-chips button[aria-pressed="true"] { border-color: var(--dark-bg); background: var(--dark-bg); color: var(--text-inverse); }

/* Marking: the list of submissions beside the one being marked */
.f-split { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.f-list { display: flex; flex-direction: column; max-height: calc(100vh - 220px); overflow-y: auto; padding: 6px; }
.f-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; text-align: left; white-space: normal; }
.f-list button:hover { background: var(--page-bg); }
.f-list button[aria-current="true"] { background: var(--brand-primary-soft); }

/* The live class room */
.f-stage { position: relative; min-height: 300px; border-radius: 14px; overflow: hidden; background: var(--player-bg); color: var(--dark-text); display: flex; flex-direction: column; }
.f-dot { width: 9px; height: 9px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.25); animation: f-pulse 1.6s ease-in-out infinite; }
@keyframes f-pulse { 50% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0.08); } }

/* Buttons used as list rows wrap like text */
button.f-row { white-space: normal; text-align: left; }

@media (max-width: 900px) {
  .f-split { grid-template-columns: minmax(0, 1fr); }
  .f-list { max-height: 260px; }
  .f-kpis > div { border-left: 0; border-top: 1px solid var(--line-subtle); }
  .f-kpis > div:first-child { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .f-dot { animation: none; } }