/* =========================================================================
   hacker.hamcodes.com/free-course/
   Everything that belongs to the course page and nowhere else: the contents
   rail, the module furniture, the seven diagrams and the resource lists.

   It loads on top of ../styles.css, which supplies the room, the type, the
   header, the buttons and the footer.

   This used to live in styles.css. It moved here when the landing page was
   rebuilt, because none of it is used anywhere else.

   The landing page is one green. This page is not, and deliberately so.

   Red team, blue team and purple team are the subject here, not decoration:
   seven diagrams sort roles, certifications and career paths into those
   three, and the prose names them by colour throughout. Rendering all three
   in green was tried and it read as one undifferentiated thing, so the team
   colours are the real ones. Colour is data on this page.
   ========================================================================= */

:root {
  /* surfaces the course page asks for, in the new room */
  --surface:   var(--ink-1);
  --surface-2: var(--ink-2);
  --surface-3: #141d1f;
  --line-2:    rgba(215, 228, 224, .16);
  --shadow:    var(--lift-sm);

  /* The three teams, in their own colours. These are the values the
     diagrams and the copy were written against. Do not fold them into the
     green: the whole page is about telling the three apart. */
  --red:    #ff3d5f;   /* red team, offence */
  --cyan:   #38e1ff;   /* blue team, defence */
  --purple: #b57bff;   /* purple team, the bridge */
  --amber:  #f5b942;   /* a caution, not a team */
}

/* the course page's own eyebrow, which predates .label on the landing page */
.eyebrow {
  font-family: var(--mono); font-weight: 600; font-size: .82rem; letter-spacing: .06em;
  color: var(--green); display: inline-flex; align-items: center; gap: .5em; margin-bottom: 1rem;
}
.eyebrow::before { content: "> "; color: var(--green-dim); }
.hl-g { color: var(--green); }
.hl-r { color: var(--red); }
.hl-c { color: var(--cyan); }

/* ---------- Free course page ---------- */
.course-hero { padding-bottom: clamp(30px, 4vw, 50px); }
.course-hero h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
.course-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 0; }
.course-meta span {
  font-family: var(--mono); font-size: .8rem; font-weight: 600; padding: .4em .85em;
  border-radius: 6px; border: 1px solid var(--line-2); color: var(--muted);
}
.course-meta span b { color: var(--green); font-weight: 700; }

/* Module index: a contents rail that sticks while you read. */
.course-body { display: grid; grid-template-columns: 210px 1fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
/* Grid tracks default to min-width:auto, so one wide diagram would otherwise
   stretch the whole column past the viewport and clip the prose beside it. */
.course-body > * { min-width: 0; }
.course-toc { position: sticky; top: 92px; }
.course-toc h4 {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 .9rem;
}
.course-toc a {
  display: block; font-family: var(--mono); font-size: .84rem; color: var(--muted);
  padding: .42em 0 .42em .8em; border-left: 2px solid var(--line); text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.course-toc a:hover, .course-toc a.on { color: var(--green); border-left-color: var(--green); }
.course-toc a i { font-style: normal; color: var(--dim); margin-right: .5em; }
.course-toc a:hover i, .course-toc a.on i { color: var(--green-dim); }
@media (max-width: 860px) {
  .course-body { grid-template-columns: 1fr; }
  .course-toc {
    position: static; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
    padding-bottom: .5rem; border-bottom: 1px solid var(--line);
  }
  .course-toc::-webkit-scrollbar { display: none; }
  .course-toc h4 { display: none; }
  .course-toc a { white-space: nowrap; border-left: 0; border-bottom: 2px solid var(--line); padding: .4em .6em; }
  .course-toc a:hover, .course-toc a.on { border-left: 0; border-bottom-color: var(--green); }
}

.mod { padding-top: 10px; margin-bottom: clamp(48px, 7vw, 86px); scroll-margin-top: 92px; }
.mod-num {
  font-family: var(--mono); font-weight: 700; font-size: .82rem; color: var(--green);
  letter-spacing: .08em; display: block; margin-bottom: .5rem;
}
.mod h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.mod > p, .mod li { color: var(--muted); }
.mod p { margin: 0 0 1.1em; line-height: 1.75; }
.mod h3 { margin: 1.8em 0 .6em; color: var(--text); }
.mod ul, .mod ol { margin: 0 0 1.2em; padding-left: 1.2em; line-height: 1.7; }
.mod li { margin-bottom: .5em; }
.mod li b, .mod p b { color: var(--text); }
.mod a { color: var(--green); }
.mod code {
  font-family: var(--mono); font-size: .88em; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 5px; padding: .12em .45em; color: var(--green);
}

/* Each module ends with something to actually go and do. */
.do-now {
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-left: 3px solid var(--green); border-radius: var(--radius-sm);
  padding: 18px 20px; margin: 1.6em 0 0;
}
.do-now h4 {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green); margin: 0 0 .7rem;
}
.do-now p, .do-now li { color: var(--muted); font-size: .94rem; margin-bottom: .45em; }
.do-now ul { margin: 0; padding-left: 1.1em; }

/* Role colour coding, same language the rest of the site uses. */
.role-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 1.4em 0 1.8em; }
.role {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px; background: var(--surface-2); border-top: 3px solid var(--line-2);
}
.role.red { border-top-color: var(--red); } .role.red b { color: var(--red); }
.role.blue { border-top-color: var(--cyan); } .role.blue b { color: var(--cyan); }
.role.purple { border-top-color: var(--purple); } .role.purple b { color: var(--purple); }
.role b { font-family: var(--mono); font-size: .84rem; letter-spacing: .05em; display: block; margin-bottom: .5em; }
.role span { color: var(--muted); font-size: .9rem; }
@media (max-width: 720px) { .role-row { grid-template-columns: 1fr; } }

