/*
  radiograph_browser.css?v=4 — shared styling (gallery, viewer, base layout)
  Pages can override theme tokens via :root { --accent: ...; --accent-focus: ... }
*/
:root {
  /* Fallback theme tokens */
  --bg: #0f172a;
  --panel: #111827;
  --muted: #374151;
  --text: #e5e7eb;
  --accent: #3b82f6;
  --accent-2: var(--accent);
  --accent-focus: rgba(59,130,246,0.25);
  --chip: #1f2937;
  --thumb-min: 110px;
}

/* Base layout / form elements */
* { box-sizing: border-box; }
body { margin:0; background: var(--bg); color: var(--text); overflow:hidden; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
header { position:sticky; top:0; z-index:10; background:linear-gradient(180deg, rgba(17,24,39,0.95), rgba(17,24,39,0.85)); backdrop-filter: blur(6px); border-bottom:1px solid #1f2937; }
.container { max-width:1200px; margin:0 auto; padding:12px; }
h1 { font-size:20px; margin:0 0 6px; }
.controls { display:grid; grid-template-columns: repeat(12,1fr); gap:8px 12px; align-items:start; }
.field { display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:start; }
.field.stack { grid-template-columns:1fr; row-gap:4px; }
.field label { font-size:15px; font-weight:600; color:#9ca3af; white-space:nowrap; }
.field label::after { content: ':'; margin-left:4px; }
select, input[type="text"], input[type=text] { background:var(--panel); color:var(--text); border:1px solid var(--muted); border-radius:8px; padding:8px 10px; outline:none; width:100%; max-width:100%; }
select:focus, input[type="text"]:focus, input[type=text]:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-focus); }
main { padding:16px; }
.gallery-panel { overflow:auto; }
footer { padding:10px; color:#9ca3af; text-align:center; }

/* Toggle chips (shared where used) */
.toggles { display:flex; flex-wrap:wrap; gap:6px; }
.toggle { background: var(--panel); color: var(--text); border:1px solid var(--muted); padding:4px 8px; border-radius:999px; cursor:pointer; font-size:11px; }
.toggle.active { background: var(--accent); border-color: var(--accent); color:#fff; }

/* Common gallery + viewer styles */
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(var(--thumb-min), 1fr)); }
.card { background:#0b1220; border:1px solid #1f2937; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }

.thumb {
  aspect-ratio: 4 / 3;
  background: #0a0a0a;
  display: flex;                  
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.thumb img {
  width: auto;                    /* intrinsic size */
  height: auto;
  max-width: 100%;                /* fit inside the box */
  max-height: 100%;
  display: block;
  margin: auto;                   /* belt-and-suspenders centering */
  object-fit: initial;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 200ms ease-out;
  backface-visibility: hidden;
  transform: translateZ(0) translateX(0);       /* keeps iOS compositing happy */
}


.thumb img.show { opacity:1; }

.thumb { position: relative; display:flex; align-items:center; justify-content:center; }

.thumb .spinner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border: 3px solid var(--muted);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  pointer-events: none;
}


@keyframes spin { to { transform: rotate(360deg);} }

.thumb .broken { color:#ef4444; font-size:12px; padding:8px; text-align:center; }
.thumb .click-overlay { position:absolute; bottom:8px; right:8px; background:rgba(2,6,23,0.65); color:#e5e7eb; border:1px solid #1f2937; padding:4px 6px; border-radius:6px; font-size:11px; line-height:1; opacity:0; transition:opacity 150ms ease; pointer-events:none; }
.thumb:hover .click-overlay { opacity:0.95; }
.info { padding:10px; display:grid; gap:6px; font-size:12px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { background: var(--chip); padding:2px 8px; border-radius:999px; border:1px solid #1f2937; color:#cbd5e1; }
/* Viewer overlay */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,0.96); z-index:100; display:none; }
.overlay.open { display:block; }
.viewer { position:absolute; inset:0; }
.viewer canvas { width:100%; height:100%; display:block; background:#000; }
.viewer .hint { position:absolute; bottom:12px; left:12px; color:#cbd5e1; font-size:12px; opacity:0.8; background:rgba(2,6,23,0.5); padding:6px 8px; border-radius:6px; }
.viewer .wl-label { position:absolute; top:12px; right:52px; color:#e5e7eb; font-size:12px; background: rgba(2,6,23,0.65); padding:6px 8px; border-radius:6px; transition: opacity 200ms ease; opacity:0; pointer-events:none; }
.viewer .close-btn { position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:1px solid #1f2937; background: rgba(2,6,23,0.8); color:#e5e7eb; font-size:18px; line-height:1; display:grid; place-items:center; cursor:pointer; }
.viewer .close-btn:hover { background: rgba(2,6,23,0.95); }
.viewer .infobar { position:absolute; top:12px; left:12px; color:#e5e7eb; font-size:13px; background: rgba(2,6,23,0.65); padding:8px 10px; border-radius:8px; display:grid; gap:6px; }
.viewer .nav-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid #1f2937; background:rgba(2,6,23,0.7); color:#e5e7eb; font-size:24px; line-height:1; display:grid; place-items:center; cursor:pointer; opacity:0.9; }
.viewer .nav-arrow:hover { background:rgba(2,6,23,0.9); }
.viewer .nav-arrow.left { left:12px; }
.viewer .nav-arrow.right { right:12px; }
.cursor-pan { cursor: grab; }
.cursor-rotate { cursor: ew-resize; }
.cursor-levels { cursor: crosshair; }