/* Variable Zoo — Catalog Search (DuckDB-WASM). Shares the teal-on-navy visual
   language of the homepage / explorer / observations apps. */
:root {
  --bg:#080b11; --bg2:#0e1420; --card:#121a26; --ink:#e9eff5; --mut:#8ea1b2;
  --teal:#2ec4b6; --teal-dim:#1c6f68; --line:#1f2c3c; --row-alt:#0e1420; --ok:#2ec4b6;
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); display:flex; flex-direction:column; min-height:100vh; }
a { color:var(--teal); text-decoration:none; } a:hover { text-decoration:underline; }

.vz-nav { display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:11px 22px;
  background:var(--bg2); border-bottom:1px solid var(--line); }
.vz-brand { display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:.02em; font-size:18px; color:var(--ink); }
.vz-brand:hover { text-decoration:none; }
.vz-emblem { height:30px; width:auto; border-radius:6px; }
.vz-links { display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-left:auto; }
.vz-links a { color:var(--mut); font-size:14px; } .vz-links a:hover { color:var(--ink); text-decoration:none; }
.vz-links a.active { color:var(--teal); font-weight:600; }

.app-head { padding:18px 22px 6px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.app-title { font-size:22px; margin:0; font-weight:700; }
.app-sub { color:var(--mut); font-size:13px; }
main { max-width:1080px; width:100%; margin:0 auto; padding:12px 22px 28px; flex:1 0 auto; }

.site-footer { flex-shrink:0; border-top:1px solid var(--line); background:var(--bg2); padding:16px 22px; color:var(--mut); font-size:12.5px; }
.site-footer p { margin:.15rem 0; } .site-footer .brandline { color:var(--ink); font-weight:600; }

/* boot banner */
#boot { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.7rem 1rem;
  color:var(--mut); font-size:.9rem; margin-bottom:1rem; display:flex; align-items:center; gap:.6rem; }
#boot .spin { width:14px; height:14px; border:2px solid var(--teal-dim); border-top-color:var(--teal);
  border-radius:50%; animation:spin .8s linear infinite; } #boot.done { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---- search form ---- */
.search-form { background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:1.1rem 1.25rem; display:flex; flex-direction:column; gap:.85rem; }
.field { display:flex; flex-direction:column; gap:.3rem; }
.field label { font-size:.8rem; color:var(--mut); }
.field-row { display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-end; }
.field-grow { flex:1 1 240px; }
input, select { padding:.45rem .6rem; border:1px solid var(--line); border-radius:7px;
  background:var(--bg2); color:var(--ink); font-size:.95rem; min-width:0; }
input:focus, select:focus { outline:none; border-color:var(--teal); }
input::placeholder { color:#5b6b7d; }
select:disabled { opacity:.5; }
.checkbox-field { display:flex; align-items:center; gap:.4rem; font-size:.9rem; color:var(--mut); }
input[type=checkbox] { accent-color:var(--teal); width:16px; height:16px; }
small { color:var(--mut); font-weight:400; }

.autocomplete { position:relative; }
.suggest { position:absolute; top:100%; left:0; right:0; z-index:20; margin:2px 0 0; padding:0; list-style:none;
  background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.5); max-height:320px; overflow:auto; }
