/*
  style.css - all the styles of the site.
  Used by: index.html and cum-functioneaza.html.
  To change a color, font or size, edit the variables in the ":root" block below.
  Design: dark "terminal" look (black background, purple accent, monospace font).
*/

/* ===== Font: JetBrains Mono (stored in fonts/, works offline) ===== */
@font-face {
  font-family: 'JetBrains Mono'; /* name used in --font-main */
  src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2'); /* basic Latin letters */
  font-weight: 100 800; /* variable font: one file for all weights */
  font-display: swap; /* show text right away, swap to this font when it loads */
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212; /* characters in this file */
}

@font-face { /* second file of the same font: letters with diacritics */
  font-family: 'JetBrains Mono'; /* same font name, second file */
  src: url('../fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2'); /* extra letters: ă ș ț */
  font-weight: 100 800; /* variable font: one file for all weights */
  font-display: swap; /* show text right away, swap to this font when it loads */
  unicode-range: U+0100-02BA, U+1E00-1E9F; /* characters in this file (includes Romanian letters) */
}

/* ===== Variables: colors, fonts and sizes ===== */
:root {
  --color-background: #000000; /* page background color */
  --color-surface: rgba(17, 17, 17, 0.7); /* background color of cards / boxes */
  --color-header-background: #111111; /* background color of the top menu bar */
  --color-text: #ededed; /* main text color */
  --color-text-muted: #9a9a9a; /* color of secondary text (footer, notes) */
  --color-accent: #a259ff; /* purple accent: ">" signs, links, borders, highlights; every other purple on the site is made from this color */
  --color-accent-glow: color-mix(in srgb, var(--color-accent) 60%, transparent); /* glow around highlighted elements (the accent color, 60% visible) */
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 15%, transparent); /* light accent background (badge, messages, notes), 15% visible */
  --color-border: color-mix(in srgb, var(--color-accent) 15%, transparent); /* color of card borders (the accent color, 15% visible) */
  --color-heading: #ededed; /* color of section headings (h2, h3) */
  --color-title-gradient: linear-gradient(45deg, #ffffff, var(--color-accent), #ffffff); /* colors of the big page title: white, accent, white */
  --color-success: #4ade80; /* color of success messages */
  --color-error: #f87171; /* color of error messages */
  --color-button-primary: var(--color-accent); /* background and glow color of the "Rulează" (run) and "Verifică" (check) buttons (same as the accent) */
  --color-button-primary-text: #000000; /* text color of the "Rulează" (run) button */
  --color-button-secondary: #111111; /* background color of the "Resetează baza de date" (reset) button */
  --color-editor-background: #0a0a0a; /* background color of the SQL editor */
  --color-table-header: #1a1a1a; /* background color of the result table header (column names) */
  --color-table-row-alt: rgba(255, 255, 255, 0.03); /* background color of every second row in result tables */
  --color-table-line: rgba(255, 255, 255, 0.06); /* color of the lines between rows in result tables */

  --font-main: 'JetBrains Mono', ui-monospace, Consolas, monospace; /* font of all text */
  --font-size-base: 1rem; /* normal text size */
  --font-size-title: clamp(1.75rem, 6vw, 3rem); /* size of the big page title (smaller on phones) */
  --font-size-heading: 1.5rem; /* size of section headings */
  --font-size-code: 0.9rem; /* text size in the SQL editor and in result tables */
  --font-size-small: 0.8rem; /* size of small text (hints, row counts, column types) */

  --space: 1rem; /* basic spacing between elements */
  --radius: 10px; /* roundness of card corners */
  --radius-menu: 16px; /* roundness of the top menu bar */
  --max-width: 60rem; /* maximum width of the page content */
  --editor-height: 10rem; /* starting height of the SQL editor */
  --results-max-height: 24rem; /* maximum height of a result table (taller tables scroll) */
  --schema-panel-width: 16.5rem; /* width of the "Structura bazei de date" panel (left column on computers) */
  --editor-column-width: 28rem; /* width of the SQL editor column (right column on computers) */
  --editor-results-offset: 34rem; /* height taken by the menu bar and the editor above the results (results use the rest of the screen) */
  --font-size-title-home: 1.9rem; /* size of the title of the home page on computers (slim strip) */
  --font-size-schema: 0.75rem; /* text size of the columns in the "Structura bazei de date" panel */
  --max-width-home: 110rem; /* maximum width of the home page (3 columns: structure, lessons, editor) */
  --sticky-top: 5.5rem; /* distance from the top of the screen of the fixed columns (room for the menu bar) */

  /* Lessons and exercises */
  --color-chip-background: #111111; /* background color of the numbered lesson buttons */
  --color-code-background: color-mix(in srgb, var(--color-accent) 12%, transparent); /* background of code words in the text (the accent color, 12% visible) */
  --color-code-text: color-mix(in srgb, var(--color-accent) 55%, #ffffff); /* color of code words in the text (the accent color mixed with white) */
  --radius-pill: 999px; /* fully rounded (pill) shape: lesson buttons, status badge, pill links and labels */
  --exercise-editor-height: 5rem; /* starting height of the answer box of an exercise */
  --scroll-offset: 7.5rem; /* space kept above a section when the page scrolls to it (room for the menu bar) */
}

/* ===== Whole page ===== */
* {
  box-sizing: border-box; /* width includes padding and border (easier sizing) */
  font-variant-ligatures: none; /* show <= >= <> != || === as separate signs, never joined into one symbol */
}

body { /* the whole page */
  margin: 0; /* remove the browser's default margin */
  min-height: 100vh; /* fill at least the whole screen height */
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 60%), /* accent-colored glow at the top of the page */
    var(--color-background); /* page background color */
  color: var(--color-text); /* main text color */
  font-family: var(--font-main); /* main font */
  font-size: var(--font-size-base); /* normal text size */
  line-height: 1.7; /* space between lines of text */
}

/* ===== Top menu bar (floating capsule, stays at the top when scrolling) ===== */
.site-header {
  position: sticky; /* stays visible at the top while scrolling */
  top: 0; /* stuck to the very top of the screen */
  z-index: 10; /* stays above the page content */
  max-width: var(--max-width); /* same width as the page content */
  margin: 0 auto; /* centered */
  padding: var(--space) var(--space) 0.5rem; /* space above the capsule and side space on small screens */
  background: linear-gradient(to bottom, var(--color-background) 75%, transparent); /* dark strip behind the menu bar, so scrolled text does not show above it */
}

.site-header-inner { /* the visible capsule of the menu bar */
  display: flex; /* logo and menu side by side */
  flex-wrap: wrap; /* on small screens, the menu moves below the logo */
  align-items: center; /* center them vertically */
  justify-content: space-between; /* logo on the left, menu on the right */
  gap: 0.5rem; /* space between logo and menu */
  padding: 0.4rem 0.6rem; /* space inside the menu bar */
  background: var(--color-header-background); /* menu bar background color */
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); /* accent-colored border of the menu bar (30% visible) */
  border-radius: var(--radius-menu); /* rounded menu bar corners */
  box-shadow: 0 4px 20px var(--color-accent-soft); /* soft accent-colored glow under the menu bar */
}