/* Interview questions read as a list of prompts, not prose. */
.qbank { list-style: none; padding: 0; margin: 0 0 1.4em; }
.qbank li {
  border-left: 2px solid var(--line-2); padding: .2em 0 .2em .9em; margin-bottom: .8em;
  font-family: var(--mono); font-size: .9rem; color: var(--text);
}
.qbank li em { display: block; font-family: var(--body); font-style: normal; color: var(--muted); font-size: .95em; margin-top: .35em; }

/* ---------- Diagrams ----------
   Every figure is an inline SVG drawn in the site palette. They keep a
   min-width so a phone scrolls them sideways rather than crushing them. */
.fig { margin: 1.8em 0 2em; }
.fig-lead { margin: 0 0 clamp(36px, 6vw, 64px); }
.fig-box {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: clamp(12px, 2.2vw, 20px);
  max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  /* Two layers: the first scrolls with the content, the second stays pinned to
     the right edge. The fade is therefore only visible while more diagram
     remains, which is what makes it read as scrollable rather than as cut off. */
  background:
    linear-gradient(var(--surface), var(--surface)) left center / 100% 100% no-repeat local,
    linear-gradient(90deg, rgba(6,9,10,0), rgba(6,9,10,.92)) right center / 44px 100% no-repeat scroll;
}
.fig-box::-webkit-scrollbar { height: 8px; }
.fig-box::-webkit-scrollbar-track { background: transparent; }
.fig-box::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.fig-box::-webkit-scrollbar-thumb:hover { background: var(--green-dim); }
.dgm { display: block; width: 100%; height: auto; min-width: 560px; }
.fig figcaption {
  font-family: var(--mono); font-size: .8rem; line-height: 1.75;
  color: var(--dim); margin-top: .9rem;
}
.fig figcaption b { color: var(--muted); }
.fig figcaption a { color: var(--green-dim); }
.fig figcaption a:hover { color: var(--green); }

