:root{
  --bg:#0a0b0d;
  --panel:#14161a;
  --border:#262a30;
  --text:#dfe3e8;
  --muted:#8b96a3;
  --muted2:#5f6873;
  --accent:#ffb454;
  /* without this, Chromium's native <audio controls> renders its light-theme
     pill regardless of page CSS — this is the one hook that actually changes it */
  color-scheme:dark;
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--text); }
body{ font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; }
code, pre{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

header#page-header{ padding:20px 24px 4px; }
header#page-header h1{
  margin:0; font-size:20px; font-weight:400; color:var(--text);
}
header#page-header h1 .q{ color:var(--accent); font-weight:600; }

/* the "main search interface": only shown at the root URL (no ?q=) */
#search-form{ display:flex; gap:10px; margin-top:16px; max-width:640px; }
#search-form[hidden]{ display:none; }
#search-form input{
  flex:1 1 auto; background:var(--panel); border:1px solid var(--border);
  border-radius:4px; color:var(--text); font-size:14px; padding:10px 14px;
}
#search-form input:focus{ outline:none; border-color:var(--accent); }
#search-form button{
  flex:0 0 auto; background:none; border:1px solid var(--border);
  border-radius:4px; color:var(--muted); font-size:13px; padding:10px 18px;
  cursor:pointer;
}
#search-form button:hover{ color:var(--accent); border-color:var(--accent); }

#status{ padding:8px 24px 16px; color:var(--muted); font-size:13px; }
#status.err{ color:#ff7b72; }

#hits{ width:100%; padding:0 24px 120px; }

/* one flat row per record — no card, no border-radius, no background;
   the only separation between records is a plain grey divider line */
.hit{
  display:flex; align-items:center; flex-wrap:wrap; gap:22px;
  padding:22px 0; border-bottom:1px solid var(--border);
}
.hit:last-child{ border-bottom:none; }
.hit h2{
  flex:0 0 280px; max-width:280px;
  font-size:13px; margin:0; font-weight:400; color:var(--muted);
  word-break:break-all;
}

.media{ display:flex; align-items:center; gap:14px; }
/* no chip: no border, no background, no rounded box — just the bare element */
.media img{ width:150px; height:150px; object-fit:contain; }
model-viewer, .splat{ width:150px; height:150px; }
audio{ width:220px; }

.zoom-btn{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--border); background:none; color:var(--muted);
  font-size:16px; line-height:1; cursor:pointer;
}
.zoom-btn:hover{ color:var(--accent); border-color:var(--accent); }

#lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,0.92);
  display:flex; align-items:center; justify-content:center; padding:40px;
}
#lightbox[hidden]{ display:none; }
/* three media kinds can share the lightbox at once, so each gets a third
   of the width rather than the single-item 88vw/60vw a solo image used */
#lightbox-content{ display:flex; gap:24px; align-items:center; justify-content:center; flex-wrap:wrap; max-width:96vw; max-height:92vh; }
#lightbox-content img{ max-width:30vw; max-height:82vh; object-fit:contain; }
#lightbox-content model-viewer{ width:30vw; height:82vh; }
#lightbox-content .splat{ width:30vw; height:82vh; }
#lightbox-close{
  position:absolute; top:20px; right:28px; background:none; border:none;
  color:var(--text); font-size:32px; line-height:1; cursor:pointer;
}
#lightbox-close:hover{ color:var(--accent); }

/* every audio output together, stacked vertically as one column in the row */
.audio-stack{ display:flex; flex-direction:column; gap:8px; }
.audio-stem{ display:flex; align-items:center; gap:8px; }
.audio-stem label{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; width:50px; flex:0 0 auto; }

details{ margin-left:auto; }
summary{ cursor:pointer; color:var(--muted); font-size:12px; }
summary:hover{ color:var(--accent); }
pre{
  background:#1a1d22; border:1px solid var(--border); border-radius:8px;
  padding:10px 12px; font-size:12px; overflow-x:auto; white-space:pre-wrap; word-break:break-word;
}

.empty{ color:var(--muted2); padding:30px 20px; }

.next-link{
  display:block; padding:20px 0; color:var(--muted); font-size:13px;
  text-decoration:none;
}
.next-link:hover{ color:var(--accent); }