/* Logo: small "SQL" box + site name */
.brand {
  display: flex; /* logo box and name side by side */
  align-items: center; /* center them vertically */
  gap: 0.6rem; /* space between logo box and name */
  color: var(--color-text); /* site name color */
  text-decoration: none; /* no underline on the logo link */
  font-weight: 700; /* bold site name */
  font-size: 0.9rem; /* site name size */
}

.brand-logo { /* the small "SQL" logo box */
  padding: 0.2rem 0.45rem; /* space inside the logo box */
  background: #000000; /* logo box background */
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); /* logo box border (accent color, 30% visible) */
  border-radius: 8px; /* rounded logo box corners */
}

/* ===== Navigation menu ===== */
.site-nav {
  display: flex; /* menu links in a row */
  gap: 0.25rem; /* space between menu links */
}

.site-nav a { /* each link of the menu */
  color: var(--color-text); /* menu link color */
  text-decoration: none; /* no underline on menu links */
  font-size: 0.85rem; /* menu link text size */
  padding: 0.35rem 0.75rem; /* clickable area around each menu link */
  border-radius: var(--radius); /* rounded corners on the link highlight */
  white-space: nowrap; /* keep each menu link on one line */
}

.site-nav a:hover { /* menu link under the mouse */
  color: var(--color-accent); /* menu link color on mouse hover */
}

.site-nav a[aria-current="page"] { /* menu link of the page shown now */
  background: var(--color-accent); /* current page link: purple background */
  color: #000000; /* current page link: black text */
  font-weight: 700; /* current page link: bold */
}

/* ===== Author name pill ("Ungureanu Sebastian") in the menu bar ===== */
.author-pill {
  padding: 0.3rem 0.85rem; /* space inside the name pill */
  border: 1px solid var(--color-accent); /* accent-colored border of the name pill */
  border-radius: var(--radius-pill); /* pill shape */
  background: var(--color-accent-soft); /* light accent background of the name pill */
  color: var(--color-text); /* author name color */
  font-size: 0.8rem; /* author name size */
  font-weight: 700; /* bold author name */
  white-space: nowrap; /* keep the name on one line */
}

@media (min-width: 700px) { /* computers and tablets: logo left, then menu and name pill on the right */
  .brand { /* the logo */
    margin-right: auto; /* push the menu and the name pill to the right */
  }
}

@media (max-width: 699px) { /* phones: first row logo + name pill, second row the menu */
  .author-pill { /* the name pill on phones */
    font-size: 0.7rem; /* smaller author name on phones */
    padding: 0.2rem 0.6rem; /* smaller name pill on phones */
  }

  .site-nav { /* the menu on phones */
    order: 1; /* move the menu after the name pill, on its own row */
    width: 100%; /* the menu takes a whole row */
    flex-wrap: wrap; /* very narrow phones: a link that does not fit moves to the next row */
  }

  .site-nav a { /* the menu links on phones */
    font-size: 0.75rem; /* smaller menu text, so both links fit on one row */
    padding: 0.35rem 0.6rem; /* smaller clickable area on phones */
  }
}

/* ===== Main content ===== */
main {
  max-width: var(--max-width); /* limit line length on wide screens */
  margin: 0 auto; /* center the content */
  padding: var(--space); /* space around the content */
}

/* ===== Hero: the big title area at the top of a page ===== */
.hero {
  text-align: center; /* center the title and text */
  padding: 4rem 0 3rem; /* space above and below the hero */
}

.hero-title { /* the big title at the top of a page */
  margin: 0 0 var(--space); /* space below the big title */
  font-size: var(--font-size-title); /* big title size */
  letter-spacing: 2px; /* space between letters of the big title */
  line-height: 1.3; /* line spacing of the big title */
  background: var(--color-title-gradient); /* gradient colors of the big title */
  background-clip: text; /* show the gradient only inside the letters */
  -webkit-background-clip: text; /* same, for Safari and older Chrome */
  color: transparent; /* hide the normal text color so the gradient shows */
}

.hero-text { /* the text under the big title */
  max-width: 40rem; /* keep the text lines short */
  margin: 0 auto 2rem; /* centered, with space below */
  letter-spacing: 1px; /* space between letters */
}

/* ===== Section headings with a purple ">" in front ===== */
h2,
h3 {
  color: var(--color-heading); /* heading color */
  letter-spacing: 1px; /* space between letters of headings */
  line-height: 1.4; /* line spacing of headings */
}

h2 { /* section headings only */
  font-size: var(--font-size-heading); /* section heading size */
}

h2::before, /* the sign before section headings (h2) */
h3::before {
  content: '> '; /* the ">" sign before every heading (terminal style) */
  color: var(--color-accent); /* color of the ">" sign */
}

a { /* all links */
  color: var(--color-accent); /* link color */
}

a:focus-visible, /* links reached with the keyboard (Tab) */
button:focus-visible {
  outline: 2px solid var(--color-accent); /* visible outline when using the keyboard */
  outline-offset: 2px; /* small gap between element and outline */
}

strong { /* bold words */
  color: var(--color-accent); /* bold words are purple */
}

/* ===== Cards (dark boxes around sections) ===== */
.card {
  background: var(--color-surface); /* card background color */
  border: 1px solid var(--color-border); /* card border */
  border-radius: var(--radius); /* rounded card corners */
  padding: 1.5rem; /* space inside the card */
  margin-bottom: 1.5rem; /* space below each card */
}

.card > :first-child { /* the first element directly inside a card */
  margin-top: 0; /* no extra space at the top of a card */
}

/* ===== Database status badge (pill with a colored dot) ===== */
.status {
  display: inline-flex; /* dot and text side by side */
  align-items: center; /* center them vertically */
  gap: 0.6rem; /* space between dot and text */
  padding: 0.5rem 1.1rem; /* space inside the badge */
  background: var(--color-accent-soft); /* badge background */
  border: 1px solid var(--color-accent); /* badge border */
  border-radius: var(--radius-pill); /* fully rounded badge (pill shape) */
  font-size: 0.85rem; /* badge text size */
  font-weight: 700; /* bold badge text */
  letter-spacing: 1px; /* space between letters */
}

.status::before { /* the colored dot at the start of the status badge */
  content: ''; /* empty element used as the colored dot */
  width: 0.6rem; /* dot width */
  height: 0.6rem; /* dot height */
  border-radius: 50%; /* make it round */
  background: var(--color-text-muted); /* dot color while loading (gray) */
}

.status-success::before { /* the dot when the database is ready */
  background: var(--color-success); /* dot color when the database is ready (green) */
  box-shadow: 0 0 8px var(--color-success); /* green glow around the dot */
}

.status-error { /* the status badge when something went wrong */
  color: var(--color-error); /* badge text color when something went wrong */
}

.status-error::before { /* the dot when something went wrong */
  background: var(--color-error); /* dot color when something went wrong (red) */
  box-shadow: 0 0 8px var(--color-error); /* red glow around the dot */
}

/* ===== Footer ===== */
.site-footer {
  text-align: center; /* center the footer text */
  color: var(--color-text-muted); /* footer text color */
  padding: 2rem var(--space); /* space around the footer */
  font-size: 0.8rem; /* smaller footer text */
}

