/* AI Lab skill pages (experiment-hypothesis-generator.html, research-script-generator.html). Loaded after project.css.
   - .skill-flow: the four-step "how it works" preview, one card with the steps stacked and joined by arrows.
   - .skill-prompt: the example prompt, set in mono.
   - .skill-cards / .skill-card: the two output screens side by side (stacked on phones).
   - .skill-doc: the full generated document in a scrollable card. */

.skill-flow { list-style: none; margin: var(--space-fluid-2xl) 0 0; padding: var(--space-fluid-md); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); display: flex; flex-direction: column; gap: 0; }
.skill-flow > li + li::before { content: "↓"; display: block; text-align: center; color: var(--faint); font-size: 0.95rem; line-height: 1; margin: var(--space-16) 0; }
.skill-flow .mono { display: block; color: var(--muted); margin-bottom: var(--space-8); }
.skill-step { padding: var(--space-12) var(--space-16); border: 1px solid var(--line); border-radius: var(--radius-4); background: var(--paper); color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; }
.skill-step + .skill-step { margin-top: var(--space-8); }
.skill-step.is-out { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--ink); }
.skill-flow + .proj-note { margin-top: var(--space-16); }

.skill-prompt { margin: var(--space-20) 0 0; padding: var(--space-16) var(--space-20); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font-family: var(--f-mono); font-size: 0.86rem; line-height: 1.65; color: var(--ink); }

.skill-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); margin-top: var(--space-24); align-items: stretch; }
.skill-card, .skill-doc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: var(--space-20) var(--space-24); color: var(--ink-2); font-size: 0.92rem; line-height: 1.6; }
.skill-card h3, .skill-doc h3 { font-family: var(--f-body); font-size: 1.02rem; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; margin: 0 0 var(--space-12); }
.skill-card h3 + p, .skill-card p + h3, .skill-card p + p { margin-top: 0; }
.skill-card p { margin-bottom: var(--space-12); }
.skill-card p:last-child { margin-bottom: 0; }
.skill-card h4 { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin: var(--space-16) 0 var(--space-8); }
.skill-card strong, .skill-doc strong { color: var(--ink); font-weight: 600; }
.skill-card ul, .skill-doc ul { margin: 0; padding-left: 1.15em; }
.skill-card li + li, .skill-doc li + li { margin-top: 0.4em; }
.skill-card li::marker, .skill-doc li::marker { color: var(--accent); }
.skill-sub { font-size: 0.8rem; color: var(--muted); margin: 0 0 var(--space-8); }
.skill-card .skill-sub { margin-top: -2px; }

.skill-doc { margin-top: var(--space-16); max-height: 460px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: var(--space-24) var(--space-24); }
.skill-doc:focus-visible { outline-offset: 2px; border-radius: var(--radius); }
.skill-doc h3 { font-size: 1.12rem; margin-bottom: var(--space-4); }
.skill-doc > .skill-sub { margin-bottom: var(--space-16); }
.skill-doc h4 { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin: var(--space-16) 0 var(--space-8); }
.skill-doc p + p { margin-top: var(--space-8); }
.skill-doc .q { color: var(--ink-2); margin-bottom: var(--space-8); }
.skill-doc .probe { font-size: 0.86rem; color: var(--muted); }
.skill-doc .probe + .probe { margin-top: var(--space-4); }
.skill-doc .probe + .q { margin-top: var(--space-12); }

@media (max-width: 640px) {
  .skill-cards { grid-template-columns: 1fr; }
  .skill-card, .skill-doc { padding: var(--space-16); }
}