/* /made/solar/ — long-form documentation pages.
   Extends styles.css per DESIGN_BRIEF_SOLAR.md. Same tokens, same hues; what
   changes is format, because these pages are built around large copyable code
   blocks and the 36rem marketing column does not survive that content.
   No color literals — every value is a token reference (bible hard rule #1). */

.doc {
  width: 100%;
  max-width: var(--column-max-doc);
  margin: 0 auto;
  padding: var(--space-10) var(--column-padding) var(--space-12);
}

/* ---------- Crumb ---------- */

.doc .crumb {
  margin-bottom: var(--space-8);
}

/* ---------- Headings ---------- */

.doc-title {
  font-size: var(--text-hero);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}

/* The one-line outcome subtitle. Deliberately not a heading level — it is the
   title's second half, and screen readers should not meet a phantom section. */
.doc-sub {
  font-size: var(--text-lg);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0 0 var(--space-8);
}

.doc h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin: var(--space-10) 0 var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.doc h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: var(--space-6) 0 var(--space-3);
}

/* ---------- Prose ---------- */

.doc p,
.doc li {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
}

.doc strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.doc ul,
.doc ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.doc li { margin-bottom: var(--space-2); }

.doc hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-8) 0;
}

.doc blockquote {
  margin: var(--space-5) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent-border);
  color: var(--text-muted);
}

/* Underline motion is the house wipe, defined once in styles.css so future doc
   pages inherit it. Only colour is set here. */
.doc a { color: var(--text-primary); }

.doc a:hover,
.doc a:focus-visible { color: var(--accent-strong); }

/* Inline code sits on the surface step, same as prompt blocks, so the two read
   as the same material at different scales. */
.doc code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

/* ---------- Tables ---------- */

.table-wrap {
  overflow-x: auto;
  margin: 0 0 var(--space-5);
  -webkit-overflow-scrolling: touch;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.doc th,
.doc td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.doc th {
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.doc td { color: var(--text-secondary); }

/* ---------- Prompt block ---------- */

/* Breaks out past the prose measure: the prompts are wide, and reflowing them
   to 48rem would wrap lines the reader is meant to copy verbatim. */
.prompt {
  --prompt-break: calc((min(var(--column-max-wide), 100vw - (2 * var(--column-padding))) - var(--column-max-doc)) / 2);
  width: calc(100% + (2 * max(0px, var(--prompt-break))));
  margin: 0 0 var(--space-6) calc(-1 * max(0px, var(--prompt-break)));
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.prompt-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ghost);
}

.prompt pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.prompt code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
}

/* ---------- Copy button ---------- */

.copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.copy:hover,
.copy:focus-visible {
  color: var(--accent);
  border-color: var(--accent-border);
}

/* Bible §5: ONE glow per view. Only the first prompt block on a page glows;
   every later block hovers flat. */
.prompt:first-of-type .copy:hover,
.prompt:first-of-type .copy:focus-visible {
  box-shadow: var(--glow-accent);
}

.copy[data-state="done"] {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-bg);
}

.copy[data-state="failed"] {
  color: var(--accent-role);
  border-color: var(--accent-role);
}

/* ---------- Index page ---------- */

.play-list {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}

.play-list li { margin: 0 0 var(--space-1); }

/* Block link, so the wipe is a pseudo-element over the resting rule — same
   structure as `.link` in styles.css (faint line as affordance, accent line
   wiping left-to-right), at block scale rather than text scale. */
.play {
  display: block;
  position: relative;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
}

.play::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-medium) var(--ease-smooth);
}

.play:hover::after,
.play:focus-visible::after { transform: scaleX(1); }

.play-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-ghost);
  letter-spacing: 0.08em;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.play-name {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  transition: color var(--duration-fast) var(--ease-smooth);
}

.play-sub {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.play:hover .play-name,
.play:focus-visible .play-name { color: var(--accent); }

.play:hover .play-num,
.play:focus-visible .play-num { color: var(--accent); }

/* The index's one type moment: Play 01 is the required first step, so it is
   the page's single primary (brief §2). */
.play--primary .play-name { font-size: var(--text-xl); }

.play-flag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.1em 0.5em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

/* ---------- Contact CTA — role hue (direct line out to Adrian) ---------- */

.doc-cta {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.doc-cta p { color: var(--text-muted); }

/* Role hue. The wipe follows currentColor, so setting colour is enough — no
   separate underline rule. */
.doc-cta a { color: var(--accent-role); }

.doc-cta a:hover,
.doc-cta a:focus-visible { color: var(--accent-role-strong); }

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
  .doc { padding: var(--space-8) var(--space-4) var(--space-10); }

  /* Below the doc measure there is no breakout room; collapse it so the block
     stays inside the padding rather than pushing the body sideways. */
  .prompt {
    width: 100%;
    margin-left: 0;
  }

  .prompt-head {
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  }

  .play--primary .play-name { font-size: var(--text-lg); }
}

/* `.doc a` reduced-motion is handled in styles.css alongside its definition.
   The wipe still ARRIVES at full width — hover must remain legible — it just
   arrives instantly rather than sliding. */
@media (prefers-reduced-motion: reduce) {
  .copy,
  .play-name,
  .play-num { transition: none; }

  .play::after { transition: none; }
}