/* Home page and Learn index. Layout only: every colour, font and radius comes from
   assets/v3/tokens.css, so all six themes work. The layout is the one the owner chose:
   a large headline with the actions beside it, a slim entry to the animated UVM figure,
   SystemVerilog as the foundation with Assertions, Functional coverage and UVM branching
   from it, the playground behind a disclosure, and the practice formats as an accordion. */

.landing-wrap, .learning-atlas { max-width: 1392px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 56px); }
.signal-landing [hidden] { display: none !important; }
.signal-landing :is(button, a, summary, input):focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 4px; }

/* Track colours: SystemVerilog, assertions, coverage, UVM. */
[data-path="sv"] { --path-accent: var(--ch-sv); }
[data-path="sva"] { --path-accent: var(--ch-sva); }
[data-path="coverage"] { --path-accent: var(--ch-cov); }
[data-path="uvm"] { --path-accent: var(--ch-uvm); }

/* ---------- intro ---------- */
.landing-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: 56px 0 36px; }
.landing-intro h1 { font-size: clamp(68px, 8vw, 112px); font-weight: 760; line-height: .95; letter-spacing: -.02em; word-spacing: .04em; font-stretch: 72%; }
.landing-intro p { margin: 0; font-size: var(--fs-base); line-height: 1.65; color: var(--ink-2); }

/* Hero: the headline beside one measured thread view (tools/templates/v3/hero.mjs), played by
   assets/v3/hero.mjs. The figure is real simulator output, so it sits in a plain card. */
.landing-hero { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; padding: 52px 0 40px; }
.landing-hero h1 { font-size: clamp(60px, 6.6vw, 104px); font-weight: 760; line-height: .95; letter-spacing: -.02em; word-spacing: .04em; font-stretch: 72%; }
.landing-hero-copy p { margin: 24px 0 0; font-size: var(--fs-base); line-height: 1.65; color: var(--ink-2); }
.landing-hero .landing-actions { margin-top: 26px; }
.hero-figure { margin: 0; border: var(--bw) solid var(--rule-strong); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.hero-figure-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 18px; border-bottom: var(--bw) solid var(--rule); }
.hero-figure-head code { padding: 3px 8px; border: 1px solid var(--rule-strong); border-radius: var(--r-chip); background: var(--paper); color: var(--ink); font: 500 14px var(--mono); }
.hero-measured { margin-left: auto; font: 500 13px/1.4 var(--sans); color: var(--ink-2); }
.hero-measured::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--good); vertical-align: 1px; }
.hero-figure-screen { padding: 10px 14px 6px; }
.hero-figure-screen svg { display: block; width: 100%; height: auto; }
.hero-figure figcaption { padding: 14px 18px 16px; border-top: var(--bw) solid var(--rule); }
.hero-figure figcaption p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
.hero-figure figcaption strong { color: var(--ink); }
.hero-figure-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.hero-figure-actions a { color: var(--link); font: 600 var(--fs-sm)/1.4 var(--sans); }
.hero-pause { min-height: 36px; padding: 0 14px; border: var(--bw) solid var(--rule-strong); border-radius: var(--r-ctl); background: transparent; color: var(--ink); font: 600 var(--fs-sm)/1 var(--sans); cursor: pointer; }
.hero-pause:hover { background: var(--paper-2); }
.landing-actions { display: flex; align-items: center; gap: 24px; margin-top: 20px; }
.landing-text-link { display: inline-flex; align-items: center; min-height: 46px; color: var(--ink); font-weight: 700; font-size: 15px; }

/* A slim link to the animated UVM figure, between two rules. */
.animation-entry { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 0; margin: 0 0 24px; border-block: var(--bw) solid var(--rule); color: var(--ink); text-decoration: none; }
.animation-entry-play { flex: 0 0 44px; width: 44px; height: 44px; color: var(--ch-uvm); }
.animation-entry-play circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.animation-entry-play path { fill: currentColor; }
.animation-entry > span { flex: 1; min-width: 0; }
.animation-entry strong { display: block; font-size: var(--fs-base); line-height: 1.4; }
.animation-entry > span > span { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; margin-top: 3px; }
.animation-entry:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.animation-entry-status { flex: 0 0 auto; max-width: 5em; color: var(--muted); font-size: 12px; line-height: 1.4; }

