/* ============================================================================
   Cloudflare PS Bootcamp Lab - Launcher
   Clean, scannable layout. Always dark, regardless of device or RBI.
   ============================================================================ */

:root {
  color-scheme: dark;

  /* ---- Type scale -------------------------------------------------------
     Six sizes, each with one job. Everything on the page maps to one of
     these; there are no other font-sizes. Sizes shrink as a set on mobile
     by redefining these variables (see the media queries at the bottom).
       --fs-h1   page title
       --fs-h2   section heading
       --fs-h3   subsection heading + the emphasized lead paragraph
       --fs-body all running text: paragraphs, lists, table cells, callouts
       --fs-code monospace: code chips, command boxes, inputs
       --fs-ui   secondary chrome: nav, tabs, table headers, footer, captions
     -------------------------------------------------------------------- */
  --fs-h1:   32px;
  --fs-h2:   24px;
  --fs-h3:   20px;
  --fs-body: 18px;
  --fs-code: 16px;
  --fs-ui:   15px;

  /* ---- Brand palette (per cloudflare-brand-colors.md) -------------------
     Page background is CF Slide Purple (a dark surface), so per the
     guidelines: CF accents use Tangerine (#F6821F, "CF on dark"), caution
     callouts use Mango (#FBAD41), links use Light Blue (#A8CBFF) because
     Blueberry is unreadable on Slide Purple, and text is white.
     The header band is a light surface (Light Purple), handled separately.
     -------------------------------------------------------------------- */
  --bg:           #141538;  /* CF Slide Purple */
  --bg-elev:      #20224f;  /* Lighter Slide-Purple surface (cards/header rows) */
  --fg:           #FFFFFF;  /* White */
  --fg-muted:     #B9BAD6;  /* Muted lavender */
  --border:       #343663;
  --border-strong: #474a82;
  --cf-orange:    #F6821F;  /* Tangerine - CF products/elements on dark */
  --cf-orange-bg: #1b1d45;  /* Dark Slide-Purple panel (callout fill; accent comes from the border) */
  --warn-border:  #FBAD41;  /* Mango - warning / caution */
  --warn-bg:      #1b1d45;  /* Dark Slide-Purple panel (matches callout fill) */
  --warn-fg:      #FFFFFF;
  --code-bg:      #0c0d28;  /* Dark Slide-Purple */
  --code-fg:      #F0F0F5;
  --link:         #A8CBFF;  /* Light Blue - readable on Slide Purple */
  --link-hover:   #E0ECFF;  /* Extra Light Blue */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 48px 48px 96px;
}

header.brand {
  border-bottom: 1px solid var(--border);
  padding: 16px 48px;
  background: #FFE9CB;  /* Light Orange - warm Cloudflare pastel surface */
  position: sticky;
  top: 0;
  z-index: 10;
}

header.brand .inner {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header.brand .logo {
  font-weight: 700;
  font-size: var(--fs-body);
  color: #960C3E;  /* Cherry */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

header.brand .logo .cf-logo {
  height: 26px;
  width: auto;
  flex: none;
}

/* Centered in the full bar regardless of logo / nav widths. */
header.brand .brand-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: #960C3E;  /* Cherry */
  white-space: nowrap;
  pointer-events: none;
}

header.brand nav a {
  margin-left: 18px;
  color: #960C3E;  /* Cherry */
  text-decoration: none;
  font-size: var(--fs-h2);
  font-weight: 700;
}

header.brand nav a:hover { color: #960C3E; opacity: 0.7; }

h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin: 40px 0 12px;
  letter-spacing: -0.005em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 24px 0 8px;
}

p, ul, ol { margin: 0 0 14px; }
ul, ol { padding-left: 24px; }
li { margin: 4px 0; }

.lede {
  color: var(--fg-muted);
  font-size: var(--fs-body);
  margin-bottom: 32px;
}

.lede-highlight {
  color: var(--fg);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 32px;
}

a { color: var(--link); text-decoration: underline; }
a:hover { color: var(--link-hover); }

code, pre {
  font-family: "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--fs-code);
}

p code, li code, td code {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: var(--fs-code);
}

/* Highlight for literal values the student needs to type / enter.
   Lemon so it can't be missed (brand "value highlight"). Always wrap with
   <span class="val">, never with <code>. Uses the surrounding text's font
   so it reads as part of the sentence. */
.val {
  background: #FFD43C;  /* Lemon */
  color: #141538;       /* CF Slide Purple for max contrast on lemon */
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
  border: 1px solid #FBAD41;  /* Mango */
}

/* The big copyable command block */
.cmd {
  display: flex;
  align-items: stretch;
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: 8px;
  overflow: hidden;
  margin: 10px 0 18px;
  border: 1px solid transparent;
}

.cmd code {
  flex: 1;
  padding: 14px 16px;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--code-fg);
  font-size: var(--fs-code);
  /* Override the inline `p code, li code` chip styling so the .cmd box
     stays dark even when nested inside an <li>. */
  background: transparent;
  border: none;
  border-radius: 0;
}

