/* Three shared visual themes; Radio Shack is the default. */
:root { --button-ink:#101b24; --diagram:#0e1b25; --diagram-text:#a9bac5; --diagram-accent:#efb45f; }
:root[data-theme="association"] { color-scheme:light; --void:#f5f6f2; --panel:#fff; --panel-2:#eaf0ed; --signal:#166151; --glow:#237866; --amber:#905700; --green:#17634b; --text-hi:#182e2b; --text-lo:#52645f; --border:#cbd7d0; --button-ink:#fff; --r:16px; --r-lg:24px; }
:root[data-theme="field"] { color-scheme:dark; --void:#101b15; --panel:#16251d; --panel-2:#1e3025; --signal:#c4e783; --glow:#e0f5b7; --amber:#e2c784; --green:#a9dfb7; --text-hi:#edf2e6; --text-lo:#b1c3b2; --border:#3e5140; --button-ink:#182416; --diagram:#112219; --diagram-text:#b1c3b2; --diagram-accent:#c4e783; --r:2px; --r-lg:2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.theme-bar { max-width:1152px; margin:22px auto 0; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:14px 0; border-bottom:1px solid var(--border); }
.theme-intro { font-size:13px; color:var(--text-lo); }
.theme-intro .eyebrow { font-size:9px; margin-bottom:3px; }
.theme-options { display:flex; gap:8px; }
.theme-options button { display:flex; align-items:center; gap:10px; text-align:left; color:var(--text-hi); background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:10px 16px; cursor:pointer; font:600 12px 'Inter',sans-serif; min-height:54px; }
.theme-options small { display:block; font-size:10px; font-weight:400; color:var(--text-lo); margin-top:4px; }
.theme-options button[aria-pressed="true"] { border-color:var(--signal); box-shadow:inset 0 0 0 1px var(--signal); background:var(--panel-2); }
.swatch { width:22px; height:28px; border-radius:4px; border:1px solid #8888; flex-shrink:0; }
.swatch.shack { background:linear-gradient(135deg,#101e28 60%,#efb45f 60%); }
.swatch.association { background:linear-gradient(135deg,#f5f6f2 60%,#166151 60%); }
.swatch.field { background:linear-gradient(135deg,#16251d 60%,#c4e783 60%); }
a:focus-visible,button:focus-visible,input:focus-visible { outline-color:var(--signal); }
::selection { background:var(--signal); color:var(--button-ink); }
.radio-hero { padding-top:60px; padding-bottom:60px; }
.radio-copy h1 { font-size:clamp(44px,5.4vw,76px); }
.connection-strip { background:var(--panel-2); border-radius:var(--r); }
.host-copy { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.copy-host { border:1px solid var(--border); background:var(--panel); color:var(--text-hi); padding:8px 12px; border-radius:var(--r); cursor:pointer; font:11px 'Inter',sans-serif; min-height:36px; }
#copy-feedback { font-size:11px; letter-spacing:0; margin:4px 0 0; }
#copy-feedback:empty { display:none; }
.card,.ssid-table th { background:var(--panel-2); }
.card,.table-wrap,.station-img-wrap { border-radius:var(--r); }
.btn-primary,.passcode-tool .tool-btn { background:var(--signal); color:var(--button-ink); border-radius:var(--r); }
.btn-primary:hover,.passcode-tool .tool-btn:hover { background:var(--glow); color:var(--button-ink); }
.btn-outline { border-radius:var(--r); }
.btn-outline:hover { background:var(--signal); color:var(--button-ink); }
.footer { background:var(--panel); border-top:1px solid var(--border); }
.footer-sub,.footer-nav a,.footer-copy { color:var(--text-lo); }
.footer-name { color:var(--text-hi); }
.signal-panel { background:var(--diagram); border-radius:var(--r-lg); }
.signal-panel .panel-heading,.signal-panel .panel-bottom,.signal-panel .diagram-note { color:var(--diagram-text); }
.signal-panel .panel-bottom,.signal-panel .panel-heading { border-color:#49616b; }
.signal-panel .panel-bottom span:last-child { color:var(--diagram-accent); }
.signal-panel .indicator { background:var(--diagram-accent); }
.newcomer-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:80px; align-items:center; }
.newcomer-section { background:var(--void); }
.newcomer-section .section-desc { margin-bottom:24px; }
.start-steps { list-style:none; }
.start-steps li { display:flex; gap:22px; padding:24px 0; border-bottom:1px solid var(--border); }
.start-steps li:first-child { border-top:1px solid var(--border); }
.step-number { font:14px 'JetBrains Mono',monospace; color:var(--signal); padding-top:3px; }
.start-steps a { font-size:16px; font-weight:600; color:var(--text-hi); text-decoration:none; display:flex; justify-content:space-between; gap:20px; }
.start-steps a:hover { color:var(--signal); }
.start-steps p { color:var(--text-lo); font-size:13px; margin-top:6px; }
.start-steps li>div { flex:1; }
:root[data-theme="association"] .radio-copy h1 { font-family:Georgia,serif; font-weight:400; letter-spacing:-3px; }
:root[data-theme="association"] .signal-panel { transform:none; box-shadow:12px 12px 0 var(--panel-2); }
:root[data-theme="association"] .card { background:var(--panel); box-shadow:0 5px 20px #183e2910; }
:root[data-theme="association"] .section-title { font-family:Georgia,serif; font-weight:400; }
:root[data-theme="field"] .radio-copy h1,:root[data-theme="field"] .section-title,:root[data-theme="field"] .card-title { font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.01em; }
:root[data-theme="field"] .signal-panel { transform:none; box-shadow:none; border-color:var(--signal); }
:root[data-theme="field"] .radio-hero { background-image:linear-gradient(#94b98808 1px,transparent 1px),linear-gradient(90deg,#94b98808 1px,transparent 1px); background-size:32px 32px; }
:root[data-theme="field"] .network-art [stroke="#edb45e"] { stroke:var(--signal); }
:root[data-theme="field"] .network-art [fill="#edb45e"] { fill:var(--signal); }
:root[data-theme="field"] .card { border-top:3px solid var(--signal); }
:root[data-theme="association"] .passcode-tool .tool-result { background:var(--panel-2); color:var(--green); border-color:var(--green); }
@media(max-width:1280px) { .theme-bar { margin-left:5%; margin-right:5%; } }
@media(max-width:850px) { .theme-bar { align-items:flex-start; flex-direction:column; gap:12px; } .theme-options { width:100%; } .theme-options button { flex:1; } .newcomer-grid { gap:35px; } }
@media(max-width:700px) { .radio-hero { gap:35px; padding-top:35px; padding-bottom:40px; } .newcomer-grid { grid-template-columns:1fr; gap:12px; } .theme-options button { padding:10px 8px; gap:7px; font-size:11px; } .theme-options small { font-size:9px; } .swatch { width:14px; height:25px; } .radio-copy h1 { font-size:52px; } }
@media(max-width:380px) { .theme-options button { flex-direction:column; align-items:flex-start; } .theme-options small { font-size:8px; } .radio-copy h1 { font-size:44px; } }