/* Approved teacher dashboard layout, carried from lesson-transcriber/deploy/teacher-dashboard.html.
   Only speech is enabled; praise and identity-mapping controls are deliberately absent. */
:root {color-scheme:light; font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif}
body {margin:0;padding:24px;background:#f6f7f9;color:#20242e}
[hidden] {display:none!important}
button,input,select {font:inherit}
button {cursor:pointer}
button:disabled {cursor:wait;opacity:.6}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {outline:2px solid #5546ba;outline-offset:3px}
#lesson-live-clear,.lc-controls,.lc-status,.lc-health {max-width:1440px;margin-left:auto;margin-right:auto}
.lc-controls {display:flex;align-items:center;gap:8px;margin-bottom:14px}
.lc-controls select {min-width:0;max-width:600px;flex:1;padding:9px 12px;border:1px solid #ddd;border-radius:6px;background:white;color:#20242e}
.lc-controls button {padding:8px 12px;border:1px solid #ddd;background:white;border-radius:6px}
.lc-status {margin-top:12px;margin-bottom:0;color:#717783;font-size:13px;line-height:1.6}
.lc-notice {color:#99621c}
.lc-health {margin-top:10px;color:#717783;font-size:12px}
.lc-health summary {cursor:pointer}
.lc-health-values {display:flex;gap:12px 24px;flex-wrap:wrap;padding-top:8px}
.lc-health-values strong {font-weight:500;color:#20242e}
.lc-login {max-width:380px;margin:12vh auto;background:white;border:1px solid #e7e9ef;border-radius:10px;padding:28px}
.lc-login h1 {margin:0 0 10px;font-size:22px}
.lc-login p,.lc-login label {color:#717783;font-size:14px;line-height:1.6}
.lc-login input {box-sizing:border-box;width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;margin:8px 0 12px}
.lc-login button {padding:10px 16px;border:0;border-radius:6px;background:#5546ba;color:white}
.lc-login .lc-login-error {min-height:22px;color:#a44743}
.lc-initial {text-align:center;margin:15vh auto;color:#717783;font-size:14px}
#lesson-live-clear {
    --lc-paper: light-dark(#fff, #1b1e26);
    --lc-text: light-dark(#20242e, #f3f4f7);
    --lc-secondary: light-dark(#717783, #aab1be);
    --lc-rule: light-dark(#e7e9ef, #343943);
    --lc-well: light-dark(#f6f7f9, #232730);
    --lc-accent: light-dark(#5546ba, #b0a5ff);
    --lc-accent-well: light-dark(#efedfa, #312d46);
    --lc-live: light-dark(#16715b, #88d3b7);
    --lc-pending: light-dark(#99621c, #e5b270);
    --lc-main-share: 62%;
    --lc-row-height: 56px;
    font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    font-size: 16px;
    color: var(--lc-text);
    background: transparent;
    line-height: 1.5;
    width: 100%;
  }
  #lesson-live-clear * { box-sizing: border-box; }
  #lesson-live-clear [hidden] { display: none !important; }
  #lesson-live-clear button { font: inherit; color: inherit; }
  #lesson-live-clear h1, #lesson-live-clear h2, #lesson-live-clear p { margin: 0; }
  #lesson-live-clear .lc-num { font-variant-numeric: tabular-nums; }
  #lesson-live-clear .lc-muted { color: var(--lc-secondary); }
  #lesson-live-clear .lc-app { background: var(--lc-paper); border: 1px solid var(--lc-rule); border-radius: 10px; overflow: clip; }
  #lesson-live-clear .lc-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--lc-rule); }
  #lesson-live-clear h1 { font-size: 22px; font-weight: 650; line-height: 1.4; letter-spacing: -.7px; }
  #lesson-live-clear .lc-class-meta { font-size: 14px; color: var(--lc-secondary); margin-top: 4px; }
  #lesson-live-clear .lc-session { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
  #lesson-live-clear .lc-live { color: var(--lc-live); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
  #lesson-live-clear .lc-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; }
  #lesson-live-clear .lc-clock { font-size: 20px; }
  #lesson-live-clear .lc-layout { display: grid; grid-template-columns: minmax(0, var(--lc-main-share)) minmax(0, 1fr); }
  #lesson-live-clear .lc-main { min-width: 0; padding: 24px; }
  #lesson-live-clear .lc-metrics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; margin-bottom: 22px; }
  #lesson-live-clear .lc-metric-label { font-size: 16px; font-weight: 500; }
  #lesson-live-clear .lc-big { font-size: 62px; font-weight: 650; line-height: 1.15; letter-spacing: -2.5px; margin-top: 6px; }
  #lesson-live-clear .lc-big-unit { font-size: 27px; letter-spacing: 0; margin-left: 5px; font-weight: 500; }
  #lesson-live-clear .lc-metric-sub { margin-top: 7px; font-size: 14px; color: var(--lc-secondary); min-height: 21px; }
  #lesson-live-clear [data-pending] { color: var(--lc-pending); }
  #lesson-live-clear .lc-speech-chart { margin: 0 0 24px; padding: 16px 16px 10px; border: 1px solid var(--lc-rule); border-radius: 8px; }
  #lesson-live-clear .lc-chart-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
  #lesson-live-clear .lc-chart-heading h2 { font-size: 15px; }
  #lesson-live-clear .lc-chart-status { font-size: 12px; padding: 2px 7px; border-radius: 4px; background: var(--lc-well); color: var(--lc-secondary); }
  #lesson-live-clear .lc-chart-status[data-level="recommended"] { color: #16715b; background: #e9f5ef; }
  #lesson-live-clear .lc-chart-status[data-level="minimum"] { color: #8a611e; background: #fff5df; }
  #lesson-live-clear .lc-chart-status[data-level="below"] { color: #a44743; background: #fff0ed; }
  #lesson-live-clear .lc-chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--lc-secondary); }
  #lesson-live-clear .lc-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
  #lesson-live-clear .lc-chart-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--lc-accent); }
  #lesson-live-clear .lc-chart-legend .lc-key-minimum { border-top: 2px dashed #c69c54; }
  #lesson-live-clear .lc-chart-legend .lc-key-goal { border-top: 2px dashed #60a28e; }
  #lesson-live-clear [data-speech-chart] svg { display: block; width: 100%; height: auto; overflow: visible; margin: 4px 0; }
  #lesson-live-clear .lc-chart-axis { fill: var(--lc-secondary); font-size: 12px; }
  #lesson-live-clear .lc-chart-grid { stroke: var(--lc-rule); stroke-width: 1; }
  #lesson-live-clear .lc-chart-goal { stroke: #60a28e; stroke-width: 1; stroke-dasharray: 5 4; }
  #lesson-live-clear .lc-chart-minimum { stroke: #c69c54; stroke-width: 1; stroke-dasharray: 5 4; }
  #lesson-live-clear .lc-chart-recommended { fill: #f0f8f4; }
  #lesson-live-clear .lc-chart-below { fill: #fff5f2; }
  #lesson-live-clear .lc-chart-line { fill: none; stroke: var(--lc-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
  #lesson-live-clear .lc-chart-cursor { stroke: var(--lc-accent); stroke-width: 1; stroke-dasharray: 3 4; opacity: .3; }
  #lesson-live-clear .lc-chart-dot { fill: var(--lc-accent); stroke: white; stroke-width: 2; }
  #lesson-live-clear .lc-chart-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--lc-secondary); }
  #lesson-live-clear [data-speech-inspect] { color: var(--lc-accent); font-variant-numeric: tabular-nums; }
  #lesson-live-clear .lc-chart-empty { height: 130px; display: grid; place-content: center; font-size: 13px; color: var(--lc-secondary); text-align: center; }
  #lesson-live-clear .lc-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
  #lesson-live-clear h2 { font-size: 18px; font-weight: 600; letter-spacing: -.4px; line-height: 1.4; }
  #lesson-live-clear .lc-heading-meta { font-size: 13px; color: var(--lc-secondary); }
  #lesson-live-clear .lc-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  #lesson-live-clear .lc-table th { font-size: 13px; font-weight: 400; color: var(--lc-secondary); text-align: right; padding: 0 8px 12px 0; border-bottom: 1px solid var(--lc-rule); white-space: nowrap; }
  #lesson-live-clear .lc-table th:first-child { text-align: left; }
  #lesson-live-clear .lc-table th:last-child { padding-right: 0; }
  #lesson-live-clear .lc-table td { padding: 0 8px 0 0; height: var(--lc-row-height); text-align: right; vertical-align: middle; }
  #lesson-live-clear .lc-table td:first-child { text-align: left; }
  #lesson-live-clear .lc-table td:last-child { padding-right: 0; }
  #lesson-live-clear .lc-table tr.lc-teacher td { border-bottom: 1px solid var(--lc-rule); height: 54px; }
  #lesson-live-clear .lc-table tr.lc-selected { background: var(--lc-accent-well); }
  #lesson-live-clear .lc-person { background: transparent; border: 0; padding: 8px 0; font-size: 18px; font-weight: 550; text-align: left; white-space: nowrap; }
  #lesson-live-clear .lc-name-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
  #lesson-live-clear .lc-role { color: var(--lc-secondary); font-size: 12px; }
  #lesson-live-clear .lc-speaking { color: var(--lc-live); font-size: 13px; display: inline-flex; align-items: center; }
  #lesson-live-clear .lc-percent { font-size: 24px; font-weight: 600; letter-spacing: -.6px; white-space: nowrap; }
  #lesson-live-clear .lc-percent-unit { font-size: 15px; margin-left: 2px; font-weight: 400; }
  #lesson-live-clear .lc-duration { font-size: 15px; color: var(--lc-secondary); white-space: nowrap; }
  #lesson-live-clear .lc-zero { color: var(--lc-secondary); }
  #lesson-live-clear .lc-teacher .lc-person { font-size: 16px; font-weight: 400; }
  #lesson-live-clear .lc-teacher .lc-percent { font-size: 20px; font-weight: 400; color: var(--lc-secondary); }
  #lesson-live-clear .lc-table-note { font-size: 12px; color: var(--lc-secondary); margin-top: 14px; }
  #lesson-live-clear [hidden] { display: none !important; }
  #lesson-live-clear .lc-side { min-width: 0; min-height: 0; contain: size; background: var(--lc-well); border-left: 1px solid var(--lc-rule); padding: 24px 22px 20px; display: flex; flex-direction: column; }
  #lesson-live-clear .lc-side-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
  #lesson-live-clear .lc-side-sub { font-size: 13px; color: var(--lc-secondary); margin-bottom: 18px; }
  #lesson-live-clear .lc-clear { border: 0; padding: 3px 0; color: var(--lc-accent); background: transparent; font-size: 13px; white-space: nowrap; }
  #lesson-live-clear .lc-feed { flex: 1 1 0px; min-height: 0; height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--lc-rule) transparent; padding-right: 5px; }
  #lesson-live-clear .lc-utterance { margin-bottom: 25px; padding: 0; }
  #lesson-live-clear .lc-utterance-head { display: flex; justify-content: flex-start; gap: 10px; align-items: baseline; font-size: 13px; margin-bottom: 6px; }
  #lesson-live-clear .lc-utterance-name { font-weight: 600; }
  #lesson-live-clear .lc-utterance time { color: var(--lc-secondary); font-size: 12px; }
  #lesson-live-clear .lc-utterance p { font-size: 16px; line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; }
  #lesson-live-clear .lc-utterance.lc-focused { border-left: 3px solid var(--lc-accent); padding-left: 11px; }
  #lesson-live-clear .lc-interim { color: var(--lc-secondary); }
  #lesson-live-clear .lc-typing { font-size: 13px; color: var(--lc-secondary); margin-top: 5px; padding: 6px 0; }
  #lesson-live-clear .lc-feed-foot { margin-top: auto; padding-top: 15px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--lc-secondary); }
  #lesson-live-clear .lc-follow { display: inline-flex; align-items: center; gap: 6px; }
  #lesson-live-clear .lc-follow input { accent-color: var(--lc-accent); margin: 0; width: 14px; height: 14px; }
  #lesson-live-clear .lc-latest { border: 0; background: var(--lc-accent-well); color: var(--lc-accent); font-size: 13px; padding: 6px 10px; border-radius: 5px; }
  #lesson-live-clear .lc-empty { padding: 18px 0; color: var(--lc-secondary); font-size: 15px; }
  #lesson-live-clear .lc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (max-width: 900px) {
    #lesson-live-clear .lc-main { padding: 23px 20px; }
    #lesson-live-clear .lc-side { padding: 23px 18px 18px; }
    #lesson-live-clear .lc-person { font-size: 17px; }
    #lesson-live-clear .lc-percent { font-size: 22px; }
    #lesson-live-clear .lc-duration { font-size: 13px; }
    #lesson-live-clear .lc-big { font-size: 58px; }
  }
  @media (max-width: 720px) {
    #lesson-live-clear .lc-layout { grid-template-columns: minmax(0, 1fr); }
    #lesson-live-clear .lc-side { contain: none; border-left: 0; border-top: 1px solid var(--lc-rule); }
    #lesson-live-clear .lc-feed { flex: none; height: 420px; }
    #lesson-live-clear .lc-header { padding: 20px; flex-wrap: wrap; gap: 10px; }
    #lesson-live-clear .lc-session { gap: 12px; }
    #lesson-live-clear .lc-main { padding: 23px 18px; }
    #lesson-live-clear h1 { font-size: 20px; }
    #lesson-live-clear .lc-duration { font-size: 14px; }
  }
  @media (max-width: 400px) {
    #lesson-live-clear .lc-main { padding: 22px 14px; }
    #lesson-live-clear .lc-metrics { gap: 14px; }
    #lesson-live-clear .lc-metric-label { font-size: 15px; }
    #lesson-live-clear .lc-big { font-size: 54px; }
    #lesson-live-clear .lc-big-unit { font-size: 24px; }
    #lesson-live-clear .lc-table th { font-size: 12px; padding-right: 3px; }
    #lesson-live-clear .lc-table td { padding-right: 3px; }
    #lesson-live-clear .lc-person { font-size: 16px; }
    #lesson-live-clear .lc-percent { font-size: 21px; }
    #lesson-live-clear .lc-percent-unit { font-size: 13px; }
    #lesson-live-clear .lc-duration { font-size: 12px; }
    #lesson-live-clear .lc-teacher .lc-person { font-size: 15px; }
    #lesson-live-clear .lc-role { display: block; }
    #lesson-live-clear .lc-name-wrap { gap: 0 5px; }
  }
  @media (pointer: coarse) {
    #lesson-live-clear button, #lesson-live-clear .lc-follow { min-height: 44px; }
  }
#lesson-live-clear .lc-person {white-space:normal;overflow-wrap:anywhere;font-size:16px}
#lesson-live-clear .lc-metrics {grid-template-columns:minmax(0,1fr)}
#lesson-live-clear .lc-typing {display:flex;align-items:center;gap:8px}
#lesson-live-clear .lc-typing-dots {display:inline-flex;align-items:center;gap:3px;height:14px}
#lesson-live-clear .lc-typing-dots i {display:block;width:4px;height:4px;border-radius:50%;background:currentColor;animation:lc-dot-hop 1.1s ease-in-out infinite}
#lesson-live-clear .lc-typing-dots i:nth-child(2) {animation-delay:.15s}
#lesson-live-clear .lc-typing-dots i:nth-child(3) {animation-delay:.3s}
@keyframes lc-dot-hop {0%,70%,100% {transform:translateY(0);opacity:.4}35% {transform:translateY(-3px);opacity:1}}
@media(max-width:500px) {body {padding:8px}.lc-controls select {font-size:13px}.lc-status {font-size:12px}}
@media(prefers-reduced-motion:reduce) {#lesson-live-clear .lc-typing-dots i {animation:none}}