/* ---------- the path map: one foundation, three branches (choices, not levels) ---------- */
.path-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 76px; }
.path-stop { position: relative; display: flex; align-items: center; gap: 20px; padding: 18px 0; color: var(--ink); text-decoration: none; min-width: 0; }
a.path-stop:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--path-accent); }
.path-stop-copy { display: grid; gap: 3px; min-width: 0; }
.path-stop strong { font: 650 32px/1.05 var(--display); font-stretch: var(--display-stretch); }
.path-stop-copy > span { font-size: 15px; color: var(--ink-2); }
.path-stop small { font-size: 12px; line-height: 1.5; color: var(--muted); }
.path-symbol { flex: 0 0 60px; width: 60px; height: 60px; color: var(--path-accent, var(--good)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.path-symbol text { font: 600 16px var(--mono); text-anchor: middle; fill: currentColor; stroke: none; }
.path-symbol circle { fill: currentColor; stroke-width: 1.5; }
.path-symbol .path-symbol-open { fill: none; }
.path-symbol .path-symbol-accent { stroke-width: 2.5; }
.path-origin .path-symbol { width: 100px; height: 100px; flex-basis: 100px; }
.path-origin strong { font-size: clamp(38px, 4vw, 52px); }
.path-origin::after { content: ''; position: absolute; top: 50%; left: 100%; width: 38px; border-top: var(--bw) solid var(--rule-strong); }
.path-branches { position: relative; }
.path-branches::before { content: ''; position: absolute; left: -38px; top: 16.666%; bottom: 16.666%; border-left: var(--bw) solid var(--rule-strong); }
.path-branches .path-stop::before { content: ''; position: absolute; top: 50%; left: -38px; width: 28px; border-top: var(--bw) solid var(--rule-strong); }

/* ---------- sections ---------- */
.landing-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 28px; }
.landing-section-heading h2 { font-size: clamp(38px, 4.5vw, 58px); line-height: 1; }
.landing-section-heading p { max-width: 42ch; margin: 0; font-size: 16px; color: var(--ink-2); }
:is(.landing-paths, .landing-lab) { margin-top: 76px; }
.landing-paths .path-map { padding: 8px 32px; }
summary { cursor: pointer; }
:is(.lab-disclosure, .practice-choices details, .atlas-module) > summary { list-style: none; }
:is(.lab-disclosure, .practice-choices details, .atlas-module) > summary::-webkit-details-marker { display: none; }
.disclosure-chevron { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform var(--dur-1) var(--ease); }
details[open] > summary .disclosure-chevron { transform: rotate(180deg); }
.lab-disclosure { border-top: var(--bw-strong) solid var(--ink); border-bottom: var(--bw) solid var(--rule); background: var(--card); scroll-margin-top: 24px; }
.lab-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; }
.lab-disclosure > summary strong { display: block; font: 650 30px/1.15 var(--display); font-stretch: var(--display-stretch); margin-bottom: 5px; }
.lab-disclosure > summary span span { font-size: var(--fs-sm); color: var(--muted); }
.lab-disclosure-content { padding: 0 20px 16px; }
.lab-full-link { text-align: right; margin: 16px 4px 0; font-size: var(--fs-sm); }
.lab-disclosure .instrument { box-shadow: none; }
.landing-practice { display: grid; grid-template-columns: 1fr 1.15fr; gap: 76px; margin-top: 84px; padding-top: 36px; border-top: var(--bw) solid var(--rule); }
.landing-practice h2 { font-size: clamp(44px, 5vw, 68px); line-height: .98; }
.landing-practice > div > p { max-width: 28ch; font-size: 16px; color: var(--ink-2); margin: 24px 0; }
.practice-choices details { border-bottom: var(--bw) solid var(--rule); }
.practice-choices details:first-child { border-top: var(--bw) solid var(--rule); }
.practice-choices summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 19px 0; }
.practice-choices summary:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.practice-choices h3 { font: 650 32px/1.1 var(--display); font-stretch: var(--display-stretch); }
.practice-choices p { max-width: 48ch; font-size: 16px; margin: 0 0 22px; color: var(--ink-2); }