/* Multi-line variant: each line preserved, no horizontal squashing. Used
   when a command block needs to combine `cd <lab-dir>` with the actual
   command so students can copy both in one click. */
.cmd-multi code {
  white-space: pre;
  line-height: 1.6;
}

/* Wrapping variant: for long single-line commands that should soft-wrap
   to fit the container width rather than getting a horizontal scrollbar.
   Breaks on whitespace where possible, falls back to breaking anywhere
   for tokens longer than the container. */
.cmd-wrap code {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.cmd button {
  background: rgba(255,255,255,0.08);
  border: none;
  border-left: 1px solid rgba(255,255,255,0.12);
  color: var(--code-fg);
  padding: 0 18px;
  font-size: var(--fs-ui);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}

.cmd button:hover { background: rgba(255,255,255,0.16); }
.cmd button:active { background: rgba(255,255,255,0.24); }
.cmd button.copied { background: rgba(87, 207, 125, 0.35); }  /* Success Green */

/* Warning callout */
.warn {
  background: var(--warn-bg);
  border-left: 4px solid var(--warn-border);
  color: var(--fg);
  padding: 18px 22px;
  border-radius: 0 6px 6px 0;
  margin: 22px 0;
}

.warn strong { color: var(--fg); }
.warn h2, .warn h3 { margin-top: 0; color: var(--fg); }

/* Tabs (Windows / macOS) */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin: 24px 0 0;
}

.tabs button {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: var(--fs-ui);
  color: var(--fg-muted);
  padding: 12px 22px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.12s, border-color 0.12s;
}

.tabs button:hover { color: var(--fg); }
.tabs button.active {
  color: var(--fg);
  border-bottom-color: var(--cf-orange);
  font-weight: 600;
}

.tab-content { display: none; padding-top: 20px; }
.tab-content.active { display: block; }

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 18px;
  font-size: var(--fs-body);
}

th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  background: #FFE9CB;  /* Light Orange (matches header) */
  font-weight: 700;
  font-size: var(--fs-ui);
  color: #960C3E;  /* Cherry (matches header) */
  border-bottom: 1px solid var(--border-strong);
}

/* Cards */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 26px;
  margin: 18px 0;
}

.card h3 { margin-top: 0; }

/* Checklist style */
.checklist { list-style: none; padding-left: 0; }
.checklist li { padding-left: 28px; position: relative; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-strong);
  border-radius: 3px;
}

/* Top-level track switcher: Compact vs Detailed instructions */
.tracks {
  display: flex;
  gap: 6px;
  margin: 36px 0 24px;
  padding: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.tracks button {
  flex: 1;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--fg-muted);
  padding: 14px 18px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s, color 0.12s;
}

.tracks button:hover {
  color: var(--fg);
  background: var(--bg);
}

.tracks button.active {
  background: var(--cf-orange);
  color: #ffffff;
}

.track-content {
  display: none;
}

.track-content.active {
  display: block;
}

/* Footer */
footer {
  border-top: 1px solid var(--border);
  margin-top: 64px;
  padding: 24px;
  text-align: center;
  color: var(--fg-muted);
  font-size: var(--fs-ui);
}

footer a { color: var(--fg-muted); }

/* ===========================================================================
   Lab-variable input panel (Section 5).
   Student types their AWS IPs + region once; every command block on the page
   updates live and the values are persisted to localStorage so they survive
   page reloads. Placeholders render in the cf-orange brand color while
   unfilled, then turn into normal code text once a value is typed.
   =========================================================================== */
.lab-vars {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 4px solid var(--cf-orange);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 20px 0 28px;
}
.lab-vars h3 { margin-top: 0; }
.lab-vars .row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.lab-vars label {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--fg);
  min-width: 130px;
}
.lab-vars input {
  font-family: "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--fs-code);
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  min-width: 240px;
  flex: 1;
  max-width: 360px;
}
.lab-vars input:focus {
  outline: none;
  border-color: var(--cf-orange);
  box-shadow: 0 0 0 3px rgba(246, 130, 31, 0.25);  /* Tangerine */
}
.lab-vars .hint {
  font-size: var(--fs-ui);
  color: var(--fg-muted);
  margin-top: 8px;
}

