/* radioref.us — VARØ Industries design system */
:root {
  --bg: #080810;
  --bg-card: #0e0e1c;
  --bg-card2: #111125;
  --bg-hover: #14142a;
  --border: #1e1e3a;
  --border-bright: #2e2e54;
  --accent: #ffae00;
  --accent-dim: rgba(255,174,0,.12);
  --accent-glow: rgba(255,174,0,.25);
  --accent2: #4cc9f0;
  --text: #e8e8f0;
  --text-muted: #7878a0;
  --text-dim: #4a4a6a;
  --red: #ff4d6a;
  --yellow: #ffd166;
  --green: #06d6a0;
  --blue: #4cc9f0;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-sans: 'Inter', system-ui, sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 48px rgba(0,0,0,.6);
  --transition: .18s cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] {
  --bg: #f4f4f8;
  --bg-card: #ffffff;
  --bg-card2: #f8f8fc;
  --bg-hover: #f0f0f8;
  --border: #e0e0ec;
  --border-bright: #c8c8e0;
  --accent: #b87700;
  --accent-dim: rgba(184,119,0,.1);
  --accent-glow: rgba(184,119,0,.2);
  --text: #1a1a2e;
  --text-muted: #5a5a7a;
  --text-dim: #9090b0;
  --shadow: 0 2px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
}
a { color: var(--accent2); }

/* ── Header ── */
header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1080px; margin: 0 auto; padding: .7rem 1rem;
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
}
.logo { display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--text); }
.logo svg { display:block; }
.logo .logo-text { font-family: var(--font-mono); font-weight:700; font-size:1.25rem; letter-spacing:-.5px; }
.logo .logo-text b { color: var(--accent); font-weight:700; }
.tagline { font-size:.72rem; color:var(--text-muted); font-family:var(--font-mono); letter-spacing:.5px; }
.header-right { margin-left:auto; display:flex; align-items:center; gap:.5rem; }
#theme-toggle {
  background:none; border:1px solid var(--border); color:var(--text-muted);
  width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1rem;
  transition: var(--transition);
}
#theme-toggle:hover { color:var(--accent); border-color:var(--accent); }
#net-dot { font-size:.68rem; font-family:var(--font-mono); color:var(--text-dim); display:flex; align-items:center; gap:.3rem; }
#net-dot::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; }
#net-dot.offline::before { background: var(--yellow); }

/* ── Nav pills ── */
.nav-row {
  max-width:1080px; margin:0 auto; padding:0 1rem .6rem;
  display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none;
}
.nav-row::-webkit-scrollbar { display:none; }
.nav-pill {
  background: var(--bg-card); border:1px solid var(--border); color:var(--text-muted);
  padding:.34rem .8rem; border-radius:99px; font-size:.78rem; cursor:pointer;
  white-space:nowrap; font-family:var(--font-sans); font-weight:500;
  transition: var(--transition);
}
.nav-pill:hover { border-color:var(--accent); color:var(--text); }
.nav-pill.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }

/* ── Hero / search ── */
.hero { max-width:1080px; margin:0 auto; padding:1.6rem 1rem .4rem; text-align:center; }
.hero h1 { font-size:1.5rem; font-weight:700; letter-spacing:-.5px; }
.hero h1 .amp { color: var(--accent); }
.hero p.sub { color:var(--text-muted); font-size:.88rem; margin-top:.25rem; }
.searchwrap {
  max-width:640px; margin:1.1rem auto 0; position:relative;
}
.searchwrap .search-icon {
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  color:var(--text-dim); pointer-events:none; font-size:1rem;
}
#search {
  width:100%; padding:.95rem 2.8rem .95rem 2.7rem;
  background:var(--bg-card); color:var(--text);
  border:1px solid var(--border-bright); border-radius:var(--radius);
  font-family:var(--font-mono); font-size:.95rem;
  outline:none; box-shadow:var(--shadow);
  transition: var(--transition);
}
#search:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim), var(--shadow); }
#search::placeholder { color:var(--text-dim); }
#clear-search {
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-dim); cursor:pointer;
  font-size:1.1rem; padding:.3rem; display:none;
}
#clear-search:hover { color:var(--text); }
.hint { font-size:.72rem; color:var(--text-dim); margin-top:.5rem; font-family:var(--font-mono); }
.hint button { background:none;border:none;color:var(--accent2);cursor:pointer;font:inherit;padding:0; }

/* ── Main / sections ── */
main { max-width:1080px; margin:0 auto; padding:1rem 1rem 3rem; }
.section { margin-top:2rem; scroll-margin-top:120px; }
.section-head { display:flex; align-items:baseline; gap:.6rem; margin-bottom:.35rem; }
.section-head h2 { font-size:1.05rem; font-weight:700; }
.section-head .icon { font-size:1.1rem; }
.section-head .count { font-size:.7rem; color:var(--text-dim); font-family:var(--font-mono); }
.section .blurb { color:var(--text-muted); font-size:.82rem; max-width:70ch; margin-bottom:.8rem; }