/* ===== SQL editor section (home page) ===== */
.editor-section {
  margin-bottom: 2rem; /* space below the editor section */
}

/* ===== Home page layout: lessons, SQL editor, database structure ===== */
/* Phones: one column (lessons, then editor, then structure).
   Tablets: lessons on top, editor and structure side by side under them.
   Computers: 3 columns (structure left, lessons middle, editor right); the structure and the editor
   fill the screen height and stay on screen while only the lessons scroll. */
.workspace {
  display: grid; /* the three parts are placed in a grid */
  grid-template-columns: minmax(0, 1fr); /* phones: one column */
  grid-template-areas: /* phones: order of the parts, top to bottom */
    "lessons"
    "editor"
    "schema";
  gap: 1.5rem; /* space between the parts */
  align-items: start; /* each part is only as tall as its content */
}

#lessons { /* the lessons part of the grid */
  grid-area: lessons; /* goes in the "lessons" place */
}

#editor { /* the SQL editor part of the grid */
  grid-area: editor; /* goes in the "editor" place */
}

#schema { /* the database structure part of the grid */
  grid-area: schema; /* goes in the "schema" place */
}

/* Small title above each column: "> LECȚII", "> EDITOR SQL", "> STRUCTURA BAZEI DE DATE" */
.panel-title {
  margin: 0 0 0.75rem; /* space below the column title */
  font-size: 0.8rem; /* small column title */
  text-transform: uppercase; /* column title in capital letters */
  letter-spacing: 2px; /* space between the letters of the column title */
  color: var(--color-text-muted); /* gray column title (the ">" stays purple) */
}

.editor-card, /* the box with the editor, the buttons and the results */
.schema-panel { /* the box with the list of tables */
  margin-bottom: 0; /* the grid gap already adds the space */
}

@media (min-width: 800px) { /* tablets: editor and structure side by side under the lessons */
  .workspace { /* the grid on tablets */
    grid-template-columns: minmax(0, 1fr) var(--schema-panel-width); /* wide editor, narrow structure */
    grid-template-areas: /* tablets: lessons on the whole first row */
      "lessons lessons"
      "editor schema";
  }
}

@media (min-width: 1100px) { /* computers: 3 columns */
  .home-page main, /* the home page content on computers */
  .home-page .site-header { /* and its menu bar */
    max-width: var(--max-width-home); /* wider than the other pages, so 3 columns fit */
  }

  .workspace { /* the grid on computers */
    grid-template-columns: var(--schema-panel-width) minmax(0, 1fr) var(--editor-column-width); /* structure | lessons | editor */
    grid-template-areas: "schema lessons editor"; /* one row: structure left, lessons middle, editor right */
    gap: 1.25rem; /* space between the columns */
  }

  #editor, /* the editor column on computers */
  #schema { /* and the structure column */
    position: sticky; /* stays on screen while the lessons scroll */
    top: var(--sticky-top); /* just under the menu bar */
    height: calc(100vh - var(--sticky-top) - var(--space)); /* as tall as the screen (minus the menu bar) */
    display: flex; /* title on top, box under it */
    flex-direction: column; /* one under the other */
  }

  .editor-card, /* the editor box on computers */
  .schema-panel { /* the structure box on computers */
    flex: 1; /* the box fills the rest of the column height */
    min-height: 0; /* allows the box to be smaller than its content (then it scrolls) */
    overflow-y: auto; /* if the content is taller, it scrolls inside the box */
    scrollbar-width: thin; /* thin scroll bar */
    scrollbar-color: var(--color-border) transparent; /* scroll bar in a faint accent color */
  }

  .editor-card .table-wrapper { /* result tables in the editor column */
    max-height: calc(100vh - var(--editor-results-offset)); /* use the free height under the editor */
  }

  /* Home page title as a slim strip: title and text on the left, database status on the right */
  .home-page .hero {
    display: flex; /* title block and status side by side */
    align-items: center; /* centered vertically */
    justify-content: space-between; /* title on the left, status on the right */
    gap: 2rem; /* space between them */
    padding: 1.75rem 0 1.75rem; /* small space above and below */
    text-align: left; /* text aligned to the left */
  }

  .home-page .hero-title { /* the title in the slim strip */
    margin: 0 0 0.25rem; /* small space under the title */
    font-size: var(--font-size-title-home); /* smaller title on the home page */
  }

  .home-page .hero-text { /* the description in the slim strip */
    margin: 0; /* no extra space */
    max-width: 48rem; /* keep the line not too long */
    font-size: 0.85rem; /* smaller description */
    color: var(--color-text-muted); /* gray description */
  }

  .home-page .status { /* the database status in the slim strip */
    flex-shrink: 0; /* never squeezed */
  }
}

/* ===== Home page on computers: the page fits the screen like an app ===== */
/* The page itself does not scroll. Only the lesson box and the structure box scroll, each one by itself.
   (Only on screens tall enough; on short screens the page scrolls as before.) */
@media (min-width: 1100px) and (min-height: 600px) {
  .home-page { /* the whole home page */
    height: 100vh; /* exactly as tall as the screen */
    display: flex; /* menu bar, then content, one under the other */
    flex-direction: column; /* one under the other */
    overflow: hidden; /* the page itself never scrolls */
  }

  .home-page .site-header { /* the menu bar */
    position: static; /* no need to stick: the page does not scroll */
    width: 100%; /* full width (up to its maximum width) */
    flex: none; /* keeps its own height */
  }

  .home-page main { /* the content under the menu bar */
    flex: 1; /* takes all the height that is left */
    min-height: 0; /* allowed to be smaller than its content */
    width: 100%; /* full width (up to its maximum width) */
    display: flex; /* title strip, then the 3 columns */
    flex-direction: column; /* one under the other */
  }

  .home-page .site-footer { /* the footer */
    display: none; /* hidden on computers: there is no room under the columns (still shown on phones) */
  }

  .workspace { /* the 3 columns */
    flex: 1; /* take all the height under the title strip */
    min-height: 0; /* allowed to be smaller than their content */
    grid-template-rows: minmax(0, 1fr); /* one row, as tall as the free height */
    align-items: stretch; /* every column is as tall as the row */
  }

  #lessons, /* the lessons column */
  #editor, /* the editor column */
  #schema { /* the structure column */
    position: static; /* no need to stick: the page does not scroll */
    height: auto; /* the height comes from the grid row */
    margin-bottom: 0; /* all 3 columns end at the same line */
    min-height: 0; /* allowed to be smaller than its content */
    display: flex; /* column title, then the rest */
    flex-direction: column; /* one under the other */
  }

  #lesson-content { /* the open lesson: the part of the lessons column that scrolls */
    flex: 1; /* takes the height under the lesson buttons */
    min-height: 0; /* allowed to be smaller than its content (then it scrolls) */
    overflow-y: auto; /* the lesson scrolls inside its box */
    scrollbar-width: thin; /* thin scroll bar */
    scrollbar-color: var(--color-border) transparent; /* scroll bar in a faint accent color */
    padding-right: 0.5rem; /* small space between the lesson and its scroll bar */
  }

  .editor-card { /* the editor box: editor and buttons on top, the results take the rest */
    display: flex; /* one under the other */
    flex-direction: column; /* one under the other */
  }

  .editor-card .results { /* the results area in the editor box */
    flex: 1; /* takes the height under the buttons */
    min-height: 0; /* allowed to be smaller than its content */
    display: flex; /* result tables one under the other */
    flex-direction: column; /* one under the other */
  }

  .editor-card .result-block { /* one result (table + row count) in the editor box */
    display: flex; /* table, then the row count */
    flex-direction: column; /* one under the other */
    min-height: 0; /* allowed to be smaller than its content */
  }

  .editor-card .table-wrapper { /* a result table in the editor box */
    max-height: none; /* no fixed limit: it gets the free height of the box */
    min-height: 0; /* allowed to be smaller than the table (then it scrolls, the column names stay on top) */
  }
}

