/* style.css is the file that controls how the Lesson 01 page looks. */
/* HTML creates the page parts. CSS chooses sizes, colors, spacing, and layout. */
/* Dan Mailman */
/* 08jun26 */

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

  /* --cBackground is the dark color behind everything. */
  --cBackground: #111514;

  /* --cPanel is the dark green-gray color for the control panel. */
  --cPanel: #1b2321;

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

  /* --cMuted is quieter text, for status messages. */
  --cMuted: #a8b8b0;

  /* --cAccent is the green highlight color. */
  --cAccent: #8fd6b4;

  /* --cAccentStrong is the yellow highlight color. */
  --cAccentStrong: #f2c14e;

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

* {
  /* * means every element on the page. */

  /* border-box makes width and height include padding and borders. */
  /* That makes layout math much easier. */
  box-sizing: border-box;
}

body {
  /* body is the visible browser page. */

  /* Remove the browser's default white edge around the page. */
  margin: 0;

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

  /* Use the reusable background color from :root. */
  background: var(--cBackground);

  /* Use the reusable main text color from :root. */
  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 browser-readable guide page. */

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

  /* Limit the guide width so long lines are easy to read. */
  max-width: 920px;

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

.lesson-header {
  /* This styles the top area of the lesson guide. */

  /* Add space below the title area. */
  margin-bottom: 28px;

  /* Add a subtle line before the steps begin. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  /* Add space between the header text and the bottom line. */
  padding-bottom: 20px;
}

.lesson-summary {
  /* This styles the short paragraph under the guide title. */

  /* Keep the summary from becoming too wide. */
  max-width: 680px;

  /* Use comfortable line spacing. */
  line-height: 1.55;

  /* Use the quieter text color. */
  color: var(--cMuted);
}

.lesson-links {
  /* This styles the row of guide links. */

  /* Use flex so links can wrap nicely on small screens. */
  display: flex;

  /* Leave space between links. */
  gap: 16px;

  /* Allow links to move to the next line when needed. */
  flex-wrap: wrap;
}

.lesson-content {
  /* This styles the main lesson guide text. */

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

.lesson-content h2 {
  /* This styles section headings inside the guide. */

  /* Put generous space above each new step. */
  margin: 30px 0 10px;

  /* Make step headings smaller than the main page title. */
  font-size: 1.35rem;
}

.lesson-content p {
  /* This styles guide paragraphs. */

  /* Keep paragraph spacing steady and readable. */
  margin: 10px 0;
}

.lesson-content li {
  /* This styles list items in the guide. */

  /* Add a little space between instructions. */
  margin-bottom: 6px;
}

.lesson-content code {
  /* This styles small code words inside sentences. */

  /* Use a faint background so code words stand out. */
  background: rgba(255, 255, 255, 0.08);

  /* Add a little room around inline code. */
  padding: 1px 4px;

  /* Use a code-style font. */
  font-family: Consolas, "Courier New", monospace;
}

.lesson-content pre {
  /* This styles multi-line code and text examples. */

  /* Let wide code blocks scroll instead of breaking the page. */
  overflow: auto;

  /* Add room inside code blocks. */
  padding: 14px;

  /* Use a faint light overlay for code examples. */
  background: rgba(255, 255, 255, 0.06);

  /* Add a thin green marker line on the left. */
  border-left: 3px solid var(--cAccent);
}

.lesson-content pre code {
  /* This removes inline-code styling inside code blocks. */

  /* Code blocks already have a background, so inline code should not. */
  background: transparent;

  /* Code blocks already have padding, so inline code should not. */
  padding: 0;
}

.app-shell {
  /* A dot means class. This styles class="app-shell" in index.html. */

  /* grid lets us split the page into columns. */
  display: grid;

  /* The first column gets leftover space; the second column is 300px wide. */
  grid-template-columns: minmax(0, 1fr) 300px;

  /* Make the app shell fill the browser height. */
  min-height: 100vh;
}

.stage-panel {
  /* This is the big left side that holds the canvas. */

  /* A one-cell grid gives us easy centering. */
  display: grid;

  /* Center the canvas horizontally and vertically. */
  place-items: center;

  /* Put breathing room around the canvas. */
  padding: 24px;
}

#DisplayCanvas {
  /* # means id. This styles id="DisplayCanvas" in index.html. */

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

  /* Keep the displayed canvas shaped like 16:9 video. */
  aspect-ratio: 16 / 9;

  /* Give the drawing area a very dark background. */
  background: #050706;

  /* Draw a thin green border around the canvas. */
  border: 1px solid rgba(143, 214, 180, 0.35);
}

#CameraVideo {
  /* The video element is only a hidden camera source for JavaScript. */

  /* Hide it so students focus on the canvas. */
  display: none;
}

.control-panel {
  /* This is the right side panel with the button, status, link, and readout. */

  /* flex stacks the panel items from top to bottom. */
  display: flex;

  /* Put the flex items in a vertical column. */
  flex-direction: column;

  /* Leave space between each panel item. */
  gap: 18px;

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

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

  /* Draw a faint line between the canvas side and the panel. */
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.eyebrow {
  /* This is the small label above the main title. */

  /* Remove top margin, keep a small gap below. */
  margin: 0 0 6px;

  /* Make the label use the green accent color. */
  color: var(--cAccent);

  /* Make this label smaller than normal text. */
  font-size: 0.76rem;

  /* Make the label bold. */
  font-weight: 700;

  /* Keep normal letter spacing, which is easier to read. */
  letter-spacing: 0;

  /* Show the label in capital letters. */
  text-transform: uppercase;
}

h1 {
  /* h1 is the main page heading. */

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

  /* Make the title large. */
  font-size: 2rem;

  /* Keep the title lines close together if it wraps. */
  line-height: 1.05;
}

button {
  /* This styles the Start button. */

  /* Make the button tall enough to click easily. */
  min-height: 44px;

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

  /* Use the green accent for the button background. */
  background: var(--cAccent);

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

  /* Show the hand pointer when the mouse is over the button. */
  cursor: pointer;

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

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

button:hover {
  /* :hover means the mouse is currently over the button. */

  /* Make the button a little brighter on hover. */
  background: #a7e4c7;
}

a {
  /* This styles links, including the starter-file download link. */

  /* Use yellow so links stand out from normal text. */
  color: var(--cAccentStrong);
}

.status {
  /* This styles the Ready, Running, and setup-failed text. */

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

  /* Use the quieter muted color for normal status text. */
  color: var(--cMuted);

  /* Give wrapped status text comfortable line spacing. */
  line-height: 1.4;
}

.status.is-warning {
  /* This rule only applies when JavaScript adds the is-warning class. */

  /* Use the warning color when setup fails. */
  color: var(--cDanger);
}

.readout {
  /* This styles the hand-data readout box. */

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

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

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

  /* Add scrollbars if the text becomes too tall. */
  overflow: auto;

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

  /* Use the main text color for readout words and numbers. */
  color: var(--cText);

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

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

@media (max-width: 800px) {
  /* @media starts rules that only happen under certain screen conditions. */
  /* These rules run when the screen is 800px wide or narrower. */

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

  .control-panel {
    /* Remove the left border when the panel moves under the canvas. */
    border-left: 0;

    /* Add a top border to separate canvas and controls. */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}