/* Software teacher: one landing option, a sign-in, and a screen beside Sree. */
.software-entry { margin-top:34px; }
.software-legend { font-size:12px;font-weight:600;margin-bottom:12px; }
.software-card { display:block;width:100%;max-width:330px;min-height:156px;padding:17px 18px 16px;text-align:left;border:1px solid #6c8958;border-radius:var(--radius);background:var(--selected);color:var(--ink);cursor:pointer;transition:background 160ms,border-color 160ms; }
.software-card:hover:not(:disabled) { background:#e1ead2;border-color:var(--forest); }
.software-card:focus-visible { outline:3px solid #50806a;outline-offset:4px; }
.software-card:disabled { cursor:progress;opacity:.7; }
.software-card .mode-top { display:flex;justify-content:space-between;align-items:center; }
.software-arrow { width:21px;height:21px;stroke:var(--forest);stroke-width:1.5; }
.software-card .mode-name,.software-card .mode-description { display:block; }
.software-signin { display:grid;gap:12px;max-width:330px;margin-top:20px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:#fffef9; }
.software-signin-title { font-size:13px;font-weight:600; }
.software-signin label { font-size:11px;color:var(--muted); }
.software-signin input { display:block;width:100%;min-width:0;margin-top:6px;padding:11px 12px;background:white;border:1px solid #adb9a8;border-radius:6px;color:var(--ink);font:inherit;font-size:16px; }
.software-signin input:focus-visible { outline:3px solid #50806a;outline-offset:2px; }
.software-signin .next-button { width:100%;cursor:pointer; }
.software-signin .next-button:disabled { opacity:.6;cursor:progress; }
.software-status { min-height:20px;margin-top:12px;font-size:12px;color:var(--muted);max-width:330px;line-height:1.6; }

.software-classroom .page-shell { width:min(100% - 64px,1560px); }
.software-mode .journey,.software-mode .teach-topbar a[href="/admin"],.software-mode #classroom-source,.software-mode #plan-source-link,.software-mode .source-note,.software-mode .section-narration,.software-mode .section-sources { display:none; }
.software-mode .lesson-stage { grid-template-columns:340px minmax(0,1fr);gap:22px; }
/* The drawn hand is only for the stacked phone layout below. */
.software-mode .screen-pointer { display:none; }
.software-screen { margin:0 0 20px;border:1px solid #b9c4b2;border-radius:10px;overflow:hidden;background:#fff; }
.software-screen-bar { display:flex;align-items:baseline;gap:14px;padding:10px 14px;background:var(--forest);color:#fff;font-size:12px;line-height:1.5; }
.software-screen-bar span { flex-shrink:0;color:var(--lime);font-size:10px;letter-spacing:.1em;text-transform:uppercase; }
.software-screen-bar strong { font-weight:600;overflow-wrap:anywhere; }
.software-screen { transition:box-shadow 200ms,border-color 200ms; }
.software-screen-stage { position:relative; }
.software-screen img { display:block;width:100%;height:auto;aspect-ratio:1272/618;background:#eef0ea; }
/* Sree points with a real hand in the video; the screen lights up beside it. */
.software-screen.pointing { border-color:var(--forest);box-shadow:0 0 0 3px var(--lime); }
.software-screen { overflow:visible; }
.software-screen-bar { border-radius:9px 9px 0 0; }
.software-screen img { border-radius:0 0 9px 9px; }
.screen-pointer { position:absolute;top:50%;left:-40px;z-index:3;display:flex;align-items:center;gap:8px;transform:translateY(-50%);pointer-events:none; }
.screen-pointer-hand { font-size:38px;line-height:1;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .35));animation:dhi-point 900ms ease-in-out infinite alternate; }
/* The words stay in the title bar so the hand never covers the screen itself. */
.software-screen-bar .screen-pointer-text { margin-left:auto;padding:3px 10px;border-radius:999px;background:var(--lime);color:var(--forest);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:none;white-space:nowrap; }
.software-screen-bar .screen-pointer-text:empty { display:none; }
@keyframes dhi-point { from { transform:translateX(-7px); } to { transform:translateX(5px); } }
@media(prefers-reduced-motion:reduce) { .screen-pointer-hand { animation:none; }.software-screen { transition:none; } }
.software-mode .lesson-context { display:flex;flex-direction:column; }
.software-mode .software-screen { order:1; }
.software-mode #lesson-questions { order:2; }
.software-mode .lesson-explanation { order:3; }
.software-mode .lesson-explanation { padding-top:0; }
.software-mode .lesson-explanation h2 { font-size:22px;margin:10px 0 14px; }
.software-mode .key-ideas { margin-top:0; }
.software-mode .key-ideas h3::after { content:" · on this screen"; }

/* Voice-first questions: the microphone is the control; typing is a fallback. */
.voice-only { display:none; }
.voice-first .voice-only { display:inline-block; }
.voice-first .field-label,.voice-first textarea,.voice-first .qa-options label,.voice-first .qa-submit .primary-action { display:none; }
.voice-first .qa-options { justify-content:flex-start;align-items:center;gap:18px;flex-wrap:wrap; }
.voice-first .qa-options .secondary-action[aria-pressed="true"] { background:var(--forest);color:#fff; }

@media(max-width:1100px) { .software-mode .lesson-stage { grid-template-columns:270px minmax(0,1fr); } }
@media(max-width:850px) {
  .software-classroom .page-shell { width:calc(100% - 48px); }
  .software-mode .lesson-stage { grid-template-columns:210px minmax(0,1fr);gap:16px; }
  .software-mode .subtitle-panel { min-height:96px;padding:12px; }
}
@media(max-width:620px) {
  .software-classroom .page-shell { width:calc(100% - 40px); }
  .software-card,.software-signin,.software-status { max-width:none; }
  /* On a phone the screen must stay visible, so Sree scrolls with the page here. */
  .software-mode .avatar-panel { position:static; }
  .software-mode .lesson-question-bar { margin:14px 0 4px; }
  .software-screen { position:relative;margin-top:36px; }
  .software-screen-stage { position:static; }
  .software-screen-bar { flex-direction:column;gap:2px;padding:9px 12px; }
  /* Stacked layout: Sree is above the screen, so a drawn hand points down at it
     from the space above the screen, and scrolls away beneath Sree with the screen. */
  .software-mode .screen-pointer { display:flex; }
  .software-mode .screen-pointer[hidden] { display:none; }
  .screen-pointer { top:-38px;left:50%;z-index:1;transform:translateX(-50%); }
  .screen-pointer-hand { font-size:32px;rotate:90deg; }
  .software-screen-bar .screen-pointer-text { margin-left:0;align-self:flex-start; }
}

/* One step to ask: a single box to type in, with a microphone beside it. */
.software-mode #ask-during-lesson { display:none; }
.software-mode .lesson-question-bar { flex-direction:column;align-items:stretch;gap:8px;margin:14px 0 12px; }
.software-mode .lesson-question-bar span { min-width:0;font-size:12px; }
.ask-bar { display:flex;align-items:center;gap:6px;padding:5px;border:1px solid var(--forest);border-radius:10px;background:#fffef9; }
.ask-bar:focus-within { outline:3px solid #50806a;outline-offset:2px; }
.ask-bar input { flex:1;min-width:0;padding:9px 8px;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:16px; }
.ask-bar input::placeholder { color:var(--muted);opacity:1; }
.ask-bar .ask-icon { flex:none;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--forest);cursor:pointer;transition:background 160ms,color 160ms; }
.ask-icon svg { width:22px;height:22px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.ask-icon:hover:not(:disabled) { background:var(--selected); }
.ask-icon:focus-visible { outline:3px solid #50806a;outline-offset:2px; }
.ask-bar .ask-send { background:var(--forest);color:#fff; }
.ask-bar .ask-send:hover:not(:disabled) { background:#0f2f2a; }
.ask-bar .ask-icon[aria-pressed="true"] { background:#9c2b1f;color:#fff;animation:ask-listening 1.1s ease-in-out infinite alternate; }
.ask-bar .ask-icon:disabled,.ask-bar input:disabled { opacity:.45;cursor:not-allowed; }
@keyframes ask-listening { from { box-shadow:0 0 0 0 rgb(156 43 31 / .45); } to { box-shadow:0 0 0 7px rgb(156 43 31 / 0); } }
/* The panel then only reports progress and shows the answer. */
.one-step form > .field-label,.one-step form textarea,.one-step .qa-options,.one-step form > .form-note,.one-step .qa-submit .primary-action { display:none; }
.one-step .qa-submit { min-height:0; }
/* Sree waiting: a silent loop over the paused frame, under the answer. */
.lesson-video-frame .lesson-thinking-video { position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 240ms ease,visibility 0s 240ms; }
.lesson-video-frame .lesson-thinking-video.showing { opacity:1;visibility:visible;transition:opacity 240ms ease; }
@media(prefers-reduced-motion:reduce) { .ask-bar .ask-icon[aria-pressed="true"] { animation:none; }.lesson-video-frame .lesson-thinking-video { transition:none; } }
/* The ask box sits directly under Sree, so it is on screen without scrolling. */
.software-mode .avatar-panel { display:flex;flex-direction:column; }
.software-mode .lesson-video-frame { border-radius:10px; }
.software-mode .lesson-question-bar { order:1;margin:10px 0 10px; }
.software-mode .subtitle-panel { order:2;border-radius:10px; }
.software-mode .playback-note { order:3; }