.editor-label { /* the text above the editor ("Scrie o interogare SQL:") */
  display: block; /* the label sits on its own line, above the editor */
  margin-bottom: 0.5rem; /* space between the label and the editor */
  font-size: 0.85rem; /* label text size */
  color: var(--color-text-muted); /* label text color */
}

/* The text box where the SQL is written */
.sql-editor {
  display: block; /* take a full line */
  width: 100%; /* as wide as the card */
  min-height: var(--editor-height); /* starting height of the editor */
  resize: vertical; /* the user can only make it taller or shorter */
  padding: 0.75rem 1rem; /* space inside the editor */
  background: var(--color-editor-background); /* editor background color */
  color: var(--color-text); /* editor text color */
  font-family: var(--font-main); /* same monospace font as the rest of the site */
  font-size: var(--font-size-code); /* editor text size */
  line-height: 1.6; /* space between lines in the editor */
  border: 1px solid var(--color-border); /* editor border */
  border-radius: var(--radius); /* rounded editor corners */
}

.sql-editor:focus { /* the editor while typing in it */
  outline: none; /* remove the browser's default outline (replaced by the glow below) */
  border-color: var(--color-accent); /* purple border while typing */
  box-shadow: 0 0 12px var(--color-accent-glow); /* purple glow while typing */
}

/* Row with the buttons and the Ctrl+Enter hint */
.editor-buttons {
  display: flex; /* buttons side by side */
  flex-wrap: wrap; /* on small screens, move to the next line */
  align-items: center; /* center them vertically */
  gap: 0.75rem; /* space between the buttons */
  margin-top: 1rem; /* space between the editor and the buttons */
}

.editor-hint { /* the "Ctrl+Enter pentru a rula" hint */
  font-size: var(--font-size-small); /* small hint text */
  color: var(--color-text-muted); /* gray hint text */
}

/* ===== Buttons ===== */
.button {
  padding: 0.6rem 1.2rem; /* space inside the buttons */
  font-family: var(--font-main); /* same font as the rest of the site */
  font-size: 0.9rem; /* button text size */
  border: 1px solid var(--color-accent); /* purple button border */
  border-radius: var(--radius); /* rounded button corners */
  cursor: pointer; /* hand cursor on hover */
}

/* Main button ("Rulează"): purple background, black bold text, purple glow */
.button-primary {
  background: var(--color-button-primary); /* run button background color */
  color: var(--color-button-primary-text); /* run button text color */
  font-weight: 700; /* bold run button text */
  box-shadow: 0 0 15px color-mix(in srgb, var(--color-button-primary) 60%, transparent); /* glow around the run button, in the button's own color */
}

.button-primary:hover { /* run button under the mouse */
  box-shadow: 0 0 25px color-mix(in srgb, var(--color-button-primary) 60%, transparent); /* stronger glow on mouse hover */
}

/* Second button ("Resetează baza de date"): dark background, purple border */
.button-secondary {
  background: var(--color-button-secondary); /* reset button background color */
  color: var(--color-text); /* reset button text color */
}

.button-secondary:hover { /* second button under the mouse */
  color: var(--color-accent); /* reset button text turns purple on mouse hover */
}

/* ===== Results area (tables and messages) ===== */
.results {
  margin-top: 1.5rem; /* space between the buttons and the results */
}

.result-block + .result-block { /* a result table that comes right after another result table */
  margin-top: 1.5rem; /* space between two result tables */
}

/* Box around a result table: wide or tall tables scroll inside it, not the whole page */
.table-wrapper {
  overflow: auto; /* scroll bars appear only inside this box */
  max-height: var(--results-max-height); /* maximum height before scrolling */
  border: 1px solid var(--color-border); /* border around the table */
  border-radius: var(--radius); /* rounded corners */
}

.result-table { /* the table with the query results */
  width: 100%; /* table at least as wide as the card */
  border-collapse: collapse; /* single lines between cells */
  font-size: var(--font-size-code); /* result table text size */
}

.result-table th, /* the cells of the result table (column names and values) */
.result-table td {
  padding: 0.45rem 0.8rem; /* space inside each cell */
  text-align: left; /* values aligned to the left */
  white-space: nowrap; /* keep each value on one line (the box scrolls instead) */
  border-bottom: 1px solid var(--color-table-line); /* line between rows */
}

.result-table th { /* the column names of the result table */
  position: sticky; /* column names stay visible while scrolling down */
  top: 0; /* stick to the top of the table box */
  background: var(--color-table-header); /* column names background color */
  color: var(--color-accent); /* column names text color */
  font-weight: 700; /* bold column names */
}

.result-table tbody tr:nth-child(even) { /* every second row of the result table */
  background: var(--color-table-row-alt); /* every second row slightly lighter (easier to read) */
}

.null-value { /* a cell that holds NULL */
  color: var(--color-text-muted); /* NULL values shown in gray */
  font-style: italic; /* and in italics, so they differ from the text 'NULL' */
}

.row-count { /* the "N rânduri" text under a result table */
  margin: 0.5rem 0 0; /* space above the row count */
  font-size: var(--font-size-small); /* small row count text */
  color: var(--color-text-muted); /* gray row count text */
}

/* Messages: errors (red), success (green), information (gray) */
.message {
  margin: 0; /* no extra space around the message */
  padding: 0.75rem 1rem; /* space inside the message box */
  border-left: 3px solid var(--color-accent); /* colored line on the left of the message */
  border-radius: var(--radius); /* rounded message corners */
  background: var(--color-accent-soft); /* message background color */
  font-size: 0.9rem; /* message text size */
  white-space: pre-wrap; /* keep line breaks from the message text */
  overflow-wrap: anywhere; /* break very long words so they fit on phones */
}

.message-error { /* an error message */
  color: var(--color-error); /* error message text color (red) */
  border-left-color: var(--color-error); /* red line on the left */
  background: rgba(248, 113, 113, 0.08); /* light red background */
}

.message-success { /* a success message */
  color: var(--color-success); /* success message text color (green) */
  border-left-color: var(--color-success); /* green line on the left */
  background: rgba(74, 222, 128, 0.08); /* light green background */
}

.message-info { /* an information message */
  color: var(--color-text-muted); /* information message text color (gray) */
}

/* ===== Database structure panel ("Structura bazei de date") ===== */
.schema-panel { /* the box with the list of tables */
  padding: 0.75rem 1.1rem; /* space inside the box */
}

