/* Chapter 11.1 reuses the first-connection guide's official site tokens. */
.guide-nav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.guide-nav .shell { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; padding-top: .9rem; padding-bottom: .9rem; }
.guide-nav a { padding: .3rem 0; color: var(--ink-soft); text-decoration: none; font-size: .86rem; }
.guide-nav a:hover { color: var(--relay-deep); }
.app-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }
.app-card { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 1.1rem; padding: 1.5rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); }
.app-card img { width: 48px; height: 48px; border-radius: 12px; }
.app-card h3 { margin-bottom: .5rem; font-size: 1.1rem; }
.app-card p { font-size: .94rem; }
.guide-basics { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.guide-basics h3 { margin-bottom: 1rem; font-size: 1.4rem; }
.guide-basics ul, .step-body ol { padding-left: 1.3rem; }
.guide-basics li + li, .step-body ol li + li { margin-top: .7rem; }
.guide-basics p + p { margin-top: 1rem; }
.guide-basics > article { border-top: 2px solid var(--relay); padding-top: 1.4rem; }
.guide-basics > article:last-child { border-top-color: var(--signal); }
.guide-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 2rem 0 0; padding: 1px; list-style: none; background: var(--line); border: 1px solid var(--line); }
.guide-checks li { display: flex; gap: .9rem; padding: 1.5rem; background: var(--paper); }
.guide-checks li::before { content: '✓'; flex-shrink: 0; color: var(--wave); font: 600 1.2rem var(--font-mono); }
.photo-note { margin-top: 1.5rem; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.expected-state { display: inline-block; margin: 1.5rem 0 .5rem; padding: .45rem .9rem; border: 1px solid var(--wave); color: var(--ink); border-radius: var(--radius-sm); font: 500 .9rem var(--font-mono); }
.step-body .ui { white-space: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.shot figcaption { overflow-wrap: anywhere; }
@media (max-width: 640px) {
 .app-pair, .guide-basics, .guide-checks { grid-template-columns: 1fr; }
 .app-card { padding: 1.1rem; gap: .8rem; grid-template-columns: 40px minmax(0,1fr); }
 .app-card img { width: 40px; height: 40px; border-radius: 9px; }
 .guide-nav .shell { gap: .2rem 1rem; }
 .guide-checks li { padding: 1.2rem; }
}