/* ===== Install dashboard ===== */
.guide-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 2.5rem; }
/* Grid items default to min-width:auto, which lets wide <pre> command lines blow the
   1fr track past the viewport (page-level horizontal scroll). minmax(0,1fr) + min-width:0
   let the content column shrink so code blocks scroll internally instead. */
.guide-layout > * { min-width: 0; }
@media (max-width: 1023px) { .guide-layout { grid-template-columns: 1fr; } }

/* Phase nav rail */
.phase-nav { position: sticky; top: 1.5rem; align-self: start; }
.phase-nav ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border-subtle); }
.phase-nav li a { display: block; padding: .5rem .9rem; color: var(--text-secondary); font-weight: 600; font-size: .9rem; border-left: 2px solid transparent; margin-left: -2px; }
.phase-nav li a:hover { color: #0095FF; border-left-color: #0095FF; }

/* Step cards */
.phase-block { margin-bottom: 3rem; }
.phase-block > h2 { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.phase-block > p.phase-summary { color: var(--text-muted); margin-top: .25rem; margin-bottom: 1.5rem; }
.step-card { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); }
.step-head { display: flex; align-items: center; gap: .75rem; }
.step-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.step-body { color: var(--text-secondary); margin-top: .6rem; line-height: 1.6; overflow-wrap: anywhere; }
.step-body code { background: var(--surface-2); padding: .1rem .35rem; border-radius: .35rem; font-size: .85em; }

/* Checkbox */
.step-check input { position: absolute; opacity: 0; }
.step-check-box { width: 1.25rem; height: 1.25rem; border: 2px solid var(--border-subtle); border-radius: .35rem; display: inline-block; position: relative; }
.step-check input:checked + .step-check-box { background: #0095FF; border-color: #0095FF; }
.step-check input:checked + .step-check-box::after { content: ''; position: absolute; left: .35rem; top: .1rem; width: .3rem; height: .6rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Code blocks */
.codeblock { margin: 1rem 0; border: 1px solid var(--border-subtle); border-radius: .75rem; overflow: hidden; }
.codeblock-cap { display: flex; justify-content: space-between; align-items: center; background: var(--surface-2); padding: .5rem .9rem; font-size: .8rem; color: var(--text-muted); }
.codeblock-copy { font-size: .75rem; font-weight: 600; color: #0095FF; cursor: pointer; background: none; border: 0; }
.codeblock pre { margin: 0; padding: 1rem; overflow-x: auto; background: #0b1220; color: #e5edf7; font-size: .85rem; line-height: 1.5; }
html.light .codeblock pre { background: #0f172a; }

/* Callouts */
.callout { border-radius: .75rem; padding: .9rem 1.1rem; margin: 1rem 0; border-left: 4px solid; font-size: .9rem; }
.callout-label { font-weight: 800; text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; display: block; margin-bottom: .25rem; }
.callout-info    { background: rgba(0,149,255,.08);  border-color: #0095FF; color: var(--text-secondary); }
.callout-tip     { background: rgba(16,185,129,.10); border-color: #10B981; color: var(--text-secondary); }
.callout-warning { background: rgba(245,158,11,.12); border-color: #F59E0B; color: var(--text-secondary); }
.callout-danger  { background: rgba(239,68,68,.12);  border-color: #EF4444; color: var(--text-secondary); }

/* Secrets table (rendered inside step bodies) */
.secrets-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .85rem; }
.secrets-table th, .secrets-table td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.secrets-table th { color: var(--text-muted); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.secrets-table td code { white-space: nowrap; }

/* Cloud chooser cards */
.cloud-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.cloud-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,149,255,.16); }