.schema-table { /* one table in the structure panel */
  border-bottom: 1px solid var(--color-border); /* line between tables */
  padding: 0.45rem 0; /* space above and below each table */
}

.schema-table:last-child { /* the last table in the panel */
  border-bottom: none; /* no line under the last table */
}

.schema-table summary { /* the table name (click it to open or close the column list) */
  cursor: pointer; /* hand cursor: the table name can be clicked */
  font-size: 0.85rem; /* table name size */
  font-weight: 700; /* bold table name */
}

.schema-table summary:hover { /* table name under the mouse */
  color: var(--color-accent); /* table name turns purple on mouse hover */
}

.schema-table summary:focus-visible { /* table name reached with the keyboard (Tab) */
  outline: 2px solid var(--color-accent); /* visible outline when using the keyboard */
  outline-offset: 2px; /* small gap between the name and the outline */
}

.column-list { /* the list of columns of a table */
  list-style: none; /* no bullets in the column list */
  margin: 0.3rem 0 0.2rem; /* space above and below the column list */
  padding-left: 0.9rem; /* columns indented under the table name */
  font-size: var(--font-size-schema); /* small column text */
  line-height: 1.6; /* compact lines */
}

.column-list li { /* one column in the list */
  display: flex; /* column name and type on the same line */
  justify-content: space-between; /* name on the left, type on the right */
  gap: 0.5rem; /* space between name and type */
  white-space: nowrap; /* name and type always on one line */
}

.column-type { /* the type of a column, e.g. VARCHAR2(30) */
  color: var(--color-text-muted); /* column types in gray */
}

/* Small link under each table: writes "SELECT * FROM <table>;" in the editor */
.schema-query-button {
  margin: 0.1rem 0 0.2rem 0.9rem; /* indented like the columns */
  padding: 0; /* no space around the text: it looks like a link */
  background: transparent; /* no background */
  color: var(--color-accent); /* purple link text */
  font-family: var(--font-main); /* same font as the rest of the site */
  font-size: var(--font-size-schema); /* small link text */
  border: none; /* no border */
  cursor: pointer; /* hand cursor on hover */
}

.schema-query-button:hover { /* the small link under the mouse */
  text-decoration: underline; /* underlined on mouse hover */
}

/* ===== Lessons and exercises ===== */
/* Home page: the numbered lesson buttons, the open lesson, its examples and its exercises (built by lessons-ui.js). */

/* When a button scrolls to the lessons or to the editor, leave room for the menu bar at the top */
#lessons,
#editor {
  scroll-margin-top: var(--scroll-offset); /* space above the section after scrolling */
}

.lessons-section { /* the whole lessons section */
  margin-bottom: 2rem; /* space below the lessons section */
}

/* Row of numbered lesson buttons */
.lesson-nav {
  display: flex; /* buttons side by side */
  flex-wrap: wrap; /* on small screens, move to the next line */
  gap: 0.5rem; /* space between the buttons */
  margin-bottom: 1.5rem; /* space between the buttons and the lesson */
}

/* One numbered lesson button (pill shape): the number and the progress, e.g. "3 2/4" */
.lesson-chip {
  display: inline-flex; /* number and progress side by side */
  align-items: baseline; /* the numbers sit on the same line */
  gap: 0.4rem; /* space between the number and the progress */
  padding: 0.35rem 0.9rem; /* space inside the lesson button */
  background: var(--color-chip-background); /* lesson button background color */
  color: var(--color-text); /* lesson button text color */
  font-family: var(--font-main); /* same font as the rest of the site */
  font-size: 0.9rem; /* lesson number size */
  font-weight: 700; /* bold lesson number */
  border: 1px solid var(--color-border); /* thin purple border */
  border-radius: var(--radius-pill); /* pill shape */
  cursor: pointer; /* hand cursor on hover */
}

.lesson-chip:hover { /* lesson button under the mouse */
  border-color: var(--color-accent); /* stronger border on mouse hover */
}

.lesson-chip-progress { /* the progress inside a lesson button, e.g. "2/4" */
  font-size: var(--font-size-small); /* small progress text, e.g. "2/4" */
  font-weight: 400; /* normal (not bold) progress text */
  color: var(--color-text-muted); /* gray progress text */
}

/* Lesson button of a lesson with all exercises solved: green border and green progress */
.lesson-chip-done {
  border-color: var(--color-success); /* green border */
}

.lesson-chip-done .lesson-chip-progress { /* the progress text inside a lesson button of a finished lesson */
  color: var(--color-success); /* green progress text */
}

/* Lesson button of the lesson shown now: purple background, black text, purple glow */
.lesson-chip[aria-current="true"] {
  background: var(--color-accent); /* purple background */
  color: var(--color-button-primary-text); /* black text */
  border-color: var(--color-accent); /* purple border */
  box-shadow: 0 0 15px var(--color-accent-glow); /* purple glow */
}

.lesson-chip[aria-current="true"] .lesson-chip-progress { /* the progress text inside the button of the open lesson */
  color: var(--color-button-primary-text); /* black progress text on the purple button */
}

/* The open lesson */
.lesson-number {
  margin: 0; /* no extra space around "Lecția 3 din 9" */
  font-size: var(--font-size-small); /* small text */
  color: var(--color-accent); /* purple text */
  letter-spacing: 1px; /* space between letters */
}

.lesson h3 { /* the title of the open lesson */
  margin-top: 0.25rem; /* small space between "Lecția 3 din 9" and the lesson title */
}

.lesson-list { /* bullet lists inside a lesson */
  padding-left: 1.25rem; /* bullets indented a little */
}

.lesson-list li + li { /* every line of a lesson list except the first one */
  margin-top: 0.35rem; /* space between the lines of a list */
}

/* Code words inside the lesson text, e.g. `SELECT` */
.lesson code {
  padding: 0.1rem 0.35rem; /* space around the code word */
  background: var(--color-code-background); /* light purple background */
  color: var(--color-code-text); /* light purple text */
  border-radius: 4px; /* rounded corners */
  font-family: var(--font-main); /* same monospace font */
  font-size: var(--font-size-code); /* code text size */
  overflow-wrap: anywhere; /* long code words may break on phones */
}

/* Box with SQL code (lesson examples and exercise solutions) */
.code-block {
  margin: 0 0 0.75rem; /* space below the code box */
  padding: 0.75rem 1rem; /* space inside the code box */
  background: var(--color-editor-background); /* same background as the SQL editor */
  border: 1px solid var(--color-border); /* thin purple border */
  border-radius: var(--radius); /* rounded corners */
  overflow-x: auto; /* long lines scroll inside the box, not the whole page */
  font-size: var(--font-size-code); /* code text size */
  line-height: 1.6; /* space between the lines of code */
}

.lesson .code-block code { /* the SQL inside a code box of a lesson */
  padding: 0; /* no extra space: the box already has it */
  background: none; /* no extra background inside the code box */
  color: var(--color-text); /* normal text color for the SQL */
  overflow-wrap: normal; /* keep SQL lines whole (the box scrolls instead) */
}

