/* SpeakScore interface styles.
 * Extracted from docs/make_wireframe_html.py, which renders the approved
 * mockups in 28 Ebright/mockups/. Regenerate rather than hand-edit: the
 * wireframe is the specification and the two must not drift apart.
 */

:root{--navy:#123A63;--navy-d:#0C2A49;--ink:#0F172A;--muted:#64748B;--rule:#E2E8F0;
      --bg:#EEF2F6;--surf:#fff;--wash:#F8FAFC;--ok:#0E7C66;--warn:#B8720C;--stop:#B3261E;
      --ai:#0E7C66;--man:#4F46E5;--red:#E4002B}
*{box-sizing:border-box;margin:0;padding:0;font-family:"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif}
body{background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
a{text-decoration:none;color:inherit}
/* page chrome */
.topbar{background:linear-gradient(135deg,var(--navy),var(--navy-d));color:#fff;
  padding:20px 30px;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.topbar h1{font-size:24px;font-weight:700;letter-spacing:-.4px;display:flex;
  align-items:center;gap:11px}
.topbar p{font-size:13px;opacity:.86;margin-top:4px;max-width:96ch}
.topbar .meta{display:flex;gap:10px;margin-top:12px;font-size:12.5px;flex-wrap:wrap;align-items:center}
.topbar .meta span{background:rgba(255,255,255,.18);padding:4px 12px;border-radius:12px}
.topbar .meta button{background:#fff;color:var(--navy);border:0;border-radius:12px;
  padding:5px 14px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.layout{display:flex;align-items:flex-start}
.sidebar{width:250px;background:var(--surf);border-right:1px solid var(--rule);
  padding:16px 0 40px;position:sticky;top:118px;height:calc(100vh - 118px);
  overflow-y:auto;flex-shrink:0}
.sidebar h3{font-size:10.5px;text-transform:uppercase;letter-spacing:1.4px;
  color:var(--muted);padding:14px 20px 6px}
.sidebar a{display:block;padding:7px 20px;font-size:12.5px;border-left:3px solid transparent;color:#334155}
.sidebar a:hover{background:var(--bg);border-left-color:var(--navy);color:var(--ink)}
.main{flex:1;padding:26px 30px 80px;min-width:0}
.section{margin-bottom:44px;scroll-margin-top:130px}
.section-header{border-left:5px solid var(--navy);padding:9px 16px;margin-bottom:20px;
  background:var(--surf);border-radius:0 8px 8px 0;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.section-header h2{font-size:19px;color:var(--navy)}
.section-header p{font-size:12.5px;color:var(--muted);margin-top:3px}
.screens{display:grid;grid-template-columns:repeat(auto-fill,minmax(560px,1fr));gap:26px}
.cell{min-width:0}
/* browser frame */
.frame{background:#334155;border-radius:12px;padding:8px;box-shadow:0 6px 20px rgba(15,23,42,.16);
  scroll-margin-top:130px}
.browser{display:flex;align-items:center;gap:6px;padding:2px 6px 8px}
.browser i{width:9px;height:9px;border-radius:50%;background:#64748B;display:block}
.browser .url{margin-left:10px;background:#475569;color:#CBD5E1;font-size:10.5px;
  border-radius:6px;padding:2px 10px;flex:1}
.page{background:var(--surf);border-radius:8px;overflow:hidden;height:560px;
  display:flex;flex-direction:column;font-size:12px}
/* app chrome inside the frame */
/* The admin bar carries six nav items plus a role tag and was 30px wider than
   the frame, so the whole screen scrolled sideways. The nav is the part allowed
   to give way: it may shrink and scroll on its own, everything else holds. */
.appbar{background:var(--surf);border-bottom:1px solid var(--rule);display:flex;
  align-items:center;gap:9px;padding:9px 14px;flex-shrink:0;min-width:0}
.appbar>*{flex-shrink:0}
.appbar nav{min-width:0;flex-shrink:1;overflow-x:auto;scrollbar-width:none}
.appbar nav::-webkit-scrollbar{display:none}
.appbar .logo{width:22px;height:22px;border-radius:6px;color:var(--navy);
  display:grid;place-items:center;font-weight:700;font-size:11px}
.appbar b{font-size:13px}
.appbar nav{display:flex;gap:2px;margin-left:14px}
.appbar .nv{padding:4px 9px;border-radius:6px;color:var(--muted);font-size:11.5px;cursor:pointer}
.appbar .nv:hover{background:var(--bg);color:var(--ink)}
.appbar .nv.on{color:var(--navy);font-weight:700;box-shadow:inset 0 -2px 0 var(--navy);border-radius:0}
.appbar .bell{margin-left:auto;font-size:12px}
.appbar .avatar{width:22px;height:22px;border-radius:50%;background:#CCFBF1;color:#0F766E;
  display:grid;place-items:center;font-size:10px;font-weight:700}
.body{padding:14px 16px;overflow-y:auto;flex:1}
.crumb{font-size:10.5px;color:var(--muted);margin-bottom:8px}
.crumb b{color:var(--ink)}
h1.t{font-size:19px;margin-bottom:2px}
p.sub{font-size:11.5px;color:var(--muted);margin-bottom:12px}
.row{display:flex;gap:10px;align-items:flex-start}
.row.top{justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.grid{display:grid;gap:10px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}.g21{grid-template-columns:1.7fr 1fr}
/* minmax(0,1fr) rather than 1fr: a grid track's default minimum is min-content,
   so six stat cards with long labels pushed the admin screen 30px wider than
   its own frame and it scrolled sideways. */
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.tag{background:var(--navy);color:#fff;font-size:8px;letter-spacing:1.2px;font-weight:700;
  padding:2px 6px;border-radius:4px}
/* elements */
.btn{background:var(--navy);color:#fff;border:0;border-radius:8px;padding:8px 14px;
  font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--navy-d)}
.btn.gh{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.btn.ai{background:var(--ai)}.btn.man{background:var(--man)}
.btn.sm{padding:5px 10px;font-size:10.5px}
.btn:disabled{background:#CBD5E1;color:#64748B;cursor:not-allowed}
.card{background:var(--wash);border:1px solid var(--rule);border-radius:10px;padding:11px 13px}
.card.p{background:#EFF6FF;border-color:#BFDBFE}
.card.ok{background:#ECFDF5;border-color:#A7F3D0}
.card.wn{background:#FFFBEB;border-color:#FDE68A}
.stat .lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.stat .big{font-size:22px;font-weight:700;color:var(--navy);margin:2px 0}
.stat .foot{font-size:10.5px;color:var(--muted)}
/* for stats whose "value" is a word, not a number */
.stat.txt .big{font-size:12.5px;font-weight:600;line-height:1.3;margin:3px 0 2px}
.sc{border-radius:9px;padding:9px 10px;border:1px solid var(--rule);background:var(--wash)}
.sc .k{font-size:9px;letter-spacing:.7px;color:var(--muted);font-weight:700}
.sc .n{font-size:11px;color:var(--ink);margin-bottom:2px}
.sc .v{font-size:18px;font-weight:700;color:var(--navy)}
.sc .c{font-size:9.5px;color:var(--muted)}
.sc.a{background:#EFF6FF;border-color:#BFDBFE}.sc.b{background:#FDF2F8;border-color:#FBCFE8}
.sc.c{background:#FEF2F2;border-color:#FECACA}.sc.d{background:#FFFBEB;border-color:#FDE68A}
.sc.e{background:#EEF2FF;border-color:#C7D2FE}.sc.f{background:#ECFDF5;border-color:#A7F3D0}
table{width:100%;border-collapse:collapse}
th{font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);
  text-align:left;padding:6px 8px;border-bottom:1px solid var(--rule)}
td{padding:7px 8px;border-bottom:1px solid var(--rule);font-size:11.5px}
tr:last-child td{border-bottom:0}
.pill{display:inline-block;border-radius:20px;padding:2px 9px;font-size:9.5px;font-weight:600}
.pill.ok{background:#D1FAE5;color:#065F46}.pill.wn{background:#FEF3C7;color:#92400E}
.pill.in{background:#DBEAFE;color:#1E40AF}.pill.mu{background:#E2E8F0;color:#475569}
.ava{width:22px;height:22px;border-radius:50%;background:#E0E7FF;color:#3730A3;
  display:inline-grid;place-items:center;font-size:9px;font-weight:700;margin-right:6px}
.bar{height:6px;background:#E2E8F0;border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--navy)}
.bar.ok i{background:var(--ok)}.bar.man i{background:var(--man)}
.steps{display:flex;gap:0;margin:10px 0 14px}
.step{flex:1;text-align:center;font-size:10px;color:var(--muted);position:relative}
/* The rail joining the circles. Each step draws the segment to its LEFT, so the
   first step draws none — that is why the connector is keyed off ::before and
   not a single line under the whole row. */
/* The segment stops 14px short of each circle centre — circle radius 10 plus a
   4px gap — so the rail never crosses the number. Relying on paint order to
   hide it behind the circle did not work: it struck straight through. */
.step::before{content:"";position:absolute;top:9px;right:calc(50% + 14px);
  width:calc(100% - 28px);height:2px;background:#CBD5E1}
.step:first-child::before{display:none}
.step.done::before,.step.on::before{background:var(--ok)}
.step i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:#E2E8F0;color:#64748B;font-size:10px;font-style:normal;margin:0 auto 4px;
  position:relative;z-index:1}
.step.on i{background:var(--navy);color:#fff}.step.on{color:var(--navy);font-weight:700}
.step.done i{background:var(--ok);color:#fff}.step.done{color:var(--ok)}
/* Video placeholder — a real 16:9 box, so it reads as a video player instead of
   the old squat 150px strip. Width is capped rather than height, which keeps the
   ratio honest: 444px wide is 250px tall, and measured against the scoring column
   (547px) plus the rest of this column (297px) that is the tallest the video can
   be before screen 11 starts to scroll. Below 444px it simply fills the frame,
   which is what happens on the board where each frame is about 560px wide. */
.player{width:min(100%,444px);margin:0 auto}
/* course catalogue + lesson page */
.hero{text-align:center;padding:14px 0 4px}
.kicker{font-size:9px;letter-spacing:2.2px;color:var(--muted);font-weight:700}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{font-size:10px;padding:4px 11px;border-radius:12px;border:1px solid var(--rule);
  background:#fff;color:var(--muted);cursor:pointer;font-family:inherit}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.course{padding:0;overflow:hidden;background:#fff}
.course>b,.course>div:not(.thumb){padding:0 10px}
.course>b{display:block;margin-top:8px}
.course>div:last-child,.course>button{margin:0 10px 10px}
.thumb{background:linear-gradient(135deg,var(--navy),#2C6EA8);color:#fff;padding:16px 10px;
  text-align:center;font-size:13px}
.thumb .lvl{display:block;margin-top:4px;font-size:8.5px;letter-spacing:1.4px;opacity:.85}
.lesson{border:1px solid var(--rule);border-radius:10px;margin-top:9px;background:#fff}
.lesson.locked{background:var(--wash);opacity:.85}
.lhead{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid var(--rule);
  font-size:12px}
.lesson.locked .lhead{border-bottom:0}
.lnum{width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:grid;
  place-items:center;font-size:10.5px;font-weight:700;flex-shrink:0}
.lrow{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:10.5px;
  border-bottom:1px solid var(--rule)}
.lrow:last-child{border-bottom:0}
.lrow .ic{width:16px;text-align:center}
.lrow.ai{background:#ECFDF5}
/* score trend — four assessment points, drawn in CSS rather than as an image */
.trend{display:flex;align-items:flex-end;gap:14px;height:130px;padding-top:6px}
.tcol{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  height:100%;gap:5px}
.tbar{width:60%;background:linear-gradient(180deg,#2C6EA8,var(--navy));border-radius:5px 5px 0 0;
  min-height:6px}
.tcol span{font-size:8.5px;color:var(--muted);text-align:center}
/* rubric guide — one row per criterion, five level columns */
.bands{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.band{border-radius:8px;padding:7px 10px;border:1px solid var(--rule)}
.band b{display:block;font-size:10.5px}
.band span{font-size:9px;color:var(--muted)}
.band.b1{background:#FEF2F2;border-color:#FECACA}
.band.b2{background:#FFFBEB;border-color:#FDE68A}
.band.b3{background:#EFF6FF;border-color:#BFDBFE}
.band.b4{background:#ECFDF5;border-color:#A7F3D0}
.rubrow{display:grid;grid-template-columns:150px 1fr;gap:9px;align-items:stretch;
  border:1px solid var(--rule);border-radius:10px;padding:9px;margin-bottom:7px;background:#fff}
.rubname{display:flex;flex-direction:column;gap:2px;justify-content:center}
.lvgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.lvcell{border-radius:7px;padding:6px 7px;border:1px solid var(--rule);background:var(--wash)}
.lvcell p{font-size:9px;margin-top:2px;line-height:1.35}
.lvcell.b1{background:#FEF2F2;border-color:#FECACA}
.lvcell.b2{background:#FFF7ED;border-color:#FED7AA}
.lvcell.b3{background:#FFFBEB;border-color:#FDE68A}
.lvcell.b4{background:#EFF6FF;border-color:#BFDBFE}
.lvcell.b5{background:#ECFDF5;border-color:#A7F3D0}
/* final evaluation sheet — AI rows carry a mint wash so the source is obvious */
table.fin th,table.fin td{padding:5px 8px}
table.fin{font-size:10.5px}
table.fin tr.airow{background:#F0FDF9}
table.fin .scorerow{margin-top:0;gap:3px}
table.fin .scorebtn{padding:3px 0;font-size:9px}
textarea.input{width:100%;resize:vertical;font-family:inherit}
/* transcript segmentation on the criterion-detail screens */
.seg{border-left:3px solid var(--rule);padding:4px 8px;margin-bottom:5px;border-radius:0 6px 6px 0;
  font-size:10px}
.seg .tag2{display:block;font-size:8px;letter-spacing:1px;font-weight:700;color:var(--muted)}
.seg.op{border-color:#3B82F6;background:#EFF6FF}
.seg.pt{border-color:#6366F1;background:#EEF2FF}
.seg.rs{border-color:#10B981;background:#ECFDF5}
.seg.ex{border-color:#F59E0B;background:#FFFBEB}
.seg.en{border-color:#EC4899;background:#FDF2F8}
.key{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:9px;color:var(--muted)}
.key i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:3px}
.k-op{background:#3B82F6}.k-pt{background:#6366F1}.k-rs{background:#10B981}
.k-ex{background:#F59E0B}.k-en{background:#EC4899}.k-tw{background:#FDE68A}
/* the taller variant carries a rubric hint under the number */
.scorerow.tall .scorebtn{padding:5px 3px;line-height:1.25}
.scorerow.tall .scorebtn b{display:block;font-size:10px}
.scorerow.tall .scorebtn span{display:block;font-size:7.5px;color:var(--muted);margin-top:2px}
.scorerow.tall .scorebtn.on span{color:rgba(255,255,255,.85)}
.video{background:#0F172A;border-radius:9px;aspect-ratio:16/9;display:grid;
  place-items:center;color:#94A3B8;font-size:11px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin:10px 0;overflow-x:auto}
.tab{padding:6px 9px;font-size:10.5px;color:var(--muted);white-space:nowrap;cursor:pointer;
     background:none;border:0;font-family:inherit}
.tab:hover{color:var(--navy);background:var(--wash)}
.tab.on{color:var(--navy);font-weight:700;box-shadow:inset 0 -2px 0 var(--navy)}
.pane{display:none}
.pane.on{display:block}
.scorerow{display:flex;gap:4px;margin-top:6px}
.scorebtn{flex:1;padding:5px 0;font-size:10px;font-family:inherit;cursor:pointer;
          border:1px solid var(--rule);background:#fff;color:var(--ink);border-radius:6px}
.scorebtn:hover{border-color:var(--navy);color:var(--navy)}
.scorebtn.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.drop{border:2px dashed var(--rule);border-radius:10px;padding:22px;text-align:center;
  color:var(--muted);background:var(--wash);font-size:11px}
.input{width:100%;border:1px solid var(--rule);border-radius:7px;padding:7px 9px;
  font:inherit;font-size:11.5px;background:#fff;margin-bottom:8px}
.label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;
  display:block;margin-bottom:3px}
.hd{display:flex;align-items:center;justify-content:space-between;margin:12px 0 7px}
.hd h4{font-size:12px}
.note{background:var(--wash);border-left:3px solid var(--navy);border-radius:0 7px 7px 0;
  padding:8px 11px;font-size:10.5px;color:#41505F;margin-top:9px}
.note.ai{border-left-color:var(--ai);background:#ECFDF5}
.note.man{border-left-color:var(--man);background:#EEF2FF}
.tl{font:11px/1.8 Consolas,monospace;color:#41505F}
.tl b{color:var(--navy)}
.hi{background:#FEF3C7;border-radius:3px;padding:0 3px;font-weight:600;color:#92400E}
.caption{text-align:center;margin-top:10px;font-size:12px;color:var(--muted)}
.caption strong{color:var(--ink);display:block;font-size:13px;margin-bottom:2px}
/* app mode */
#am{position:fixed;inset:0;background:rgba(8,17,30,.96);display:none;
  flex-direction:column;z-index:200}
#am.open{display:flex}
/* ">" matters. ".bar" is also the progress-bar class used inside the screens,
   and an unscoped "#am .bar" outranks it on specificity — so in App Mode every
   progress bar turned into a 12px-padded white flex row instead of a 6px track. */
#am>.bar{display:flex;align-items:center;gap:14px;padding:12px 20px;color:#fff}
#am>.bar b{font-size:14px}#am>.bar span{color:#94A3B8;font-size:12.5px}
#am .sp{margin-left:auto;display:flex;gap:8px}
/* Scoped to the overlay's own control bar. Unscoped, "#am button" also hit every
   button inside the cloned screen — ID specificity beat .btn and .scorebtn, so in
   App Mode the screen's buttons turned white text on near-white and vanished. */
#am>.bar button{background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:7px;
  padding:7px 14px;font:inherit;font-size:12.5px;cursor:pointer}
#am>.bar button:hover:not(:disabled){background:rgba(255,255,255,.28)}
#am>.bar button:disabled{opacity:.35;cursor:not-allowed}
#am .vp{flex:1;margin:0 20px 20px;background:#fff;border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column}
#am .vp .page{height:100%;border-radius:0}
@media(max-width:1100px){.screens{grid-template-columns:1fr}
  .sidebar{display:none}.main{padding:20px}}
@media print{.topbar,.sidebar,#am{display:none}.screens{grid-template-columns:1fr}
  .cell{break-inside:avoid}}