/* ─────────────────────────────────────────────
   SKING — Centropolis FX Shot Board Archive
   Dark, monospace, utilitarian production aesthetic
   ───────────────────────────────────────────── */

:root {
  --bg:        #0a0a0a;
  --bg-card:   #111;
  --bg-overlay:#000;
  --border:    #1e1e1e;
  --border-hi: #333;
  --amber:     #e8a000;
  --amber-dim: #7a5200;
  --text:      #c8c8c8;
  --text-dim:  #555;
  --text-hi:   #f0f0f0;
  --font-mono: 'Courier New', Courier, monospace;
  --font-sans: system-ui, -apple-system, sans-serif;
  --hdr-h:     38px;

  /* sequence accent colors — subtle left/top borders */
  --seq-fa:   #d97706;
  --seq-ae:   #059669;
  --seq-ms:   #2563eb;
  --seq-tr:   #dc2626;
  --seq-fis:  #7c3aed;
  --seq-cs:   #0891b2;
  --seq-fia:  #ea580c;
  --seq-ss:   #65a30d;
  --seq-pg:   #db2777;
  --seq-iv:   #0d9488;
  --seq-gg:   #9333ea;
  --seq-ur:   #c2410c;
  --seq-bh:   #a16207;
  --seq-sand: #92400e;
  --seq-other:#374151;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
}

/* ─── HEADER ─── */

#hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hdr-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  z-index: 10;
  gap: 10px;
}

#hdr-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}

.hdr-code {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.12em;
  color: var(--amber);
  white-space: nowrap;
}

.hdr-sep {
  color: var(--text-dim);
  font-size: 11px;
}

.hdr-title {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

#hdr-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

#filter-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
  /* Fade edges to indicate more pills off-screen */
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

#filter-bar::-webkit-scrollbar { display: none; }

.seq-pill {
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  border: 1px solid var(--border-hi);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}

.seq-pill:hover {
  color: var(--text);
  border-color: var(--amber-dim);
}

.seq-pill.active {
  background: var(--amber);
  color: #000;
  border-color: var(--amber);
  font-weight: bold;
}

#shot-count {
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  padding-left: 4px;
}

/* ─── SHOT BOARD GRID ─── */

#board {
  position: fixed;
  top: var(--hdr-h);
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  /* cols/rows set via JS */
  align-content: start;
  overflow: hidden;
}

.shot-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color 0.12s;
}

.shot-card::before {
  /* sequence accent — 2px top line */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--seq-color, var(--border));
  z-index: 2;
  opacity: 0.7;
}

.shot-card:hover {
  border-color: var(--amber-dim);
  z-index: 3;
}

.shot-card:hover .card-label {
  opacity: 1;
}

.shot-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3px 5px 2px;
  background: rgba(0,0,0,0.82);
  font-size: 8px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.card-label .lbl-cfx {
  color: var(--amber);
  font-weight: bold;
}

/* Always show label when grid cells are large enough */
.show-labels .card-label {
  opacity: 1;
}

/* Empty placeholder cells */
.shot-card-empty {
  background: transparent;
  border: 1px solid #0e0e0e;
}

/* ─── OVERLAY ─── */

#overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

#overlay[hidden] {
  display: none;
}

#overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

#overlay-panel {
  position: relative;
  width: 90vw;
  max-width: 1400px;
  height: calc(100vh - 60px);
  max-height: 860px;
  background: #0d0d0d;
  border: 1px solid var(--border-hi);
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* ─── Overlay Header ─── */

#overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 40px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#overlay-shot-id {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--amber);
  font-weight: bold;
}

#overlay-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

#overlay-position {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  min-width: 54px;
  text-align: center;
}

#prev-btn, #next-btn, #overlay-close {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
  line-height: 1;
}

#prev-btn:hover, #next-btn:hover {
  color: var(--amber);
  border-color: var(--amber-dim);
}

#overlay-close {
  font-size: 18px;
  padding: 0 8px;
  border-color: transparent;
  color: var(--text-dim);
}

#overlay-close:hover {
  color: var(--text-hi);
  border-color: var(--border-hi);
}

/* ─── Overlay Body ─── */

#overlay-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

#overlay-img-wrap {
  flex: 0 0 62%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080808;
  border-right: 1px solid var(--border);
  padding: 16px;
  overflow: hidden;
}

#overlay-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

#overlay-meta {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-hi) transparent;
}

#overlay-meta::-webkit-scrollbar { width: 4px; }
#overlay-meta::-webkit-scrollbar-track { background: transparent; }
#overlay-meta::-webkit-scrollbar-thumb { background: var(--border-hi); }

/* ─── Metadata Fields ─── */

.meta-field {
  margin-bottom: 18px;
}

.meta-label {
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.meta-value {
  font-size: 12px;
  color: var(--text-hi);
  line-height: 1.55;
  word-break: break-word;
}

.meta-value.pending {
  color: var(--text-dim);
  font-style: italic;
  font-size: 11px;
}

.meta-value .allcaps-note {
  /* ALL CAPS revision annotations per PRD */
  color: var(--amber);
}

.meta-cfx {
  font-size: 18px;
  font-weight: bold;
  color: var(--amber);
  letter-spacing: 0.08em;
}

.meta-frames {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.meta-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

/* ─── Responsive: mobile/tablet ─── */

@media (max-width: 700px) {
  #overlay-body {
    flex-direction: column;
  }

  #overlay-img-wrap {
    flex: 0 0 50%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  #overlay-panel {
    width: 98vw;
    height: calc(100vh - 20px);
    max-height: none;
  }

  .hdr-title,
  .hdr-sep {
    display: none;
  }
}