/* One example: code, explanation and the "Încearcă în editor" button */
.lesson-example {
  margin: 1.5rem 0; /* space above and below the example */
  padding-left: 1rem; /* space between the purple line and the example */
  border-left: 3px solid var(--color-accent); /* purple line on the left of the example */
}

.lesson-example-text { /* the explanation under an example */
  margin: 0 0 0.75rem; /* space between the explanation and the button */
  color: var(--color-text-muted); /* gray explanation text */
  font-size: 0.9rem; /* explanation text size */
}

/* Exercises part of a lesson */
.exercises {
  margin-top: 2rem; /* space between the lesson text and the exercises */
  padding-top: 1rem; /* space below the line */
  border-top: 1px solid var(--color-border); /* line above the exercises */
}

.exercises-title { /* the "Exerciții" heading */
  margin: 0; /* no extra space around the "Exerciții" heading */
  font-size: 1.1rem; /* "Exerciții" heading size */
  color: var(--color-heading); /* heading color */
}

.exercises-title::before { /* the sign before the "Exerciții" heading */
  content: '> '; /* the ">" sign before the heading, like the other headings */
  color: var(--color-accent); /* color of the ">" sign */
}

.lesson-progress { /* the "Rezolvate: 2 din 4" text */
  margin: 0.25rem 0 1rem; /* space around "Rezolvate: 2 din 4" */
  font-size: var(--font-size-small); /* small progress text */
  color: var(--color-text-muted); /* gray progress text */
}

/* Box of one exercise */
.exercise {
  margin-bottom: 1rem; /* space between two exercises */
  padding: 1rem; /* space inside the exercise box */
  border: 1px solid var(--color-border); /* thin purple border */
  border-radius: var(--radius); /* rounded corners */
}

.exercise-title { /* the "Exercițiul 2" title */
  margin: 0 0 0.5rem; /* space below "Exercițiul 2" */
  font-size: 0.95rem; /* exercise title size */
  color: var(--color-accent); /* purple exercise title */
}

.exercise-solved { /* the green "rezolvat" mark next to the exercise title */
  margin-left: 0.5rem; /* space between the title and the mark */
  color: var(--color-success); /* green "rezolvat" mark */
  font-size: var(--font-size-small); /* small mark text */
}

.exercise-editor { /* the answer box of an exercise */
  min-height: var(--exercise-editor-height); /* the answer box is shorter than the main editor */
}

.exercise-hint { /* the hint of an exercise */
  margin-top: 1rem; /* space between the buttons and the hint */
}

.exercise-solution { /* box with the "Soluția:" label and the correct SQL, under the feedback */
  margin-top: 1rem; /* space between the feedback and the solution */
}

.exercise-solution-label { /* the "Soluția:" label above the correct SQL */
  margin: 0 0 0.35rem; /* small space between the label and the SQL */
  font-size: var(--font-size-small); /* small label text */
  color: var(--color-accent); /* accent-colored label */
}

.exercise-feedback .message { /* the "Corect!" / error message of an exercise */
  margin-top: 1rem; /* space between the buttons and the "Corect!" / error message */
}

.exercise-feedback .results { /* the user's rows under the message of an exercise */
  margin-top: 0.75rem; /* space between the message and the user's rows */
}

/* Previous / next lesson buttons at the bottom of a lesson */
.lesson-pager {
  display: flex; /* buttons side by side */
  flex-wrap: wrap; /* on small screens, move to the next line */
  justify-content: space-between; /* one button on the left, one on the right */
  gap: 0.75rem; /* space between the buttons */
  margin-top: 1.5rem; /* space above the buttons */
}

/* Buttons that cannot be used now (e.g. "Rulează" while the database is loading) */
.button:disabled {
  opacity: 0.5; /* faded */
  cursor: not-allowed; /* "not allowed" cursor on hover */
  box-shadow: none; /* no glow */
}

/* ===== How it works page (cum-functioneaza.html) ===== */
/* Every rule starts with ".how-page" (the <main> of that page), so the home page is not affected. */
/* Colors come from the variables at the top of this file, so changing --color-accent also recolors these diagrams. */

.how-page section[id] {
  scroll-margin-top: var(--scroll-offset); /* when a table of contents link jumps here, the heading is not hidden under the menu bar */
}

.how-page h3 { /* small headings on the how it works page */
  margin-top: 1.75rem; /* space above the small headings inside a card */
}

/* Inline code (function names, file names) on the how it works page */
.how-page code {
  padding: 0.05rem 0.35rem; /* small space around the code text */
  background: var(--color-code-background); /* light purple background behind code (same as in the lessons) */
  color: var(--color-code-text); /* light purple code text (same as in the lessons) */
  font-family: var(--font-main); /* same font as the rest of the site (browsers use another font for code) */
  border-radius: 4px; /* slightly rounded code background */
  font-size: 0.9em; /* code text a bit smaller than the text around it */
  overflow-wrap: anywhere; /* long function names break instead of widening the page on phones */
}

/* Table of contents: pill links under the big title */
.how-toc {
  display: flex; /* links side by side */
  flex-wrap: wrap; /* move to the next line when there is no room */
  justify-content: center; /* links centered under the title */
  gap: 0.5rem; /* space between the links */
  margin-bottom: 2rem; /* space between the links and the first card */
}

.how-toc a { /* each pill link of the table of contents */
  padding: 0.3rem 0.9rem; /* space inside each pill link */
  border: 1px solid var(--color-border); /* thin purple border of the pill links */
  border-radius: var(--radius-pill); /* fully rounded pill links */
  color: var(--color-text); /* pill link text color */
  text-decoration: none; /* no underline on the pill links */
  font-size: var(--font-size-small); /* small pill link text */
}

.how-toc a:hover { /* pill link under the mouse */
  border-color: var(--color-accent); /* stronger purple border on mouse hover */
  box-shadow: 0 0 10px var(--color-accent-glow); /* purple glow on mouse hover */
}

/* Three big numbers in the "Pe scurt" section (9 lessons, 5 tables, 0 servers) */
.how-stats {
  display: grid; /* numbers placed in a grid */
  grid-template-columns: minmax(0, 1fr); /* phones: one number per line */
  gap: 1rem; /* space between the number boxes */
  margin: 1.5rem 0; /* space above and below the numbers */
  padding: 0; /* no list indent */
  list-style: none; /* no bullets */
}

@media (min-width: 600px) { /* screens at least 600px wide (tablets and computers) */
  .how-stats { /* the three big numbers on wider screens */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* computers: three numbers side by side */
  }
}

.how-stats li { /* the box of one big number */
  padding: 1rem; /* space inside each number box */
  border: 1px solid var(--color-border); /* thin purple border of each number box */
  border-radius: var(--radius); /* rounded number box corners */
  text-align: center; /* number and text centered */
  font-size: var(--font-size-small); /* small text under the number */
  color: var(--color-text-muted); /* gray text under the number */
}

.how-stat-number { /* the big number itself */
  display: block; /* the number sits on its own line, above the text */
  font-size: 2.5rem; /* size of the big numbers */
  font-weight: 700; /* bold big numbers */
  line-height: 1.2; /* compact line height for the big numbers */
  color: var(--color-accent); /* purple big numbers */
  text-shadow: 0 0 15px var(--color-accent-glow); /* purple glow around the big numbers */
}