.suggest li { padding:.4rem .65rem; font-size:.92rem; cursor:pointer; font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--ink); }
.suggest li.active, .suggest li:hover { background:var(--teal-dim); color:#fff; }

.more-options { border-top:1px solid var(--line); padding-top:.6rem; }
.more-options summary { cursor:pointer; color:var(--teal); font-size:.9rem; }
.more-options > .field-row { margin-top:.75rem; }
.more-options .field { flex:0 0 calc(25% - .5rem); min-width:0; }
.more-options .field input, .more-options .field select { width:100%; }

.actions-row { justify-content:space-between; align-items:center; }
.actions { display:flex; gap:.6rem; align-items:center; }
.spinner { width:18px; height:18px; border:2px solid var(--teal-dim); border-top-color:var(--teal);
  border-radius:50%; animation:spin .8s linear infinite; display:inline-block; flex:0 0 auto; }
.spinner[hidden] { display:none; }
button, .button-secondary { padding:.5rem 1.15rem; border-radius:7px; font-size:.95rem; cursor:pointer; border:1px solid var(--teal); }
button { background:var(--teal); color:#06231f; font-weight:600; } button:hover { background:#46d3c5; }
button:disabled { opacity:.5; cursor:default; }
.button-secondary { background:transparent; color:var(--teal); border-color:var(--line); }
.button-secondary:hover { border-color:var(--teal); text-decoration:none; }

.form-error { color:#ff8f8f; font-weight:600; }
.result-count { color:var(--mut); }
.result-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.1rem 0 .6rem; flex-wrap:wrap; }
.result-bar .button-secondary { font-size:.85rem; padding:.35rem .8rem; }

/* ---- tables ---- */
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
th, td { padding:.45rem .65rem; text-align:left; border-bottom:1px solid var(--line); font-size:.9rem; }
tbody tr:last-child td { border-bottom:none; }
.results-table th { background:var(--bg2); font-weight:600; color:var(--mut); white-space:nowrap; }
.results-table th.sortable { cursor:pointer; } .results-table th.sortable:hover { color:var(--ink); }
.results-table th .arr { color:var(--teal); }
.results-table tbody tr:hover { background:var(--bg2); }
.results-table td a { cursor:pointer; }
.coord-cell { font-variant-numeric:tabular-nums; white-space:nowrap; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.84rem; color:var(--ink); }
.pagination { display:flex; align-items:center; gap:1rem; margin:.9rem 0; color:var(--mut); }

/* ---- detail modal ---- */
.modal-back { position:fixed; inset:0; background:rgba(3,6,12,.72); z-index:100; display:flex;
  align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; }
.modal { background:var(--card); border:1px solid var(--line); border-radius:14px; max-width:860px; width:100%;
  padding:1.3rem 1.5rem; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.modal-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.modal-head h2 { margin:0; font-size:1.3rem; color:var(--ink); }
.modal-close { border:1px solid var(--line); background:transparent; color:var(--mut); border-radius:7px;
  padding:.2rem .6rem; cursor:pointer; font-size:1.1rem; } .modal-close:hover { color:var(--ink); border-color:var(--teal); }
.modal .chip { display:inline-block; font-family:ui-monospace,monospace; background:var(--bg2); border:1px solid var(--line);
  border-radius:6px; padding:.1rem .5rem; font-size:.85rem; color:var(--teal); }
.modal-cols { display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:1rem; }
.modal-cols .col { flex:1 1 320px; min-width:0; }
.kv-table th { width:150px; color:var(--mut); font-weight:600; background:var(--bg2); vertical-align:top; }
.coords { display:flex; flex-direction:column; gap:.35rem; margin:.4rem 0 .8rem; }
.coord { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.coord-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--mut); width:5.5rem; flex:0 0 auto; }
.coord code { font-size:.92rem; background:var(--bg2); border:1px solid var(--line); border-radius:5px; padding:.12rem .5rem; user-select:all; color:var(--ink); }
.copy { padding:.12rem .55rem; font-size:.76rem; border-radius:5px; border:1px solid var(--line); background:transparent; color:var(--teal); cursor:pointer; }
.copy:hover { background:var(--bg2); } .copy.copied { color:var(--ok); border-color:var(--ok); }
.sky-thumb { width:100%; height:340px; max-width:100%; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.ext-links { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem; }
.ext-links a { font-size:.85rem; border:1px solid var(--line); border-radius:7px; padding:.3rem .7rem; color:var(--teal); }
.ext-links a:hover { border-color:var(--teal); text-decoration:none; }

/* ---- full-page detail view ---- */
#detail h1 { font-size:1.5rem; margin:.5rem 0 1rem; color:var(--ink); }
#detail h2 { font-size:1.05rem; margin:1.8rem 0 .6rem; color:var(--ink); }
#detail .chip { display:inline-block; font-family:ui-monospace,monospace; background:var(--bg2);
  border:1px solid var(--line); border-radius:6px; padding:.1rem .5rem; font-size:.9rem; color:var(--teal); vertical-align:middle; }
.kv-table { width:100%; border:1px solid var(--line); }
.kv-table th { width:230px; color:var(--mut); font-weight:600; background:var(--bg2); vertical-align:top; }
.coord-search { font-size:.85rem; margin-top:.1rem; display:inline-block; }
#detail .sky-thumb { max-width:440px; }
.raw-note { color:var(--mut); font-size:.85rem; margin-top:.4rem; }
.biblio-list { padding-left:1.2rem; } .biblio-list li { margin-bottom:.3rem; font-size:.9rem; }

@media (max-width:640px) {
  main { padding:12px; }
  .field-row { flex-direction:column; align-items:stretch; }
  .more-options .field { flex:0 0 auto; }
  .vz-links { gap:14px; }
}

/* Variable Zoo id / type */
.vzid-cell, code.vzid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; color: #1a7f76; white-space: nowrap; }
.vztype-cell, code.vztype { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; white-space: nowrap; }