/* /self-host only (templates/self_host.html). Split out of style.css (#342). */
/* ---------- Host it yourself (/self-host) ---------- */
.selfhost { max-width: 820px; margin: 0 auto; overflow-wrap: anywhere; }
.selfhost h2 { font-size: 1.45rem; margin: 0 0 .8rem; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.selfhost h3 { margin: 1.3rem 0 .4rem; }
.selfhost code { background: var(--surface); border: 1px solid var(--line); padding: 0 .3em; border-radius: 4px; font-size: .9em; overflow-wrap: anywhere; }
.sh-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem; align-items: center; margin: .5rem 0 1.5rem; }
.sh-hero h1 { font-size: 2.3rem; letter-spacing: -.01em; }
.sh-art { display: block; width: 100%; height: auto; }
.sh-blob { fill: color-mix(in srgb, var(--gold) 16%, transparent); }
.sh-spark { fill: var(--gold); }
.sh-wifi path { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; }
.sh-wifi circle { fill: var(--gold); }
.sh-hero-art .sh-wifi path { animation: sh-pulse 2.4s ease-in-out infinite; }
.sh-hero-art .sh-wifi path:nth-child(2) { animation-delay: .25s; }
.sh-hero-art .sh-wifi path:nth-child(3) { animation-delay: .5s; }
@keyframes sh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sh-hero-art .sh-wifi path { animation: none; } }
.sh-link { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 5; stroke-linecap: round; }
.sh-pi .board { fill: #2e8b57; }
.sh-pi .hole { fill: var(--bg); }
.sh-pi .gpio { stroke: var(--gold); stroke-width: 4; stroke-dasharray: 3 2; }
.sh-pi .chip { fill: #1f2328; }
.sh-pi .port, .sh-pi .sd { fill: #c9ccd1; }
.sh-label { fill: var(--muted); font: 600 12px var(--font); }
.sh-device .frame { fill: var(--surface); stroke: var(--text); stroke-width: 3; }
.sh-device .screen { fill: var(--bg); }
.sh-device .notch, .sh-device .base { fill: var(--text); }
.sh-device .bar-accent { fill: var(--accent); }
.sh-device .track { fill: var(--line); }
.sh-device .fill-ok, .sh-device .tick { fill: var(--ok); }
.sh-device .tick-mark { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-device .sh-t1 { fill: color-mix(in srgb, var(--gold) 70%, transparent); }
.sh-device .sh-t2 { fill: color-mix(in srgb, var(--ok) 60%, transparent); }
.sh-device .sh-t3 { fill: color-mix(in srgb, var(--accent) 55%, transparent); }
.sh-device .sh-t4 { fill: color-mix(in srgb, var(--tutor) 55%, transparent); }
.sh-sdcard { fill: var(--accent); }
.sh-contacts { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.sh-sdlabel { fill: var(--surface); }
.sh-plug { fill: var(--text); }
.sh-prong { stroke: #9aa0a6; stroke-width: 4; stroke-linecap: round; }
.sh-cable { fill: none; stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.sh-bolt { fill: var(--gold); }
.sh-house { fill: var(--surface); stroke: var(--text); stroke-width: 3; stroke-linejoin: round; }
.sh-tunnel { fill: none; stroke: var(--ok); stroke-width: 4; stroke-dasharray: 2 8; stroke-linecap: round; }
.sh-lock-bg { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.sh-lock { fill: var(--gold); }
.sh-shackle { fill: none; stroke: var(--gold); stroke-width: 3; }

.sh-toc { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); margin: 0 0 1.5rem; }
.sh-toc ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: .55rem 0; counter-reset: sh; }
.sh-toc li { counter-increment: sh; flex: none; }
.sh-toc a { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .85rem; white-space: nowrap; }
.sh-toc a::before { content: counter(sh); font-weight: 700; color: var(--accent); margin-right: .35rem; }
.sh-toc a:hover { text-decoration: none; border-color: var(--gold); }

.sh-step { margin: 0 0 2.6rem; scroll-margin-top: 3.5rem; }
.sh-num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1rem; flex: none; }
.sh-optional { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .55rem; }
.sh-reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.sh-reason { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.sh-reason p { margin: .3rem 0 0; color: var(--muted); font-size: .93rem; }
.sh-need { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sh-need li { display: flex; gap: .9rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .9rem; }
.sh-need p { margin: .1rem 0 0; color: var(--muted); font-size: .92rem; }
.sh-icon { width: 52px; height: 52px; flex: none; }
.sh-price { font-size: .8rem; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0 .5rem; white-space: nowrap; }
.sh-buy { display: inline-block; margin-top: .25rem; font-size: .88rem; font-weight: 600; }
.sh-total { background: var(--warn-bg); border-radius: var(--radius); padding: .7rem 1rem; margin-top: .9rem; }
.sh-list { padding-left: 1.3rem; }
.sh-list > li { margin: .55rem 0; }
.sh-settings { list-style: none; padding: 0; margin: .6rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sh-settings li { padding: .5rem .8rem; border-top: 1px solid var(--line); }
.sh-settings li:first-child { border-top: 0; }
.sh-settings span { display: inline-block; min-width: 9.5rem; font-weight: 700; }
.sh-tip { background: var(--surface); border-left: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; padding: .65rem .9rem; margin: 1rem 0; }
.sh-cmd { position: relative; margin: .6rem 0; }
.sh-cmd pre { margin: 0; background: #1f2328; color: #e8e6e1; border-radius: var(--radius); padding: 2.4rem 1rem .9rem; overflow-x: auto; font-size: .85rem; line-height: 1.55; }
.sh-cmd code, .selfhost .sh-cmd code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; overflow-wrap: normal; }
.sh-copy { position: absolute; top: .45rem; right: .45rem; font-size: .75rem; padding: .25rem .6rem; border-radius: 6px; border: 1px solid #4b5058; background: #2c3036; color: #e8e6e1; cursor: pointer; }
.sh-copy:hover { border-color: var(--gold); }
.sh-url { display: flex; align-items: center; gap: .6rem; max-width: 26rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1.1rem; font: 600 1.05rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 8%, transparent); overflow-wrap: anywhere; }
.sh-url-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--ok); flex: none; }
.sh-away-art { max-width: 420px; margin: 1rem auto; }
.sh-ideas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1rem 0; }
.sh-idea { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; color: var(--text); }
.sh-idea:hover { text-decoration: none; border-color: var(--gold); }
.sh-idea span { display: block; color: var(--muted); font-size: .92rem; margin-top: .25rem; }
.sh-footnote { border-top: 1px solid var(--line); padding-top: 1rem; }
@media (max-width: 760px) {
  .sh-hero { grid-template-columns: 1fr; }
  .sh-hero h1 { font-size: 1.85rem; }
  .sh-hero-art { max-width: 320px; margin: 0 auto; order: -1; }
  .sh-reasons, .sh-ideas { grid-template-columns: 1fr; }
  .sh-settings span { display: block; min-width: 0; }
  .sh-toc ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}