/* Technologies list: a pill badge with a short explanation under it */
.how-badges {
  display: grid; /* boxes placed in a grid */
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); /* as many columns as fit (one on phones) */
  gap: 0.75rem; /* space between the boxes */
  padding: 0; /* no list indent */
  list-style: none; /* no bullets */
  font-size: 0.9rem; /* text size of the explanations */
}

.how-badges li { /* one technology: pill + explanation */
  display: flex; /* pill and explanation one under the other */
  flex-direction: column; /* pill on top, explanation below */
  align-items: flex-start; /* the pill is only as wide as its text */
  gap: 0.3rem; /* space between the pill and its explanation */
  color: var(--color-text-muted); /* gray explanation text */
}

.how-badge { /* the pill with the technology name */
  display: inline-block; /* pill with its own padding */
  color: var(--color-text); /* white technology name */
  padding: 0.15rem 0.75rem; /* space inside the pill */
  background: var(--color-accent-soft); /* light purple pill background */
  border: 1px solid var(--color-accent); /* purple pill border */
  border-radius: var(--radius-pill); /* fully rounded pill */
  font-weight: 700; /* bold technology name */
}

/* Pill lists of code words (Oracle functions, unsupported syntax) */
.how-badges-code {
  display: flex; /* pills side by side */
  flex-wrap: wrap; /* move to the next line when there is no room */
  gap: 0.5rem; /* space between the pills */
}

.how-badges-code li { /* one pill with a code word */
  display: block; /* a simple pill (not the pill + explanation layout of the technologies list) */
  padding: 0.2rem 0.75rem; /* space inside each pill */
  color: var(--color-text); /* white pill text */
  border: 1px solid var(--color-accent); /* purple pill border */
  border-radius: var(--radius-pill); /* fully rounded pill */
}

.how-badges-code code { /* the code word inside a pill */
  padding: 0; /* the pill already has space inside */
  background: none; /* the pill already has a border, no extra background */
}

/* Tables on this page (files, relationships, differences, where to change) reuse .result-table */
.how-table-wrapper {
  max-height: none; /* show the whole table, no vertical scroll inside it */
  margin: 1rem 0; /* space above and below the table */
}

.how-table-wide { /* tables with 3 columns */
  min-width: 34rem; /* tables with 3 columns: on phones they scroll sideways inside their box instead of squeezing the text */
}

.how-table th, /* the cells of the tables on this page */
.how-table td {
  white-space: normal; /* long explanations wrap on several lines */
  vertical-align: top; /* cells of the same row start at the same height */
}

.how-page .how-table code { /* code inside the tables of this page */
  white-space: nowrap; /* file names and code in tables stay on one line (the table scrolls sideways instead) */
  overflow-wrap: normal; /* never cut a file name in the middle */
}

/* "Unde modific?" table on phones: each row becomes a small card (what to change, what to search, which file) */
@media (max-width: 599px) {
  .how-table-stack thead { /* phones: hide the column names (each value gets its own label below) */
    display: none; /* the header row is not shown */
  }

  .how-table-stack,
  .how-table-stack tbody,
  .how-table-stack tr,
  .how-table-stack td { /* phones: the table, its rows and its cells become normal blocks, one under the other */
    display: block; /* no table columns: everything is stacked */
    min-width: 0; /* no minimum width: the cards fit the phone screen */
  }

  .how-table-stack tr { /* phones: one row = one card */
    padding: 0.5rem 0; /* space above and below each card */
    border-bottom: 1px solid var(--color-border); /* line between two cards */
  }

  .how-table-stack td { /* phones: one value of a row */
    padding: 0.1rem 0.8rem; /* small space around each value */
    border-bottom: none; /* the line is under the whole card, not under each value */
  }

  .how-table-stack td:first-child { /* phones: "what you want to change" */
    font-weight: 700; /* bold, as the title of the card */
  }

  .how-table-stack td:nth-child(2)::before { /* phones: label before the search text */
    content: 'Caută: '; /* label text */
    color: var(--color-text-muted); /* gray label */
  }

  .how-table-stack td:nth-child(3)::before { /* phones: label before the file name */
    content: 'Fișier: '; /* label text */
    color: var(--color-text-muted); /* gray label */
  }
}

/* Flow diagram: vertical boxes connected by arrows (query path, startup, publishing) */
.how-flow {
  max-width: 40rem; /* the boxes are not too wide on computers */
  margin: 1.5rem auto; /* centered, with space above and below */
  padding: 0; /* no list indent */
  list-style: none; /* no list numbers (the step numbers are drawn below) */
  counter-reset: flow-step; /* start counting the steps from 1 in each diagram */
}

.how-flow-step { /* one box of a flow diagram */
  position: relative; /* lets the arrow and the step number be placed around the box */
  display: flex; /* the parts of the box one under the other */
  flex-direction: column; /* file label, title, text from top to bottom */
  gap: 0.35rem; /* space between the parts of the box */
  margin-bottom: 2.5rem; /* room for the arrow below the box */
  padding: 1.1rem 1rem 1rem; /* space inside the box */
  background: var(--color-editor-background); /* dark box background */
  border: 1px solid var(--color-accent); /* purple box border */
  border-radius: var(--radius); /* rounded box corners */
  box-shadow: 0 0 10px var(--color-accent-soft); /* soft purple glow around the box */
  counter-increment: flow-step; /* this box is the next step */
}

.how-flow-step:last-child { /* the last box of a flow diagram */
  margin-bottom: 0; /* no arrow after the last box, so no extra space */
}

.how-flow-step::before { /* the step number badge on the top border of a box */
  content: counter(flow-step); /* the step number: 1, 2, 3 ... */
  position: absolute; /* placed on the top border of the box */
  top: -0.75rem; /* half above the border */
  left: 1rem; /* near the left corner */
  min-width: 1.5rem; /* round badge width */
  padding: 0 0.4rem; /* space inside the badge */
  background: var(--color-accent); /* purple step number badge */
  color: var(--color-button-primary-text); /* black step number */
  border-radius: var(--radius-pill); /* round step number badge */
  font-size: var(--font-size-small); /* small step number */
  font-weight: 700; /* bold step number */
  text-align: center; /* number centered in the badge */
}

.how-flow-step:not(:last-child)::after { /* the arrow under every box except the last one */
  content: '↓'; /* the arrow between two boxes */
  position: absolute; /* placed under the box */
  bottom: -2.3rem; /* in the space between this box and the next */
  left: 50%; /* horizontally in the middle */
  transform: translateX(-50%); /* exactly centered */
  color: var(--color-accent); /* purple arrow */
  font-size: 1.4rem; /* arrow size */
  line-height: 2rem; /* arrow height */
  text-shadow: 0 0 10px var(--color-accent-glow); /* purple glow around the arrow */
}

.how-flow-file { /* the small file label at the top of a box */
  align-self: flex-start; /* the label is only as wide as its text */
  padding: 0 0.6rem; /* space inside the file label */
  border: 1px solid var(--color-border); /* thin border of the file label */
  border-radius: var(--radius-pill); /* pill-shaped file label */
  color: var(--color-text-muted); /* gray file label text */
  font-size: var(--font-size-small); /* small file label text */
}

