/* The look of StepByStep, loaded after the page styles.
   Midnight surfaces, one accent for the thing to press, blue only as light.
   Display type is a serif with an italic for the word that matters; labels are
   mono capitals. See DESIGN.md. */

/* The ground: a beam of blue light rising from behind the page's top edge. */
body {
  background:
    radial-gradient(90rem 34rem at 50% -14rem, rgba(2, 151, 222, 0.2), rgba(2, 151, 222, 0) 70%),
    var(--color-background-body);
  background-attachment: fixed;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--color-accent); color: var(--color-accent-content); }
:focus-visible { outline: 2px solid var(--color-glow); outline-offset: 3px; border-radius: 4px; }

/* Header: the mark, and mono navigation. */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  align-items: center;
  padding: 0.9rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--color-border);
  background: rgba(2, 7, 10, 0.78);
  backdrop-filter: blur(14px);
}
.mark { font: 500 1.05rem var(--font-code); letter-spacing: 0; }
.mark::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.6rem; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 14px 2px rgba(252, 115, 77, 0.6); }
.top nav { gap: 0.25rem 1.6rem; font: 0.8rem var(--font-code); }
.top nav a { padding: 0.35rem 0; border-bottom: 0; color: var(--color-content-secondary); transition: color var(--duration-fast) var(--ease-standard); }
.top nav a:hover { color: var(--color-content-primary); }
.top nav a[aria-current="page"] { color: var(--color-content-primary); }
.top nav a[aria-current="page"]::before { content: "\2022\00A0"; color: var(--color-accent); }

/* Type. */
.page-title,
.home h2, .rules h2,
legend,
.draft .idea,
.make-rail .make-ask {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.page-title { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.02; }
.home h2, .rules h2 { margin-top: 5rem; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.1; }
legend, .draft .idea { font-size: 1.7rem; }
.make-rail .make-ask { font-size: 2rem; line-height: 1.1; }
legend::before { font: 400 0.8rem var(--font-code); color: var(--color-content-tertiary); }
code, kbd { font-family: var(--font-code); }
kbd { border-color: var(--color-border-strong); border-radius: 6px; }

/* The thing to press. */
.primary {
  min-height: var(--size-element-md);
  padding: 0.65rem 1.6rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-content);
  font: 600 0.95rem var(--font-body);
  box-shadow: 0 0 0 0 rgba(252, 115, 77, 0), 0 10px 30px -12px rgba(252, 115, 77, 0.7);
  transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.primary:hover { background: var(--color-accent-hover); color: var(--color-accent-content); box-shadow: 0 0 0 4px rgba(252, 115, 77, 0.18), 0 14px 36px -12px rgba(252, 115, 77, 0.8); }
.primary:active { transform: translateY(1px); }
.primary:disabled { box-shadow: none; }
a.primary { display: inline-flex; align-items: center; text-decoration: none; }
.link-button { color: var(--color-content-secondary); text-decoration-color: var(--color-border-strong); transition: color var(--duration-fast) var(--ease-standard); }
.link-button:hover { color: var(--color-content-primary); text-decoration-thickness: 1px; text-decoration-color: currentColor; }

/* Fields: a quiet rule that lights up. */
label { color: var(--color-content-secondary); }
input, textarea, select { border-bottom: 1px solid var(--color-border-strong); font-family: var(--font-body); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-bottom-color: var(--color-glow); box-shadow: 0 1px 0 var(--color-glow); border-radius: 0; }
::placeholder { color: var(--color-content-tertiary); opacity: 1; }
select option { background: var(--color-background-raised); }
.draft .idea textarea,
.make-form textarea {
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-element);
  background: var(--color-background-surface);
  box-shadow: var(--shadow-raised);
}
.draft .idea textarea:focus-visible,
.make-form textarea:focus-visible { border-color: var(--color-glow); border-radius: var(--radius-element); box-shadow: 0 0 0 3px rgba(2, 151, 222, 0.22); }
.draft { border-bottom: 1px solid var(--color-border); }
.fold summary { font: 0.8rem var(--font-code); color: var(--color-content-tertiary); }
.fold .tick input, input[type="checkbox"] { accent-color: var(--color-accent); }
.status { color: var(--color-content-secondary); }
.status.bad { color: var(--color-status-negative); }
.quiet { color: var(--color-content-tertiary); }

/* Containers: the file page, the tab above it. */
.filename { border-color: var(--color-border); border-radius: var(--radius-element) var(--radius-element) 0 0; background: var(--color-background-surface); font: 0.75rem var(--font-code); color: var(--color-content-secondary); }
.lines { font: 0.75rem var(--font-code); color: var(--color-content-tertiary); }
.page { border-color: var(--color-border); border-radius: 0 var(--radius-element) var(--radius-element) var(--radius-element); font-family: var(--font-code); }

/* ---------- Home ---------- */