/* Shared diagram type scale. */
.d-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; fill: var(--dim); }
.d-meta    { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; fill: var(--muted); }
.d-body    { font-family: var(--body); font-size: 13px; fill: var(--muted); }
.d-body-l  { font-family: var(--body); font-size: 14px; fill: var(--text); }
.d-name    { font-family: var(--display); font-size: 15px; font-weight: 600; fill: var(--text); }
.d-name-s  { font-family: var(--display); font-size: 14px; font-weight: 600; fill: var(--text); }
.d-num     { font-family: var(--display); font-size: 22px; font-weight: 700; fill: var(--green); }
.d-big     { font-family: var(--display); font-size: 30px; font-weight: 700; }
.d-mid     { font-family: var(--display); font-size: 19px; font-weight: 700; }
.d-out     { font-family: var(--mono); font-size: 11.5px; fill: var(--green); }
.d-lbl     { font-family: var(--body); font-size: 13px; fill: var(--text); }
.d-val     { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
.d-g   { fill: var(--green); }
.d-r   { fill: var(--red); }
.d-b   { fill: var(--cyan); }
.d-p   { fill: var(--purple); }
.d-dim { fill: var(--dim); }
.d-hi  { fill: var(--green); }

.d-axis  { stroke: var(--line-2); stroke-width: 1; }
.d-tick  { stroke: var(--green-dim); stroke-width: 1; stroke-dasharray: 3 3; }
.d-grid  { stroke: var(--line); stroke-width: 1; }
.d-grid-v line { stroke: var(--line); stroke-width: 1; }

/* 1. Roadmap staircase. */
.d-step rect { fill: var(--green-dim); stroke: var(--green); stroke-width: 1; }
.d-trend { fill: none; stroke: var(--green-dim); stroke-width: 1.2; stroke-dasharray: 4 5; opacity: .8; }
.d-card rect { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1; }
.d-return { fill: none; stroke: var(--green-dim); stroke-width: 1.2; stroke-dasharray: 5 5; }
.d-arrow { fill: var(--green-dim); }

/* 2. Red, blue and purple. */
.d-c-r    { fill: var(--red);    fill-opacity: .10; stroke: var(--red);    stroke-width: 1.2; }
.d-c-b    { fill: var(--cyan);   fill-opacity: .10; stroke: var(--cyan);   stroke-width: 1.2; }
.d-c-lens { fill: var(--purple); fill-opacity: .20; stroke: var(--purple); stroke-width: 1.2; }
.d-sw-r { fill: var(--red); } .d-sw-b { fill: var(--cyan); } .d-sw-p { fill: var(--purple); }

/* 3. Education matrix. */
.d-hd-b  { fill: rgba(56,225,255,.10);  stroke: rgba(56,225,255,.30);  stroke-width: 1; }
.d-hd-r  { fill: rgba(255,61,95,.10);   stroke: rgba(255,61,95,.30);   stroke-width: 1; }
.d-hd-p  { fill: rgba(181,123,255,.10); stroke: rgba(181,123,255,.30); stroke-width: 1; }
.d-rowhl { fill: rgba(36,255,156,.05);  stroke: rgba(36,255,156,.22);  stroke-width: 1; }
.d-v     { stroke: var(--line); }

/* 4. Lab ladder. */
.d-annot   { stroke: var(--red); stroke-width: 1.2; fill: none; }
.d-annot-h { fill: var(--red); }

/* 5. Content types. */
.d-node      { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1; }
.d-node-root { fill: rgba(36,255,156,.07); stroke: var(--green); stroke-width: 1.2; }
.d-link      { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.d-dot circle{ fill: var(--green); opacity: .85; }

/* 6. Validity chart. */
.d-bar       { fill: rgba(36,255,156,.14); stroke: rgba(36,255,156,.40); stroke-width: 1; }
.d-bar-hi    { fill: rgba(36,255,156,.30); stroke: var(--green); stroke-width: 1.2; }
.d-bar-ghost { fill: none; stroke: var(--dim); stroke-width: 1; stroke-dasharray: 4 4; }

/* 7. Pipelining. */
.d-band       { fill: rgba(181,123,255,.07); stroke: rgba(181,123,255,.18); stroke-width: 1; }
.d-track      { stroke: var(--line-2); stroke-width: 2; }
.d-track-live { stroke: var(--purple); stroke-width: 2; }
.d-node-o circle  { fill: var(--surface); stroke: var(--line-2); stroke-width: 2; }
.d-node-live circle { stroke: var(--purple); }
.d-node-stall { fill: var(--surface); stroke: var(--dim); stroke-width: 1.5; stroke-dasharray: 3 3; }
.d-node-offer { fill: var(--purple); }
.d-lev   { fill: none; stroke: var(--purple); stroke-width: 1.4; stroke-dasharray: 5 4; }
.d-lev-h { fill: var(--purple); }

@media (max-width: 860px) {
  /* Held wide on purpose. Squeezing these to 360px makes the labels
     unreadable, so they stay legible and scroll sideways instead. */
  .dgm { min-width: 620px; }
  .fig-box { padding: 14px 16px 12px; }
  .fig figcaption::before {
    content: "\2194  swipe the diagram";
    display: block; color: var(--green); font-size: .7rem; letter-spacing: .1em;
    margin-bottom: .6em;
  }
  .fig-lead { margin-bottom: clamp(28px, 6vw, 44px); }
}

/* ---------- Resource lists ----------
   Every entry is a real, checked link: name, what it costs, then our own
   one line on why it is here. Badges carry the cost so the free rows are
   scannable without reading a word. */
.reslist { list-style: none; padding: 0; margin: 0 0 1.8em; }
.reslist li {
  border-top: 1px solid var(--line); padding: .85em 0 .9em;
  display: grid; grid-template-columns: 1fr auto; gap: .2em 1rem; align-items: baseline;
}
.reslist li:last-child { border-bottom: 1px solid var(--line); }
.reslist li > a {
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-2);
}
.reslist li > a:hover { color: var(--green); border-bottom-color: var(--green); }
.reslist li em {
  grid-column: 1 / -1; font-style: normal; color: var(--muted);
  font-size: .93rem; line-height: 1.65;
}
.reslist li em a { color: var(--green); }
.tags { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.tags i, .source-note i {
  font-style: normal; font-family: var(--mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .07em; padding: .28em .6em; border-radius: 4px; white-space: nowrap;
  border: 1px solid var(--line-2); color: var(--dim);
}
.t-free   { border-color: rgba(36,255,156,.45) !important; color: var(--green) !important; }
.t-cert   { border-color: rgba(36,255,156,.45) !important; color: var(--green) !important; }
.t-paid   { border-color: var(--line-2) !important; color: var(--dim) !important; }
.t-cheap  { border-color: rgba(245,185,66,.45) !important; color: var(--amber) !important; }
.t-costly { border-color: rgba(255,61,95,.40)  !important; color: var(--red) !important; }
.t-spec   { border-color: rgba(181,123,255,.45) !important; color: var(--purple) !important; }
@media (max-width: 560px) {
  .reslist li { grid-template-columns: 1fr; }
  .tags { justify-content: flex-start; margin-top: .15em; }
}

/* Lane headings inside a resource list. */
.mod h4.track {
  font-family: var(--display); font-size: 1.25rem; margin: 1.9em 0 .2em;
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
}
.mod h4.track.r { color: var(--red); }
.mod h4.track.b { color: var(--cyan); }
.mod h4.track.p { color: var(--purple); }
.mod h4.track span {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); font-weight: 400;
}

/* Says plainly whose roadmap this is, at the top rather than in the footer. */
.source-note {
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-left: 3px solid var(--green); border-radius: var(--radius-sm);
  padding: 16px 20px; margin: 0 0 clamp(36px, 6vw, 60px);
  color: var(--muted); font-size: .93rem; line-height: 1.75;
}
.source-note b { color: var(--text); }
.source-note a { color: var(--green); }
.source-note i { display: inline-block; vertical-align: 1px; }

/* A single line lifted from somewhere, set apart without a full pull quote. */
.quote-line {
  font-family: var(--mono); font-size: .88rem; color: var(--muted);
  border-left: 2px solid var(--green-dim); padding: .1em 0 .1em .9em;
  margin: 0 0 1.4em;
}

/* Sub headings inside a long module. */
.sub-h {
  font-family: var(--mono); font-size: .84rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green); margin: 1.8em 0 .6em;
}

/* The AI tells, four panels so the density of the list is visible at a glance. */
.tells { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0 0 1.6em; }
.tell {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 16px 18px;
}
.tell > b {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green); display: block; margin-bottom: .7rem;
}
.tell ul { margin: 0; padding-left: 1.05em; }
.tell li { color: var(--muted); font-size: .9rem; line-height: 1.6; margin-bottom: .45em; }
.tell li b { color: var(--text); }
.tell li i { font-family: var(--mono); font-style: normal; color: var(--text); font-size: .95em; }
@media (max-width: 720px) { .tells { grid-template-columns: 1fr; } }