/* The simple footer these two pages had: a hairline, the brand, one line, the links. */
.signal-landing .site-footer { border-top: var(--bw) solid var(--rule); padding: 28px var(--gutter) 40px; }
.signal-landing .title-block { display: grid; grid-template-columns: 1fr; gap: 10px; border: 0; }
.signal-landing .title-block > * { padding: 0; }
.signal-landing .title-block > * + * { border: 0; }
.signal-landing .title-block-brand .brand-name { font-size: 18px; }
.signal-landing .title-block-note { color: var(--muted); font-size: 15px; }
.signal-landing .title-block nav { gap: 6px 18px; font-size: 15px; }

/* ---------- Learn index (atlas) ---------- */
.atlas-intro { display: grid; grid-template-columns: .9fr 1.25fr; align-items: center; gap: 56px; padding: 52px 0 48px; }
.atlas-intro h1 { font-size: clamp(62px, 6.3vw, 90px); font-weight: 760; line-height: .95; letter-spacing: -.015em; font-stretch: 72%; }
.atlas-intro > div > p { max-width: 30ch; font-size: var(--fs-base); color: var(--ink-2); margin: 24px 0 0; }
.atlas-intro .path-map { gap: 44px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.atlas-intro .path-stop { gap: 10px; padding: 14px 0; align-items: flex-start; }
.atlas-intro .path-symbol { width: 36px; height: 36px; flex-basis: 36px; }
.atlas-intro .path-origin { flex-direction: column; }
.atlas-intro .path-origin .path-symbol { width: 64px; height: 64px; flex-basis: 64px; }
.atlas-intro .path-stop strong { font-size: 27px; }
.atlas-intro .path-origin strong { font-size: 32px; }
.atlas-intro .path-stop-copy > span { font-size: 13px; }
.atlas-intro .path-origin::after { width: 22px; }
.atlas-intro .path-branches::before { left: -22px; }
.atlas-intro .path-branches .path-stop::before { left: -22px; width: 15px; }
.atlas-toolbar { border-top: var(--bw-strong) solid var(--ink); padding: 28px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.atlas-toolbar h2 { font-size: var(--fs-2xl); }
.atlas-toolbar p { color: var(--muted); font-size: var(--fs-sm); margin: 6px 0 0; }
.atlas-search { width: 370px; max-width: 100%; }
.atlas-search label { display: block; color: var(--ink-2); font: 600 var(--fs-xs) var(--display); font-stretch: var(--legend-stretch); margin-bottom: 5px; }
.atlas-search > div { display: flex; align-items: center; gap: 10px; padding: 0 12px; border: var(--bw) solid var(--rule-strong); border-radius: var(--r-ctl); background: var(--card); }
.atlas-search > div:focus-within { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
.atlas-search svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.5; }
.atlas-search input { width: 100%; min-width: 0; border: 0; background: none; color: var(--ink); min-height: 46px; font: 400 15px/1.5 var(--sans); padding: 4px 0; outline: none; }
.atlas-search input:focus-visible { outline: none; }
.atlas-search input::placeholder { color: var(--muted); opacity: 1; }
.atlas-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.atlas-search button { min-height: 44px; border: 0; background: none; color: var(--link); padding: 4px; font: 600 13px var(--sans); cursor: pointer; }
.atlas-search .atlas-search-status { font-size: 13px; min-height: 1.65em; margin: 4px 0 0; }
.atlas-track { display: grid; grid-template-columns: minmax(200px, .85fr) minmax(0, 1.75fr); gap: 56px; padding: 36px 0; border-top: var(--bw) solid var(--rule); scroll-margin-top: 20px; }
.atlas-track-head { position: sticky; top: 28px; align-self: start; display: flex; align-items: flex-start; gap: 14px; padding-top: 12px; }
.atlas-track-head .path-symbol { flex-basis: 44px; width: 44px; height: 44px; }
.atlas-track-head h2 { font-size: var(--fs-2xl); scroll-margin-top: 36px; }
.atlas-track-head p { max-width: 27ch; margin: 12px 0; font-size: 15px; color: var(--ink-2); }
.atlas-track-head .atlas-question { font: 600 var(--fs-xs) var(--display); font-stretch: var(--legend-stretch); margin: 0 0 6px; color: var(--path-accent); }
.atlas-track-status { color: var(--muted); font: 500 12.5px var(--mono); }
.atlas-modules, .atlas-lessons { list-style: none; padding: 0; margin: 0; }
.atlas-module { border-bottom: var(--bw) solid var(--rule); scroll-margin-top: 24px; }
.atlas-module summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 20px; align-items: center; column-gap: 14px; min-height: 72px; padding: 14px 0; }
.atlas-module summary:hover h3 { text-decoration: underline; text-decoration-color: var(--path-accent); text-underline-offset: 4px; }
/* Module numbers as line bullets in the track's colour. */
.atlas-module-id { display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 5px; border: 2px solid var(--path-accent); border-radius: var(--r-pill); color: var(--ink); font: 700 12.5px/1 var(--mono); }
.atlas-module h3 { font: 600 19px/1.35 var(--sans); text-wrap: initial; }
.atlas-module-count { font: 500 12.5px var(--mono); color: var(--muted); white-space: nowrap; }
.atlas-module-content { padding: 0 0 22px 58px; }
.atlas-module-description { margin: 0 0 14px; color: var(--muted); font-size: 15px; max-width: 60ch; }
.atlas-lessons li { display: flex; align-items: center; gap: 12px; border-top: var(--bw) solid var(--rule); scroll-margin-top: 32px; }
.atlas-lessons :is(a, .atlas-unavailable) { display: flex; align-items: baseline; gap: 16px; flex: 1; min-width: 0; min-height: 44px; padding: 10px 0; font-size: 15.5px; line-height: 1.45; text-decoration: none; color: var(--ink); }
.atlas-lessons a:hover { text-decoration: underline; text-decoration-color: var(--path-accent); }
.atlas-lesson-id { min-width: 3.4em; font: 500 12.5px/1.6 var(--mono); color: var(--muted); }
.atlas-draft { font-size: 12px; color: var(--muted); }
.atlas-lessons .atlas-unavailable { color: var(--muted); }
.atlas-empty { padding: 28px 0; border-top: var(--bw) solid var(--rule); color: var(--muted); }
.atlas-practice { display: flex; justify-content: space-between; align-items: center; gap: 32px; border-top: var(--bw-strong) solid var(--ink); margin-top: 36px; padding-top: 32px; }
.atlas-practice h2 { font-size: var(--fs-2xl); }
.atlas-practice p { color: var(--ink-2); margin: 10px 0 0; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .landing-hero { grid-template-columns: 1fr; padding-top: 40px; }
  .landing-hero h1 { font-size: clamp(60px, 10vw, 100px); }
  .landing-intro { align-items: flex-start; }
  .landing-intro h1 { max-width: 5.4em; }
  .landing-intro > div { padding-top: 8px; }
  .atlas-intro { gap: 36px; grid-template-columns: .8fr 1.2fr; }
  .atlas-intro .path-stop strong { font-size: 24px; }
  .atlas-intro .path-origin strong { font-size: 28px; }
  .atlas-track { gap: 32px; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.4fr); }
  .atlas-track-head { display: block; }
  .atlas-track-head .path-symbol { margin-bottom: 12px; }
}
@media (max-width: 800px) {
  .landing-hero { padding-top: 32px; gap: 28px; }
  .hero-figure-head, .hero-figure figcaption { padding-left: 14px; padding-right: 14px; }
  .hero-figure-screen { padding: 6px 4px 2px; }
  .hero-measured { margin-left: 0; }
  .landing-intro { display: block; padding-top: 36px; }
  .landing-intro h1 { max-width: none; font-size: clamp(60px, 11vw, 88px); }
  .landing-intro > div { padding-top: 24px; }
  .landing-section-heading { display: block; }
  .landing-section-heading p { margin-top: 18px; }
  .landing-paths .path-map { padding: 0; }
  .path-map { gap: 44px; }
  .path-origin { flex-direction: column; align-items: flex-start; }
  .path-origin::after { width: 22px; }
  .path-branches::before { left: -22px; }
  .path-branches .path-stop::before { left: -22px; width: 15px; }
  .path-stop { gap: 12px; }
  .path-stop .path-symbol { width: 44px; height: 44px; flex-basis: 44px; }
  .path-origin .path-symbol { width: 76px; height: 76px; flex-basis: 76px; }
  .path-stop strong { font-size: 29px; }
  .path-origin strong { font-size: 38px; }
  .landing-practice { gap: 44px; grid-template-columns: 1fr 1.1fr; }
  .atlas-intro { display: block; padding-top: 36px; }
  .atlas-intro h1 { font-size: clamp(62px, 10vw, 82px); }
  .atlas-intro > div > p { max-width: 46ch; }
  .atlas-intro .path-map { margin-top: 32px; padding: 0 12px; grid-template-columns: 1fr 1.3fr; }
  .atlas-intro .path-origin { flex-direction: row; align-items: center; }
  .atlas-intro .path-stop { gap: 16px; }
  .atlas-intro .path-stop strong { font-size: 29px; }
  .atlas-toolbar { gap: 24px; }
  .atlas-search { width: 310px; }
  .atlas-track { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .atlas-track-head { position: static; display: flex; padding: 0; gap: 14px; }
  .atlas-track-head .path-symbol { margin-bottom: 0; }
  .atlas-track-head p { max-width: 50ch; margin: 8px 0; }
}
@media (max-width: 580px) {
  /* One full-width foundation, then indented branches. Keep both page variants
     together so atlas-specific desktop rules cannot reinstate cramped columns. */
  :is(.landing-paths, .atlas-intro) .path-map { display: block; padding: 0; }
  :is(.landing-paths, .atlas-intro) .path-stop { gap: 14px; padding: 18px 0; align-items: center; }
  :is(.landing-paths, .atlas-intro) .path-origin { flex-direction: row; gap: 16px; }
  :is(.landing-paths, .atlas-intro) .path-origin .path-symbol { width: 64px; height: 64px; flex-basis: 64px; }
  :is(.landing-paths, .atlas-intro) .path-origin::after { top: 100%; left: 31px; width: 0; height: 14px; border-top: 0; border-left: var(--bw) solid var(--rule-strong); }
  :is(.landing-paths, .atlas-intro) .path-branches { margin-top: 14px; margin-left: 31px; padding-left: 30px; }
  :is(.landing-paths, .atlas-intro) .path-branches::before { display: none; }
  :is(.landing-paths, .atlas-intro) .path-branches .path-stop::before { left: -30px; width: 22px; }
  :is(.landing-paths, .atlas-intro) .path-branches .path-stop::after { content: ''; position: absolute; left: -30px; top: 0; bottom: 0; border-left: var(--bw) solid var(--rule-strong); }
  :is(.landing-paths, .atlas-intro) .path-branches .path-stop:last-child::after { bottom: 50%; }
  :is(.landing-paths, .atlas-intro) .path-branches .path-symbol { width: 40px; height: 40px; flex-basis: 40px; }
  :is(.landing-paths, .atlas-intro) .path-stop strong { font-size: 30px; }
  :is(.landing-paths, .atlas-intro) .path-origin strong { font-size: 34px; }
  :is(.landing-paths, .atlas-intro) .path-stop-copy > span { font-size: 14px; }
  :is(.landing-paths, .atlas-intro) .path-stop small { font-size: 12px; }
  :is(.landing-paths, .landing-lab) { margin-top: 56px; }
  .lab-disclosure > summary { padding: 20px 16px; }
  .lab-disclosure-content { padding: 0 8px 16px; }
  .lab-disclosure .instrument { padding: 14px 10px; }
  .lab-disclosure .pg-actions { gap: 8px; }
  .lab-disclosure .pg-actions .btn { padding: 0 12px; }
  .landing-practice { grid-template-columns: 1fr; gap: 28px; margin-top: 60px; }
  .landing-practice h2 { font-size: 56px; }
  .landing-practice > div > p { max-width: 34ch; margin: 18px 0; }
  .atlas-toolbar { display: block; padding: 24px 0 16px; }
  .atlas-search { width: 100%; margin-top: 20px; }
  .atlas-module summary { grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 4px 10px; }
  .atlas-module h3 { font-size: 17px; }
  .atlas-module-count { grid-column: 2; grid-row: 2; }
  .atlas-module .disclosure-chevron { grid-column: 3; grid-row: 1 / span 2; }
  .atlas-module-content { padding-left: 0; }
  .atlas-lessons :is(a, .atlas-unavailable) { gap: 10px; font-size: 14.5px; }
  .atlas-practice { display: block; }
  .atlas-practice .btn { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .disclosure-chevron { transition: none; }
}