.home { max-width: 82rem; }
.home-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: end;
  gap: 2rem;
  margin: -2rem calc(-1 * clamp(1rem, 4vw, 3rem)) 0;
  padding: clamp(4rem, 12vh, 8rem) clamp(1rem, 4vw, 3rem) clamp(9rem, 26vh, 15rem);
  overflow: hidden;
  text-align: center;
}
/* Light rising from the horizon: blue, then the accent where it meets the ground. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(64% 40% at 50% 92%, #ffd9c6 0%, var(--color-accent) 24%, rgba(252, 115, 77, 0.45) 46%, rgba(252, 115, 77, 0) 70%),
    radial-gradient(34% 120% at 50% 100%, rgba(120, 205, 255, 0.95) 0%, rgba(2, 151, 222, 0.75) 30%, rgba(2, 151, 222, 0) 72%),
    radial-gradient(90% 80% at 50% 100%, rgba(2, 151, 222, 0.5) 0%, rgba(2, 151, 222, 0) 70%);
  /* The light has no edge: it thins out before the hero ends. */
  mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
}
/* A fine vertical grain over the light, as in a ruled sky. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(to right, rgba(2, 7, 10, 0.3) 0 1px, transparent 1px 5px);
  mask-image: linear-gradient(to top, #000 10%, transparent 80%);
}
.home-centre { max-width: 46rem; }
.home-title { margin: 0; font: 400 clamp(2.9rem, 7.2vw, 5.4rem)/0.98 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.home-title em { font-style: italic; }
.home-lede { max-width: 30rem; margin: 1.4rem auto 2rem; font: 0.85rem/1.7 var(--font-code); color: var(--color-content-secondary); text-wrap: balance; }
.home-start { min-height: 3.25rem; padding: 0.8rem 2.2rem; font-size: 1rem; }
.home-facts { display: none; }
.home-fact { display: grid; gap: 0.15rem; }
.home-fact-figure { font: 400 2.4rem/1 var(--font-display); }
.home-fact-label { font: 0.7rem var(--font-code); color: var(--color-content-secondary); }
@media (min-width: 68rem) {
  .home-hero { grid-template-columns: 11rem minmax(0, 1fr) 11rem; }
  .home-facts { display: grid; gap: 1.6rem; padding-bottom: 2rem; text-align: left; }
  .home-facts-right { text-align: right; }
}
@media (prefers-reduced-motion: no-preference) {
  .home-centre > * { animation: rise var(--duration-slow) var(--ease-standard) both; }
  .home-centre > :nth-child(2) { animation-delay: 80ms; }
  .home-centre > :nth-child(3) { animation-delay: 160ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
}

/* How a session goes: five cards lifted over the hero's horizon. */
.home-made { position: relative; margin-top: clamp(-9rem, -14vh, -5rem); }
.home-steps { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; }
@media (min-width: 40rem) { .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .home-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.home-steps .home-step {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  margin: 0;
  padding: 1.25rem 1.25rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-container);
  background: rgba(10, 19, 25, 0.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 90px -40px #000;
}
.home-step-number { font: 0.75rem var(--font-code); color: var(--color-accent); }
.home-step-title { font: 400 1.6rem/1.1 var(--font-display); }
.home-step-text { font-size: 0.9rem; color: var(--color-content-secondary); }
.home-said { margin: 0; padding: 0.45rem 0.7rem; border: 0; border-left: 2px solid var(--color-accent); border-radius: 0 6px 6px 0; background: var(--color-background-raised); font: 0.75rem/1.6 var(--font-code); color: var(--color-content-primary); }

/* What the same workflow has made elsewhere. */
.home-note { max-width: 38rem; margin: -0.4rem 0 1.5rem; font: 0.8rem/1.7 var(--font-code); color: var(--color-content-secondary); }
.home-showcase { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .home-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-shot { position: relative; margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-container); overflow: hidden; background: var(--color-background-surface); transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-slow) var(--ease-standard); }
.home-shot:hover { border-color: var(--color-border-strong); transform: translateY(-3px); }
.home-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.home-shot figcaption { position: absolute; left: 0.9rem; bottom: 0.9rem; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); background: rgba(2, 7, 10, 0.78); backdrop-filter: blur(8px); font: 0.72rem var(--font-code); }

/* What steps cost. */
.home-prices { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.home-price { display: grid; gap: 0.2rem; padding: 1.4rem 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-container); background: var(--color-background-surface); box-shadow: var(--shadow-raised); }
.home-price:first-child { border-color: rgba(252, 115, 77, 0.55); background: linear-gradient(180deg, rgba(252, 115, 77, 0.12), rgba(252, 115, 77, 0) 70%), var(--color-background-surface); }
.home-price-name { font: 0.75rem var(--font-code); color: var(--color-content-secondary); }
.home-price-cost { font: 400 2.6rem/1.1 var(--font-display); }
.home-price-note { font-size: 0.85rem; color: var(--color-content-tertiary); }

/* The folder and where to begin: for people bringing their own coding agent. */
.home-files { border: 1px solid var(--color-border); border-radius: var(--radius-container); background: var(--color-background-surface); }
.home-file { border-bottom-color: var(--color-border); }
.home-file-name, .home-file-limit { font-family: var(--font-code); }
.home-begin { margin-top: 2rem; }
.home-begin-col { border-top-color: var(--color-border); }
.home-begin h3 { font: 400 1.4rem var(--font-display); }
.home-begin-text, .home-works, .home-source { color: var(--color-content-secondary); }