.how-flow-title { /* the title of a box (a function name) */
  font-weight: 700; /* bold step title */
  overflow-wrap: anywhere; /* long function names break on phones */
}

.how-flow-text { /* the explanation inside a box */
  font-size: 0.9rem; /* step explanation text size */
  color: var(--color-text-muted); /* gray step explanation */
}

.how-flow-engine { /* the box of the SQL engine (highlighted) */
  background: var(--color-accent-soft); /* the SQL engine box has a purple background */
  box-shadow: 0 0 20px var(--color-accent-glow); /* stronger glow: the engine is the heart of the site */
}

.how-page .how-flow-example { /* the example result inside a box */
  display: block; /* example result on its own line */
  padding: 0.5rem 0.75rem; /* space inside the example box */
  background: var(--color-background); /* black example background */
  font-size: var(--font-size-small); /* small example text */
}

/* The three possible outcomes after a query (rows, no rows, error) */
.how-branches {
  display: grid; /* outcomes placed in a grid */
  grid-template-columns: minmax(0, 1fr); /* one outcome under the other */
  gap: 0.5rem; /* space between the outcomes */
  margin: 0.5rem 0 0; /* space above the outcomes */
  padding: 0; /* no list indent */
  list-style: none; /* no bullets */
  font-size: 0.85rem; /* outcome text size */
}

.how-branches li { /* one possible outcome */
  padding: 0.6rem 0.75rem; /* space inside each outcome box */
  border: 1px dashed var(--color-accent); /* dashed purple border: these are alternatives */
  border-radius: var(--radius); /* rounded outcome box corners */
}

/* Database diagram: one box per table */
.how-legend {
  font-size: var(--font-size-small); /* small legend text */
  color: var(--color-text-muted); /* gray legend text */
}

.how-er { /* the database diagram */
  display: grid; /* table boxes placed in a grid */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); /* as many columns as fit (one on phones) */
  gap: 1rem; /* space between the table boxes */
  margin: 1rem 0; /* space above and below the diagram */
}

.how-er-table { /* the box of one table in the diagram */
  border: 1px solid var(--color-accent); /* purple border of a table box */
  border-radius: var(--radius); /* rounded table box corners */
  background: var(--color-editor-background); /* dark table box background */
  box-shadow: 0 0 10px var(--color-accent-soft); /* soft purple glow around a table box */
  overflow: hidden; /* keep the header color inside the rounded corners */
}

.how-page .how-er-name { /* the name bar at the top of a table box */
  display: flex; /* table name and row count on one line */
  flex-wrap: wrap; /* row count moves below on very small screens */
  justify-content: space-between; /* name on the left, row count on the right */
  align-items: center; /* centered vertically */
  gap: 0.5rem; /* space between name and row count */
  margin: 0; /* no space around the table name bar */
  padding: 0.5rem 0.75rem; /* space inside the table name bar */
  background: var(--color-table-header); /* table name bar background, like result tables */
  border-bottom: 1px solid var(--color-border); /* line under the table name */
  color: var(--color-accent); /* purple table name */
  font-size: 1rem; /* table name size */
}

.how-er-name::before { /* the sign before a table name in the diagram */
  content: none; /* no ">" before the table names in the diagram */
}

.how-er-count { /* the row count next to a table name */
  color: var(--color-text-muted); /* gray row count */
  font-size: var(--font-size-small); /* small row count */
  font-weight: 400; /* normal (not bold) row count */
}

.how-er-columns { /* the list of columns in a table box */
  margin: 0; /* no space around the column list */
  padding: 0.5rem 0.75rem; /* space inside the column list */
  list-style: none; /* no bullets */
  font-size: var(--font-size-small); /* small column text */
}

.how-er-columns li { /* one column in a table box */
  display: flex; /* column name and type on the same line */
  flex-wrap: wrap; /* type moves to the next line if there is no room */
  justify-content: space-between; /* name on the left, type on the right */
  gap: 0 0.75rem; /* space between name and type */
  padding: 0.15rem 0; /* space above and below each column */
  border-bottom: 1px solid var(--color-table-line); /* thin line between columns */
}

.how-er-columns li:last-child { /* the last column in a table box */
  border-bottom: none; /* no line after the last column */
}

.how-er-type { /* the type of a column in a table box */
  color: var(--color-text-muted); /* gray column types */
}

/* PK / FK labels (primary key, foreign key) */
.how-key {
  display: inline-block; /* small label with its own padding */
  margin-right: 0.3rem; /* space between the label and the column name */
  padding: 0 0.3rem; /* space inside the label */
  border: 1px solid var(--color-accent); /* purple label border */
  border-radius: 4px; /* slightly rounded label */
  font-size: 0.65rem; /* very small label text */
  font-weight: 700; /* bold label text */
  line-height: 1.5; /* label height */
}

.how-key-pk { /* the PK (primary key) label */
  background: var(--color-accent); /* primary key label: purple background */
  color: var(--color-button-primary-text); /* primary key label: black text */
}

.how-key-fk { /* the FK (foreign key) label */
  color: var(--color-accent); /* foreign key label: purple text, no background */
}

/* Normal bullet lists on this page */
.how-list {
  padding-left: 1.25rem; /* list indent */
}

.how-list li { /* one item of a list on this page */
  margin-bottom: 0.5rem; /* space between list items */
}

.how-list li::marker { /* the bullet of a list item */
  color: var(--color-accent); /* purple bullets */
}

/* Code excerpt box (the NVL function from db.js) */
.how-code {
  margin: 1rem 0; /* space above and below the code box */
  padding: 1rem; /* space inside the code box */
  background: var(--color-editor-background); /* dark code box, like the SQL editor */
  font-family: var(--font-main); /* same font as the rest of the site (browsers use another font for code) */
  border: 1px solid var(--color-border); /* thin purple border */
  border-left: 3px solid var(--color-accent); /* thick purple line on the left */
  border-radius: var(--radius); /* rounded code box corners */
  font-size: var(--font-size-code); /* code text size */
  line-height: 1.6; /* space between code lines */
  overflow-x: auto; /* long code lines scroll inside the box on phones */
}

.how-page .how-code code { /* the code inside the code excerpt box */
  padding: 0; /* no extra space: the box already has it */
  background: none; /* no purple background behind the whole code block */
  color: var(--color-text); /* normal text color for the code, like the SQL in the lessons */
  font-size: inherit; /* same size as the code box */
  overflow-wrap: normal; /* code lines keep their shape (the box scrolls instead) */
}

/* Highlighted note (security, reset button, variables that go together) */
.how-note {
  padding: 0.75rem 1rem; /* space inside the note */
  border-left: 3px solid var(--color-accent); /* purple line on the left of the note */
  border-radius: var(--radius); /* rounded note corners */
  background: var(--color-accent-soft); /* light purple note background */
  font-size: 0.9rem; /* note text size */
}

.how-page .how-note code { /* code inside a note */
  white-space: nowrap; /* names like --color-accent stay whole (never broken after the "--") */
}