/* V2 editorial layout for the Reaktormap Control Room. */
body.howto-page.nuclear-v2 {
  min-height: 100vh;
  overflow-x: clip;
  background: var(--v2-paper);
  color: var(--v2-ink);
  line-height: 1.5;
}

.howto-page .howto-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--v2-paper) 88%, transparent);
  border-bottom-color: color-mix(in srgb, var(--v2-line) 72%, transparent);
  backdrop-filter: blur(18px);
}

.howto-page .howto-site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  gap: 16px;
}

.howto-site-header .site-brand { margin-right: 0; }
.howto-site-header .site-header-link { margin-left: 0; }

.howto-header-nav {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
  min-width: 0;
}

.howto-page .howto-header-search {
  justify-self: center;
  width: min(46vw, 520px);
}

.howto-page .nuclear-search-dialog-input {
  padding: 9px 14px 9px 40px;
  background: color-mix(in srgb, var(--v2-paper) 70%, transparent);
  border-color: var(--v2-line);
  border-radius: 999px;
  font-size: 14px;
}

.howto-page .nuclear-search-dialog-input-icon { left: 14px; }

.howto-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 96px);
  display: grid;
  overflow: hidden;
  border-bottom: 1px solid var(--v2-line);
}

.howto-hero-shell {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(32px, 6vh, 84px);
  padding-block: clamp(30px, 5vh, 70px) clamp(38px, 6vh, 76px);
}

.howto-hero-top,
.howto-hero-bottom,
.howto-hero-composition,
.howto-section-heading,
.howto-example-title,
.howto-footer-callout,
.howto-footer,
.howto-footer nav,
.howto-toc,
.howto-path,
.howto-presets {
  display: flex;
  align-items: center;
}

.howto-hero-top,
.howto-hero-composition,
.howto-section-heading,
.howto-example-title,
.howto-footer-callout { justify-content: space-between; }