/* Credit to the work that inspired the format, kept visible rather than buried. */
.credit {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px 20px; margin-top: 10px;
}
.credit p { color: var(--muted); font-size: .92rem; margin: 0; line-height: 1.7; }
.credit a { color: var(--green); }

/* The iframe is framed like a terminal window so it reads as part of the page
   rather than as an advert bolted on. */
.hpy-play {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  overflow: hidden; background: #05080d;
  box-shadow: 0 0 0 1px rgba(36,255,156,.06), var(--shadow);
}
.hpy-play-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.hpy-play-bar .mono { font-size: .74rem; color: var(--muted); margin-left: 6px; }
.hpy-play-bar .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.hpy-play-bar .dot.r { background: #ff5f57; }
.hpy-play-bar .dot.y { background: #febc2e; }
.hpy-play-bar .dot.g { background: #28c840; }

/* Height is a starting guess only. app.js resizes it to the real content
   height as soon as the course reports in. */
.hpy-frame { display: block; width: 100%; height: 620px; border: 0; background: #05080d; transition: height .2s ease; }
@media (prefers-reduced-motion: reduce) { .hpy-frame { transition: none; } }

.hpy-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-top: 26px;
}
.hpy-foot .note { color: var(--muted); font-size: .82rem; margin: 0; }
@media (max-width: 620px) {
  .hpy-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .hpy-foot .btn { justify-content: center; }
}