.tablewrap {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); overflow-x:auto; box-shadow:var(--shadow);
}
table.db { width:100%; border-collapse:collapse; font-size:.85rem; }
table.db th {
  text-align:left; padding:.55rem .9rem; color:var(--text-dim);
  font-size:.68rem; text-transform:uppercase; letter-spacing:1px;
  border-bottom:1px solid var(--border); font-family:var(--font-mono); font-weight:600;
  white-space:nowrap;
}
table.db td { padding:.5rem .9rem; border-bottom:1px solid var(--border); vertical-align:top; }
table.db tr:last-child td { border-bottom:none; }
table.db tbody tr { transition: background var(--transition); }
table.db tbody tr:hover { background:var(--bg-hover); }
tr.hot td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
td.name { font-weight:600; white-space:nowrap; }
td.freq { font-family:var(--font-mono); color:var(--accent); min-width:110px; }
td.mode { color:var(--text-muted); font-size:.78rem; font-family:var(--font-mono); }
td.desc { color:var(--text-muted); font-size:.8rem; min-width:200px; }
.copybtn {
  background:none; border:none; color:var(--text-dim); cursor:pointer;
  font-size:.75rem; padding:0 .25rem; opacity:0; transition:var(--transition);
  vertical-align:middle;
}
tr:hover .copybtn { opacity:1; }
.copybtn:hover { color:var(--accent); }
.copybtn.copied { color:var(--green); opacity:1; }

/* category chip in search results */
.catchip {
  display:inline-block; font-size:.62rem; font-family:var(--font-mono);
  background:var(--accent-dim); color:var(--accent); border-radius:4px;
  padding:.08rem .4rem; margin-right:.4rem; white-space:nowrap; vertical-align:middle;
}

/* ── Learn cards ── */
.learn-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:.8rem; }
.learn-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem 1.1rem; box-shadow:var(--shadow);
}
.learn-card summary {
  cursor:pointer; font-weight:600; font-size:.9rem; list-style:none;
  display:flex; align-items:center; gap:.5rem;
}
.learn-card summary::-webkit-details-marker { display:none; }
.learn-card summary::after { content:"+"; margin-left:auto; color:var(--text-dim); font-family:var(--font-mono); }
.learn-card[open] summary::after { content:"−"; }
.learn-card .body { margin-top:.7rem; font-size:.82rem; color:var(--text-muted); }
.learn-card .body p + p, .learn-card .body ul, .learn-card .body ol { margin-top:.5rem; }
.learn-card .body li { margin:.25rem 0 .25rem 1.1rem; }
.learn-card .body strong { color:var(--text); }
table.mini { width:100%; border-collapse:collapse; font-size:.76rem; margin:.3rem 0 .5rem; }
table.mini th, table.mini td { text-align:left; padding:.3rem .5rem; border-bottom:1px solid var(--border); }
table.mini th { color:var(--text-dim); font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; }

/* ── No results ── */
#noresults { text-align:center; color:var(--text-muted); padding:3rem 1rem; display:none; }
#noresults .big { font-size:2rem; }

/* ── Install banner ── */
.install-banner {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:var(--bg-card2); border-top:1px solid var(--border-bright);
  box-shadow:var(--shadow-lg);
  display:none; align-items:center; gap:.9rem;
  padding:.8rem 1rem; max-width:100%;
}
.install-banner.show { display:flex; }
.install-banner-icon { font-size:1.6rem; }
.install-banner-body { flex:1; min-width:0; }
.install-banner-title { font-weight:600; font-size:.88rem; }
.install-banner-text { font-size:.75rem; color:var(--text-muted); }
.install-banner-actions { margin-top:.35rem; }
.btn-accent {
  background:var(--accent); color:#111; border:none; border-radius:var(--radius-sm);
  padding:.4rem .9rem; font-weight:600; font-size:.8rem; cursor:pointer;
  font-family:var(--font-sans); transition:var(--transition);
}
.btn-accent:hover { filter:brightness(1.1); }
.install-banner-close {
  background:none; border:none; color:var(--text-dim); font-size:1.1rem; cursor:pointer; padding:.4rem;
}
.install-banner-close:hover { color:var(--text); }

/* footer install nudge */
.install-nudge {
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--accent); cursor:pointer; background:none; border:1px solid var(--accent);
  border-radius:99px; padding:.3rem .9rem; font-size:.75rem; font-family:var(--font-mono);
  margin-bottom:1rem; transition:var(--transition); text-decoration:none;
}
.install-nudge:hover { background:var(--accent-dim); }
.install-nudge.installed { border-color:var(--green); color:var(--green); cursor:default; }

/* ── Footer ── */
footer {
  text-align:center; padding:1.5rem 1rem 5rem; font-size:.72rem;
  color:var(--text-muted); border-top:1px solid var(--border);
  font-family:var(--font-mono); line-height:2;
}
footer a { color:var(--text-muted); }
footer .sep { margin:0 .4rem; opacity:.4; }

@media (max-width:640px) {
  .tagline { display:none; }
  .hero h1 { font-size:1.2rem; }
  td.desc { min-width:150px; }
}
@media print {
  header, .install-banner, footer, .hint, #theme-toggle { display:none !important; }
  body { background:#fff; color:#000; }
  .tablewrap { box-shadow:none; border-color:#ccc; }
}