.howto-motion-toggle {
  border: 0;
  padding: 8px 0;
  background: transparent;
  color: var(--v2-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.howto-hero-composition {
  align-items: end;
  gap: clamp(28px, 7vw, 110px);
}

.howto-hero h1 {
  max-width: 1100px;
  margin: 0;
  color: var(--v2-ink);
  font-family: var(--v2-display);
  font-size: clamp(54px, 8vw, 132px);
  line-height: .84;
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.howto-hero h1 span { color: var(--story-lime); }

.howto-orbit {
  position: relative;
  flex: 0 0 clamp(220px, 24vw, 350px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--story-lime) 42%, transparent);
  border-radius: 50%;
  animation: howto-orbit-turn 22s linear infinite;
}

.howto-orbit::before,
.howto-orbit::after {
  content: "";
  position: absolute;
  inset: 16% -7%;
  border: 1px solid color-mix(in srgb, var(--story-lime) 32%, transparent);
  border-radius: 50%;
  transform: rotate(55deg);
}

.howto-orbit::after { inset: -7% 16%; transform: rotate(-38deg); }

.howto-orbit-core {
  position: absolute;
  inset: 31%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--story-lime);
  color: var(--story-stripe-text);
  font-size: clamp(36px, 5vw, 70px);
  animation: howto-orbit-counterturn 22s linear infinite;
}

.howto-orbit-label {
  position: absolute;
  padding: 5px 9px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  background: var(--v2-paper);
  color: var(--v2-ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: howto-orbit-counterturn 22s linear infinite;
}

.howto-orbit-label--one { left: -7%; top: 45%; }
.howto-orbit-label--two { left: 38%; top: -5%; }
.howto-orbit-label--three { right: -9%; top: 50%; }
.howto-orbit-label--four { bottom: -3%; left: 37%; }
.howto-orbit-label--five { left: 4%; top: 13%; }

@keyframes howto-orbit-turn { to { transform: rotate(360deg); } }
@keyframes howto-orbit-counterturn { to { transform: rotate(-360deg); } }

.howto-hero-bottom {
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.howto-hero-bottom > p {
  max-width: 570px;
  margin: 0;
  color: var(--v2-muted);
  font-size: clamp(16px, 1.35vw, 21px);
}

.howto-scroll-note { color: var(--v2-muted); text-align: right; }

.howto-chapter-nav {
  position: sticky;
  top: 54px;
  z-index: 900;
  border-bottom: 1px solid var(--v2-line);
  background: color-mix(in srgb, var(--v2-paper) 91%, transparent);
  backdrop-filter: blur(18px);
}

.howto-toc {
  min-height: 62px;
  gap: clamp(18px, 4vw, 54px);
  overflow-x: auto;
  scrollbar-width: none;
}

.howto-toc::-webkit-scrollbar { display: none; }
.howto-toc-label { margin-right: auto; color: var(--v2-muted); }

.howto-toc a {
  position: relative;
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
}

.howto-toc-number { color: var(--story-lime); font-size: 10px; }
.howto-toc a::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--story-lime); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.howto-toc a:hover,
.howto-toc a[aria-current="location"] { color: var(--v2-ink); }
.howto-toc a[aria-current="location"]::after { transform: scaleX(1); }

.howto-section { padding-block: clamp(90px, 11vw, 170px); }
.howto-map-section,
.howto-country-section { scroll-margin-top: 110px; }

.howto-section-heading {
  align-items: end;
  gap: 40px;
  margin-bottom: clamp(42px, 6vw, 84px);
}

.howto-section-heading h2 {
  max-width: 1050px;
  margin: 9px 0 0;
  color: var(--v2-ink);
  font-family: var(--v2-display);
  font-size: clamp(46px, 6vw, 98px);
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.howto-section-heading h2 span { color: var(--story-lime); }
.howto-section-heading > p { max-width: 390px; margin: 0; color: var(--v2-muted); font-size: 14px; }

.howto-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
}

.howto-example,
.howto-panel,
.howto-note,
.howto-control-demo,
.howto-steps li {
  border: 1px solid var(--v2-line);
  background: color-mix(in srgb, var(--v2-paper) 92%, transparent);
}

.howto-example { overflow: hidden; border-radius: var(--v2-radius); }
.howto-example iframe { display: block; width: 100%; height: clamp(340px, 33vw, 500px); border: 0; border-bottom: 1px solid var(--v2-line); background: var(--map-bg); }
.howto-example-copy { min-height: 250px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(22px, 3vw, 38px); }
.howto-example-title { width: 100%; align-items: baseline; gap: 14px; }
.howto-example h3 { margin: 0; color: var(--v2-ink); font-family: var(--v2-display); font-size: clamp(22px, 2.4vw, 36px); letter-spacing: -.035em; text-transform: uppercase; }
.howto-example p,
.howto-panel p { margin: 0; color: var(--v2-muted); font-size: 14px; line-height: 1.65; }

.howto-year-chip {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--story-lime) 58%, var(--v2-line));
  border-radius: 999px;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--story-lime) 12%, transparent);
  color: var(--story-lime);
  font-size: 11px;
  font-weight: 800;
}

.howto-action {
  width: fit-content;
  max-width: 100%;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  padding: 7px 14px;
  background: transparent;
  color: var(--v2-ink);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.howto-action:hover { border-color: var(--story-lime); background: var(--story-lime); color: var(--story-stripe-text); }

.howto-note {
  max-width: 1100px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin: clamp(30px, 5vw, 70px) auto 0;
  border-color: color-mix(in srgb, var(--story-peach) 46%, var(--v2-line));
  border-radius: 20px;
  padding: clamp(20px, 3vw, 34px);
  background: color-mix(in srgb, var(--story-peach) 8%, var(--v2-paper));
}

.howto-note-icon { color: var(--story-peach); font-size: 22px; }
.howto-note p { margin: 0; color: var(--v2-muted); line-height: 1.65; }
.howto-note strong { display: block; margin-bottom: 4px; color: var(--v2-ink); }

.howto-section--light {
  border-block: 1px solid var(--story-stripe-line);
  background: var(--story-stripe-bg);
  color: var(--story-stripe-text);
}

.howto-section--light .v2-eyebrow,
.howto-section--light .howto-section-heading > p { color: var(--story-stripe-muted); }
.howto-section--light .howto-section-heading h2 { color: var(--story-stripe-text); }
.howto-section--light .howto-section-heading h2 span { color: var(--story-stripe-muted); }

.howto-control-demo {
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto clamp(34px, 5vw, 70px);
  border-color: var(--story-stripe-line);
  border-radius: 22px;
  padding: 14px;
  background: color-mix(in srgb, var(--story-stripe-bg) 86%, var(--v2-paper));
}

.howto-control-button,
.howto-control-year,
.howto-preset {
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--story-stripe-line);
  border-radius: 999px;
  background: var(--story-stripe-bg);
  color: var(--story-stripe-text);
  font-weight: 800;
}