/* ---------- Make ---------- */

.make-top { padding-bottom: 0.9rem; border-bottom-color: var(--color-border); }
.make-steps { gap: 0.4rem; font: 0.72rem var(--font-code); }
.make-steps li { padding: 0.3rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-content-tertiary); }
.make-steps li.done { color: var(--color-content-secondary); }
.make-steps li[aria-current] { border-color: var(--color-content-primary); color: var(--color-content-primary); font-weight: 500; }
.make-steps li[aria-current]::before { color: var(--color-accent); }
.make-who { font: 0.75rem var(--font-code); color: var(--color-content-secondary); }
.make-person .link-button { font-size: 0.85rem; }

.make-guide h3 { margin: 1.5rem 0 0.55rem; font: 0.72rem var(--font-code); letter-spacing: 0.02em; color: var(--color-content-secondary); }
.make-chips { gap: 0.5rem; }
.make-chips button {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-background-surface);
  color: var(--color-content-primary);
  font: 0.9rem var(--font-body);
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.make-chips button:hover { border-color: var(--color-content-primary); background: var(--color-background-raised); color: var(--color-content-primary); }
.make-chips button[aria-pressed="true"] { border-color: var(--color-content-primary); background: var(--color-content-primary); color: var(--color-background-body); }
.make-chips button.make-waiting { border-style: dashed; border-color: var(--color-accent); }
.make-levels button { font-weight: 500; }
.make-chips input { align-self: center; }
.make-skip { font: 0.75rem var(--font-code); }

.make-looks { gap: 0.75rem; }
.make-looks button { padding: 0.4rem 0.4rem 0.55rem; border-radius: var(--radius-container); gap: 0.5rem; font: 0.75rem var(--font-code); }
.make-looks button > :not(.make-look-art) { padding: 0 0.4rem; }
.make-looks .make-look-art svg { width: 6.6rem; }
.make-looks input { flex-basis: 100%; }
.make-look-art { border: 0; border-radius: calc(var(--radius-container) - 0.4rem); overflow: hidden; }
.make-looks button:hover { outline: 0; background: var(--color-background-raised); color: var(--color-content-primary); }
.make-looks button[aria-pressed="true"] { outline: 2px solid var(--color-accent); outline-offset: 2px; border-color: transparent; background: var(--color-background-raised); color: var(--color-content-primary); }
.make-picture { border: 1px solid var(--color-border-strong); border-radius: var(--radius-element); }

.make-price { font: 0.75rem/1.6 var(--font-code); color: var(--color-content-secondary); }
.make.is-new .make-examples { border-top-color: var(--color-border); font: 0.8rem/1.6 var(--font-code); }
.make-examples li::before { content: "\2192"; color: var(--color-accent); font-size: 1em; }
.make-examples .link-button { text-decoration: none; }
.make-examples .link-button:hover { text-decoration: underline; }

.make-screen { border: 1px solid var(--color-border-strong); border-radius: 0 var(--radius-container) var(--radius-container) var(--radius-container); overflow: hidden; box-shadow: 0 0 0 1px rgba(2, 7, 10, 0.6), 0 40px 90px -50px rgba(2, 151, 222, 0.55); }
.make-try { font: 400 1.5rem/1.2 var(--font-display); }
.make-controls { gap: 0.4rem 1.5rem; font-size: 0.85rem; }
.make-shared a { font-family: var(--font-code); color: var(--color-content-primary); }
.make-log li { border-top-color: var(--color-border); }
.make-log .link-button { font: 500 0.75rem var(--font-code); color: var(--color-content-primary); }
.make-log blockquote { border-left-color: var(--color-accent); }
.make-log p { color: var(--color-content-secondary); font-size: 0.9rem; }
.make-rail h2 { font: 0.72rem var(--font-code); color: var(--color-content-tertiary); font-weight: 400; }
.make-rail .make-ask { color: var(--color-content-primary); }
/* Google's button draws itself in a frame; matching its colour scheme keeps the frame clear instead of a white box. */
.make-google iframe { color-scheme: light; }
.make-shelf { border-top: 1px solid var(--color-border); }
.make-error { padding: 0.6rem 0.9rem; border: 1px solid rgba(255, 138, 122, 0.4); border-radius: var(--radius-element); background: rgba(255, 138, 122, 0.08); }
.make-shop { padding: 0.75rem 0; }

/* ---------- The older pages: quieter rules on the dark ground ---------- */
.github { border-top-color: var(--color-border); }
.rules-table th, .rules-table td { border-color: var(--color-border); }

@media (max-width: 62rem) {
  .top { position: static; }
  .home-hero { margin-top: -2rem; }
}

/* The header stays on screen, so what sticks below it starts under it. */
@media (min-width: 62.01rem) {
  .desk { top: 5rem; max-height: calc(100vh - 6.5rem); }
  .make-stage { top: 4.75rem; }
  .make-screen { height: min(calc(100vh - 14rem), 46rem); }
}