/* style.css controls how the Lesson 03 page looks. */
/* HTML creates page parts. CSS chooses sizes, colors, spacing, and layout. */
/* Dan Mailman */
/* 11jun26 */

:root {
  /* :root means the whole page. */
  /* These custom properties are reusable color names. */

  /* --cBackground is the page background. */
  --cBackground: #101314;

  /* --cPanel is the control panel background. */
  --cPanel: #1b2224;

  /* --cText is the main light text color. */
  --cText: #eff7f2;

  /* --cMuted is quieter text. */
  --cMuted: #a8b8b0;

  /* --cAccent is the cyan highlight color. */
  --cAccent: #7bd8c8;

  /* --cAccentStrong is the gold action color. */
  --cAccentStrong: #f2c14e;

  /* --cDanger is the warning color. */
  --cDanger: #ee7b6f;
}

* {
  /* border-box makes layout math easier. */
  box-sizing: border-box;
}

body {
  /* Remove the browser's default white edge. */
  margin: 0;

  /* Make the page at least as tall as the browser window. */
  min-height: 100vh;

  /* Use the dark background color. */
  background: var(--cBackground);

  /* Use the main text color. */
  color: var(--cText);

  /* Choose a simple font that exists on most computers. */
  font-family: Arial, Helvetica, sans-serif;
}

.lesson-shell {
  /* This styles lesson-steps.html, the readable guide page. */

  /* Keep the guide from touching the browser edges. */
  padding: 32px 18px 48px;

  /* Limit line length so instructions are easy to read. */
  max-width: 920px;

  /* Center the guide. */
  margin: 0 auto;
}

.lesson-header {
  /* Add a dividing line below the guide title. */
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 20px;
}

.lesson-summary {
  /* Keep the guide summary readable. */
  max-width: 680px;
  line-height: 1.55;
  color: var(--cMuted);
}

.lesson-links {
  /* Put guide links in a wrapping row. */
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.lesson-content {
  /* Use comfortable reading line spacing. */
  line-height: 1.65;
}

.lesson-content h2 {
  /* Space out each step heading. */
  margin: 30px 0 10px;
  font-size: 1.35rem;
}

.lesson-content p {
  /* Keep paragraph spacing steady. */
  margin: 10px 0;
}

.lesson-content li {
  /* Add a little space between instruction list items. */
  margin-bottom: 6px;
}

.lesson-content code {
  /* Inline code gets a faint background. */
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 4px;
  font-family: Consolas, "Courier New", monospace;
}

.lesson-content pre {
  /* Code examples can scroll if they are wide. */
  overflow: auto;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--cAccent);
}

.lesson-content pre code {
  /* Code blocks already have a background and padding. */
  background: transparent;
  padding: 0;
}

.app-shell {
  /* grid lets us split the app into two columns. */
  display: grid;

  /* The keyboard gets leftover space; the panel is 330px wide. */
  grid-template-columns: minmax(0, 1fr) 330px;

  /* Fill the browser height. */
  min-height: 100vh;
}

.stage-panel {
  /* Center the canvas in the large left area. */
  display: grid;
  place-items: center;
  padding: 24px;
}

#CameraVideo {
  /* The video is only an input for MediaPipe. */
  display: none;
}

#KeyboardCanvas {
  /* Keep the canvas inside the visible page. */
  width: min(100%, calc((100vh - 48px) * 16 / 9));

  /* Keep the displayed canvas in a 16:9 shape. */
  aspect-ratio: 16 / 9;

  /* Give the drawing area a dark keyboard-stage color. */
  background: #091011;

  /* Add a thin cyan border. */
  border: 1px solid rgba(123, 216, 200, 0.35);
}

.control-panel {
  /* Stack the panel items from top to bottom. */
  display: flex;
  flex-direction: column;
  gap: 16px;

  /* Put space inside the panel edges. */
  padding: 24px;

  /* Give the panel its own background. */
  background: var(--cPanel);

  /* Separate the panel from the keyboard side. */
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.eyebrow {
  /* Small label above the main title. */
  margin: 0 0 6px;
  color: var(--cAccent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  /* Main page heading. */
  margin: 0;
  font-size: 2rem;
  line-height: 1.05;
}

button {
  /* Make buttons comfortable to click. */
  min-height: 44px;

  /* Remove the browser's default border. */
  border: 0;

  /* Use the gold action color. */
  background: var(--cAccentStrong);

  /* Use dark text on the light button. */
  color: #102018;

  /* Show the hand pointer on hover. */
  cursor: pointer;

  /* Use the same font as the rest of the page. */
  font: inherit;

  /* Make button text bold. */
  font-weight: 700;
}

button:hover {
  /* Brighten the button a little when hovered. */
  background: #ffd977;
}

button:disabled {
  /* Disabled buttons should look inactive. */
  cursor: default;
  opacity: 0.62;
}

a {
  /* Use cyan for links. */
  color: var(--cAccent);
}

.status {
  /* Style the Ready and warning messages. */
  margin: 0;
  color: var(--cMuted);
  line-height: 1.4;
}

.status.is-warning {
  /* Warning status text uses the danger color. */
  color: var(--cDanger);
}

.voice-panel {
  /* Group the hand-point checkboxes. */
  padding: 14px;
  background: rgba(255, 255, 255, 0.055);
}

.panel-heading {
  /* Put the label and count on one line. */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.readout-label {
  /* Small panel label. */
  margin: 0;
  color: var(--cAccent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.panel-summary {
  /* Small count label. */
  margin: 0;
  color: var(--cMuted);
  font-size: 0.85rem;
  font-weight: 700;
}

.voice-hand-columns {
  /* Put left and right choices side by side when they fit. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.voice-hand-group {
  /* Remove most browser fieldset decoration. */
  min-width: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px;
}

.voice-hand-group legend {
  /* Make Left and Right labels readable. */
  padding: 0 4px;
  color: var(--cText);
  font-weight: 700;
}

.voice-check-row {
  /* Keep checkbox labels aligned. */
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 7px 0;
  color: var(--cMuted);
  font-size: 0.9rem;
}

.voice-check-row input {
  /* Keep checkboxes from shrinking. */
  flex: 0 0 auto;
}

.readout {
  /* Let the readout fill leftover panel space. */
  flex: 1;

  /* Remove browser default margin. */
  margin: 0;

  /* Put space inside the readout box. */
  padding: 14px;

  /* Add scrollbars if needed. */
  overflow: auto;

  /* Give the readout a faint light background. */
  background: rgba(255, 255, 255, 0.06);

  /* Use the main text color. */
  color: var(--cText);

  /* Use a code-style font so labels line up. */
  font: 0.86rem/1.45 Consolas, "Courier New", monospace;

  /* Keep spaces and line breaks as JavaScript writes them. */
  white-space: pre-wrap;
}

@media (max-width: 860px) {
  /* These rules run when the screen is 860px wide or narrower. */

  .app-shell {
    /* On narrow screens, use one column. */
    grid-template-columns: 1fr;
  }

  .control-panel {
    /* Separate the panel from the canvas when it moves below. */
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 420px) {
  .voice-hand-columns {
    /* Very narrow screens stack the left and right checkbox groups. */
    grid-template-columns: 1fr;
  }
}