.howto-control-button { width: 42px; font-size: 22px; }
.howto-control-year { min-width: 86px; padding: 0 18px; font-family: var(--v2-display); font-size: 18px; }
.howto-presets { flex-wrap: wrap; gap: 6px; margin-left: 8px; padding-left: 15px; border-left: 1px solid var(--story-stripe-line); }
.howto-preset { min-width: 58px; min-height: 34px; padding: 0 10px; color: var(--story-stripe-muted); font-size: 10px; }
.howto-preset.is-active { border-color: var(--story-stripe-text); background: var(--story-stripe-text); color: var(--story-stripe-bg); }

.howto-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: howto-list;
}

.howto-steps li {
  counter-increment: howto-list;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-color: var(--story-stripe-line);
  border-right: 0;
  padding: clamp(24px, 3vw, 42px);
  background: transparent;
  color: var(--story-stripe-muted);
  line-height: 1.65;
}

.howto-steps li:last-child { border-right: 1px solid var(--story-stripe-line); }
.howto-steps li::before { content: "0" counter(howto-list); color: var(--story-stripe-muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.howto-steps li > span { margin-top: auto; }
.howto-steps strong { display: block; margin-bottom: 8px; color: var(--story-stripe-text); font-family: var(--v2-display); font-size: clamp(20px, 2vw, 30px); line-height: 1.05; text-transform: uppercase; }

.howto-country-section { min-height: 90vh; }
.howto-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.howto-panel { min-height: 390px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; border-radius: var(--v2-radius); padding: clamp(28px, 4vw, 56px); }
.howto-panel--accent { border-color: color-mix(in srgb, var(--story-lilac) 56%, var(--v2-line)); background: color-mix(in srgb, var(--story-lilac) 8%, var(--v2-paper)); }
.howto-panel-number { color: var(--story-lilac); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.howto-panel h3 { margin: auto 0 0; color: var(--v2-ink); font-family: var(--v2-display); font-size: clamp(30px, 4vw, 60px); letter-spacing: -.045em; line-height: .95; text-transform: uppercase; }
.howto-path { flex-wrap: wrap; gap: 8px; color: var(--v2-muted); font-size: 11px; font-weight: 800; }
.howto-path span { border: 1px solid var(--v2-line); border-radius: 999px; padding: 7px 11px; background: var(--v2-paper); color: var(--v2-ink); }
.howto-path b { color: var(--story-lilac); }

.howto-reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.howto-reference-card { min-height: 360px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; border: 1px solid var(--story-stripe-line); border-radius: var(--v2-radius); padding: clamp(28px, 4vw, 52px); background: color-mix(in srgb, var(--story-stripe-bg) 88%, var(--v2-paper)); color: var(--story-stripe-text); text-decoration: none; transition: border-color .2s, transform .2s; }
.howto-reference-card:hover { border-color: var(--story-stripe-text); transform: translateY(-4px); }
.howto-reference-card small { color: var(--story-stripe-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.howto-reference-card h3 { max-width: 680px; margin: auto 0 0; color: var(--story-stripe-text); font-family: var(--v2-display); font-size: clamp(28px, 3.8vw, 56px); letter-spacing: -.045em; line-height: .95; text-transform: uppercase; }
.howto-reference-card p { max-width: 620px; margin: 0; color: var(--story-stripe-muted); font-size: 14px; line-height: 1.65; }
.howto-reference-card > span { color: var(--story-stripe-text); font-size: 11px; font-weight: 800; }

.howto-section--stories {
  border-top: 1px solid var(--v2-line);
  background: radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--story-lilac) 13%, transparent), transparent 38%), var(--v2-paper);
}

.howto-steps--stories li { border-color: var(--v2-line); color: var(--v2-muted); }
.howto-steps--stories li:last-child { border-right-color: var(--v2-line); }
.howto-steps--stories li::before { color: var(--story-lilac); }
.howto-steps--stories strong { color: var(--v2-ink); }

.howto-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); margin-top: clamp(34px, 5vw, 70px); }
.howto-history-card { min-height: 310px; display: flex; flex-direction: column; gap: 18px; border: 1px solid var(--v2-line); border-radius: var(--v2-radius); padding: clamp(28px, 4vw, 52px); background: color-mix(in srgb, var(--v2-paper) 90%, transparent); color: var(--v2-ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.howto-history-card:hover { border-color: var(--story-lilac); transform: translateY(-4px); }
.howto-history-card small { color: var(--story-lilac); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.howto-history-card strong { margin-top: auto; font-family: var(--v2-display); font-size: clamp(26px, 3.2vw, 48px); letter-spacing: -.04em; line-height: .95; text-transform: uppercase; }
.howto-history-card span { color: var(--v2-muted); font-size: 14px; line-height: 1.6; }
.howto-history-card b { font-size: 11px; }

.howto-footer-callout { gap: 30px; margin-top: clamp(40px, 7vw, 100px); border-top: 1px solid var(--v2-line); padding-top: clamp(34px, 5vw, 64px); }
.howto-footer-callout p { max-width: 720px; display: grid; gap: 12px; margin: 0; }
.howto-footer-callout p strong { color: var(--v2-ink); font-family: var(--v2-display); font-size: clamp(22px, 3vw, 42px); line-height: 1; text-transform: uppercase; }

.howto-footer { min-height: 180px; grid-template-columns: auto 1fr auto; gap: 28px; border-top: 1px solid var(--v2-line); color: var(--v2-muted); font-size: 12px; }
.howto-footer a { color: var(--v2-ink); text-decoration: none; }
.howto-footer-brand { font-family: var(--v2-display); font-size: 18px; text-transform: uppercase; }
.howto-footer nav { gap: 22px; }

@media (max-width: 900px) {
  .howto-hero-composition { display: grid; }
  .howto-orbit { justify-self: end; width: 260px; }
  .howto-section-heading { display: grid; align-items: start; }
  .howto-examples { grid-template-columns: 1fr; }
  .howto-example { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); }
  .howto-example iframe { height: 100%; min-height: 390px; border-right: 1px solid var(--v2-line); border-bottom: 0; }
}

@media (max-width: 700px) {
  .howto-page .howto-site-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding-bottom: 10px;
  }
  .howto-site-header .site-brand { margin-right: auto; }
  .howto-site-header .site-header-link { white-space: nowrap; }
  .howto-header-nav { order: 2; flex: 1 1 auto; justify-content: flex-end; overflow-x: auto; }
  .howto-page .howto-header-search { order: 3; width: 100%; }
  .howto-page .nuclear-search-dialog-input { font-size: 13px; }
  .howto-hero { min-height: calc(100svh - 86px); }
  .howto-hero-shell { gap: 34px; }
  .howto-hero h1 { font-size: clamp(46px, 14vw, 72px); }
  .howto-orbit { width: 190px; }
  .howto-hero-bottom { display: grid; align-items: start; }
  .howto-scroll-note { display: none; }
  .howto-hero-bottom .v2-button { width: 100%; }
  .howto-chapter-nav { top: 51px; }
  .howto-toc { gap: 24px; }
  .howto-toc-label { display: none; }
  .howto-section-heading h2 { font-size: clamp(40px, 12.5vw, 62px); overflow-wrap: anywhere; }
  .howto-examples,
  .howto-example,
  .howto-panel-grid,
  .howto-reference-grid,
  .howto-history-grid,
  .howto-steps { grid-template-columns: 1fr; }
  .howto-example iframe { height: 330px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--v2-line); }
  .howto-example-copy { min-height: 230px; }
  .howto-control-demo { width: 100%; flex-wrap: wrap; }
  .howto-presets { width: 100%; justify-content: center; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--story-stripe-line); border-left: 0; }
  .howto-steps li { min-height: 240px; border-right: 1px solid var(--story-stripe-line); border-bottom: 0; }
  .howto-steps li:last-child { border-bottom: 1px solid var(--story-stripe-line); }
  .howto-steps--stories li { border-right-color: var(--v2-line); }
  .howto-steps--stories li:last-child { border-bottom-color: var(--v2-line); }
  .howto-panel { min-height: 340px; }
  .howto-footer-callout { align-items: flex-start; flex-direction: column; }
  .howto-footer-callout .v2-button { width: 100%; }
  .howto-footer { grid-template-columns: 1fr; gap: 14px; padding-block: 44px; }
  .howto-footer nav { flex-wrap: wrap; }
}

@media (max-width: 440px) {
  .howto-hero h1 { font-size: 44px; }
  .howto-orbit { width: 160px; margin-right: 12px; }
  .howto-orbit-label { font-size: 8px; }
  .howto-toc a { font-size: 11px; }
  .howto-toc-number { display: none; }
  .howto-year-chip { display: none; }
  .howto-note { grid-template-columns: 1fr; }
  .howto-preset { min-width: 52px; }
}