/* Installing your Hedgehog AI · the data-centre corridor as the plate, then one numbered column of steps:
   each step a sheet with its commands and the output to expect; person-only steps carry a red rule. */

body[data-page="install"] {
  --hero: url("../img/photos/dc-corridor.jpg");
  --hero-pos: 50% 50%;
}

body[data-page="install"] .hero { min-height: clamp(380px, 52vh, 520px) }

body[data-page="install"] .install-intro { display: grid; gap: 1.4rem; max-width: 52rem }
body[data-page="install"] .before h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: .6rem }
body[data-page="install"] .before ul { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .4rem; font-family: var(--serif); font-size: 1.08rem }
body[data-page="install"] .before a { color: var(--red) }
body[data-page="install"] .not-ready { border-left-color: var(--gold) }

body[data-page="install"] ol.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; max-width: 56rem }
body[data-page="install"] .step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem); min-width: 0 }
body[data-page="install"] .step.person { border-left: 4px solid var(--red) }
body[data-page="install"] .step .sh { margin-bottom: .8rem }
body[data-page="install"] .step h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem) }
body[data-page="install"] .step p { font-family: var(--serif); font-size: 1.06rem; line-height: 1.6; max-width: 46rem; margin: 0 0 .8rem }
body[data-page="install"] .step .who { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red) }
body[data-page="install"] .expect { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; font-family: var(--sans) !important; font-size: .9rem !important; color: var(--muted) }
body[data-page="install"] .expect span { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mint) }
body[data-page="install"] .expect code { font-family: var(--mono); font-size: .84rem; color: var(--fg); background: var(--panel-2); border-radius: 6px; padding: .15rem .45rem; overflow-wrap: anywhere }

body[data-page="install"] #agents .notice { margin-top: 1.2rem }
body[data-page="install"] #agents .notice ol { margin: .4rem 0 0; padding-left: 1.2rem; display: grid; gap: .45rem }
body[data-page="install"] .code.prompt pre code { white-space: pre-wrap }