/* ===========================================================================
   Per-OS content visibility for sections outside the per-OS tab strip.
   `body[data-os="..."]` is driven by the active OS tab in Section 4; content
   tagged with the matching class shows, the others hide. With no data-os yet
   (JS hasn't run or somehow failed), everything is visible so the page is
   never blank.
   =========================================================================== */
body[data-os="win"]   .os-only-mac,
body[data-os="win"]   .os-only-linux,
body[data-os="mac"]   .os-only-win,
body[data-os="mac"]   .os-only-linux,
body[data-os="linux"] .os-only-win,
body[data-os="linux"] .os-only-mac { display: none; }

/* The substituted span inside a .cmd code block (or anywhere else). When the
   var hasn't been filled in yet, it shows the placeholder text in the brand
   color + italic so it visually screams "type your value above". Once filled,
   it renders inline as plain code text. */
.var {
  /* base: indistinguishable from surrounding text once filled */
}
.var.unfilled {
  color: var(--cf-orange);
  font-style: italic;
  font-weight: 600;
}

/* When .var is inside a .cmd box (which has a dark background and white code
   text), the cf-orange still pops nicely so no override needed. */

/* ===========================================================================
   Mobile / narrow viewport styles
   ---------------------------------------------------------------------------
   Triggers below 720px viewport width (phones + very small tablets in
   portrait). Goals:
     - keep the page from horizontal-scrolling as a whole
     - shrink display type to phone-appropriate sizes
     - let wide tables scroll horizontally inside themselves
     - allow code blocks and command boxes to scroll, never overflow the page
     - keep tap targets >= 44px (Apple HIG / Material recommendation)
   =========================================================================== */
@media (max-width: 720px) {
  /* Shrink the whole type scale as a set. Every element follows because
     they all reference these variables; no per-element font-size needed. */
  :root {
    --fs-h1:   24px;
    --fs-h2:   19px;
    --fs-h3:   16px;
    --fs-body: 16px;
    --fs-code: 13px;
    --fs-ui:   13px;
  }

  main {
    padding: 28px 16px 64px;
  }

  header.brand {
    padding: 12px 16px;
  }
  header.brand .inner {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  /* On narrow screens, drop the centered title to its own full-width line
     so it can't overlap the logo or nav. */
  header.brand .brand-title {
    position: static;
    transform: none;
    order: 3;
    flex-basis: 100%;
    text-align: center;
    pointer-events: auto;
  }
  header.brand nav a {
    margin-left: 0;
    margin-right: 14px;
  }

  h1 { line-height: 1.25; }
  h2 { margin-top: 32px; }

  .lede, .lede-highlight { margin-bottom: 24px; }

  /* Tables become horizontally-scrollable strips so wide content
     doesn't push the whole page sideways. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  th, td {
    padding: 8px 10px;
  }

  /* `<pre>` blocks (e.g. the IAM cleanup commands in the detailed track)
     don't have overflow-x by default. Force it on mobile. */
  pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px !important;
  }

  /* Install one-liner command box: smaller copy button tap target. */
  .cmd code {
    padding: 12px 14px;
  }
  .cmd button {
    padding: 0 12px;
    min-width: 56px;
  }

  /* Compact / Detailed switcher: smaller, but tap targets stay tall enough. */
  .tracks {
    margin: 24px 0 18px;
    padding: 4px;
  }
  .tracks button {
    padding: 12px 10px;
  }

  /* Per-OS tabs (Windows / macOS / Linux). */
  .tabs button {
    padding: 10px 14px;
  }

  /* Warning callouts: less internal padding. */
  .warn {
    padding: 14px 16px;
    margin: 18px 0;
  }

  /* Cards: tighten up. */
  .card {
    padding: 16px 18px;
  }

  /* Footer: less padding. */
  footer {
    padding: 18px 14px;
    margin-top: 40px;
  }
}

/* Even tighter at very small viewports (320-380px iPhone SE etc). */
@media (max-width: 400px) {
  :root { --fs-h1: 22px; --fs-h2: 18px; }
  main { padding: 24px 12px 56px; }
  header.brand { padding: 10px 12px; }
}