/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:       #1b1b1b;
  --panel:    #242424;
  --panel2:   #2d2d2d;
  --border:   #3c3c3c;
  --accent:   #f05820;
  --green:    #56a356;
  --red:      #d44040;
  --blue:     #4a8fd4;
  --text:     #c8c8c8;
  --dim:      #6a6a6a;
  /* RGB triplets for translucent tints — keep in sync with the hex vars above */
  --accent-rgb: 240, 88, 32;
  --green-rgb:  86, 163, 86;
  --red-rgb:    212, 64, 64;
  --blue-rgb:   74, 143, 212;
  --dim-rgb:    106, 106, 106;
  --font-mono: 'Courier Prime', 'Courier New', monospace;
  --font-ui:   'Barlow Condensed', Arial Narrow, sans-serif;
}
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 14px; overflow: hidden; }
button { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.04em; cursor: pointer; border: 1px solid var(--border); background: var(--panel2); color: var(--text); padding: 5px 12px; font-size: 13px; text-transform: uppercase; }
button:hover { background: var(--panel); border-color: var(--accent); color: var(--accent); }
button:active { transform: translateY(1px); }
input[type="text"] { font-family: var(--font-mono); background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 5px 8px; font-size: 13px; outline: none; }
input[type="text"]:focus { border-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); }

/* ── Layout shell ── */
#app { display: flex; flex-direction: column; height: 100vh; }

/* ── Header ── */
#header {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; height: 44px; min-height: 44px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  flex-shrink: 0; overflow: hidden;
  position: relative; z-index: 110;
}
#logo { font-family: var(--font-ui); font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: 0.1em; white-space: nowrap; }
#header-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
#comp-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; overflow: hidden; }
#comp-id { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
#comp-desc { font-family: var(--font-mono); font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.prog-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 80px; flex-shrink: 0; }
.prog-label { font-family: var(--font-ui); font-size: 10px; color: var(--dim); white-space: nowrap; }
.prog-bar { height: 5px; background: var(--border); position: relative; width: 100%; min-width: 60px; }
.prog-bar-fill { height: 100%; background: var(--accent); transition: width 0.3s; }
.prog-bar-fill.green { background: var(--green); }
#session-count { font-family: var(--font-ui); font-size: 13px; color: var(--dim); white-space: nowrap; flex-shrink: 0; }

/* Username / login area */
#auth-area { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
#username { width: 140px; }
#username.valid { border-color: var(--green); }
#username.error { border-color: var(--red); }
#username-hint { font-size: 11px; color: var(--dim); white-space: nowrap; font-family: var(--font-mono); }
#username-err  { font-size: 11px; color: var(--red); white-space: nowrap; font-family: var(--font-mono); max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
#btn-login  { color: var(--green); border-color: var(--green); }
#btn-login:hover  { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); }
#btn-logout { color: var(--dim); border-color: var(--border); }
#btn-logout:hover { color: var(--red); border-color: var(--red); background: rgba(var(--red-rgb),0.1); }
#btn-config { color: var(--blue); border-color: var(--blue); flex-shrink: 0; }
#btn-config:hover { color: var(--accent); border-color: var(--accent); }

/* ── Viewer ── */
#viewer {
  flex: 1; display: flex; overflow: hidden; position: relative;
  cursor: crosshair; user-select: none;
}
.pane {
  flex: 1; position: relative; overflow: hidden;
  border-right: 1px solid var(--border);
}
.pane:last-child { border-right: none; }
#viewer.solo .pane { border-right: none; }
.pane-label {
  position: absolute; top: 8px; left: 10px; z-index: 10;
  font-family: var(--font-ui); font-size: 18px; font-weight: 700;
  color: rgba(255,255,255,0.85); text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  pointer-events: none;
}
.zoom-readout {
  position: absolute; bottom: 8px; right: 10px; z-index: 10;
  font-family: var(--font-ui); font-size: 11px; color: rgba(200,208,208,0.7);
  pointer-events: none;
}
/* Image: anchored at top-left so transform math is correct */
.pane-img {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  display: block;
  max-width: none; max-height: none;
  pointer-events: none;
}
/* Overlay states */
.pane-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px;
  background: rgba(13,15,15,0.85);
}
.pane-overlay.hidden { display: none; }
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.overlay-msg { font-family: var(--font-ui); font-size: 14px; color: var(--dim); }

/* Done / completion / transition overlays */
#done-overlay, #comp-overlay, #transition-overlay, #all-done-overlay, #reviewed-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(22,22,22,1);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 20px;
}
#done-overlay.show, #comp-overlay.show,
#transition-overlay.show, #all-done-overlay.show,
#reviewed-overlay.show { display: flex; }

/* Transition overlay specifics */
#transition-next-box {
  background: var(--panel); border: 1px solid var(--border);
  padding: 16px 24px; max-width: 480px; width: 90%;
  display: flex; flex-direction: column; gap: 8px;
}
#transition-next-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; color: var(--dim); letter-spacing: 0.12em; }
#transition-next-id    { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
#transition-next-desc  { font-family: var(--font-mono); font-size: 13px; color: var(--text); line-height: 1.5; }
#btn-start-next { margin-top: 6px; border-color: var(--accent); color: var(--accent); padding: 8px 28px; font-size: 14px; }
#btn-start-next:hover { background: rgba(var(--accent-rgb),0.15); }
.overlay-title { font-family: var(--font-ui); font-size: 32px; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; }
.overlay-sub { font-family: var(--font-mono); font-size: 13px; color: var(--dim); text-align: center; }
.teammate-list { list-style: none; display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.teammate-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--border); }
.teammate-name { font-family: var(--font-mono); font-size: 13px; }
.teammate-prog { font-family: var(--font-ui); font-size: 12px; color: var(--dim); white-space: nowrap; }
.teammate-done { color: var(--green); }

/* ── Controls bar ── */
#controls {
  display: flex; align-items: center; gap: 0;
  padding: 0 16px; height: 50px; min-height: 50px;
  background: var(--panel); border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ctrl-group { display: flex; align-items: center; gap: 5px; padding: 0 12px; }
.ctrl-group:first-child { padding-left: 0; }
.ctrl-group:last-child  { padding-right: 0; }
.ctrl-divider { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }
.ctrl-spacer  { flex: 1; min-width: 8px; }
/* View-mode toggle + A/B flip (single view). Both buttons are labelled with the
   destination ("Single" / "Show B"), so neither carries a current-state highlight. */
#btn-viewmode { min-width: 68px; }
#btn-flip { min-width: 76px; }
#btn-flip:disabled { opacity: 0.4; cursor: default; }
#btn-flip:disabled:hover { background: var(--panel2); border-color: var(--border); color: var(--text); }
#filename { font-family: var(--font-mono); font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
#autonext-wrap { display: flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: 12px; color: var(--dim); white-space: nowrap; cursor: pointer; }
#notes { width: 180px; }
.vote-btn { font-size: 13px; padding: 5px 16px; }
#vote-1 { color: #c0392b; border-color: #c0392b; }
#vote-2 { color: #c0622b; border-color: #c0622b; }
#vote-3 { color: #c9a227; border-color: #c9a227; }
#vote-4 { color: #5a9e3a; border-color: #5a9e3a; }
#vote-5 { color: #27ae60; border-color: #27ae60; }
#vote-1:hover, #vote-1.selected { background: rgba(192,57,43,.18);  border-color: #c0392b; color: #c0392b; }
#vote-2:hover, #vote-2.selected { background: rgba(192,98,43,.18);  border-color: #c0622b; color: #c0622b; }
#vote-3:hover, #vote-3.selected { background: rgba(201,162,39,.18); border-color: #c9a227; color: #c9a227; }
#vote-4:hover, #vote-4.selected { background: rgba(90,158,58,.18);  border-color: #5a9e3a; color: #5a9e3a; }
#vote-5:hover, #vote-5.selected { background: rgba(39,174,96,.18);  border-color: #27ae60; color: #27ae60; }
.tag-btn { font-size: 11px; padding: 3px 10px; border: 1px solid var(--border); background: transparent; color: var(--dim); cursor: pointer; border-radius: 3px; transition: all 0.1s; }
.tag-btn:hover { border-color: var(--accent); color: var(--accent); }
.tag-btn.active { border-color: var(--accent); background: rgba(var(--accent-rgb),0.18); color: var(--accent); }
.tag-btn.review-tag { pointer-events: none; border-color: var(--border); color: var(--text); }
.tag-btn.review-tag .tag-count { color: var(--dim); font-size: 10px; }
.vote-btn:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.12); color: var(--accent); }
.vote-btn.selected { background: rgba(var(--accent-rgb),0.2); border-color: var(--accent); color: var(--accent); }
/* Single view: the side currently on screen — i.e. what C votes for */
.vote-btn.shown-side { box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb),0.55); }
#vote-both:hover, #vote-both.selected   { border-color: var(--green); background: rgba(var(--green-rgb),0.2);  color: var(--green); }
#vote-neither:hover, #vote-neither.selected { border-color: var(--red); background: rgba(var(--red-rgb),0.2); color: var(--red); }
#btn-next { border-color: var(--accent); color: var(--accent); padding: 5px 18px; }
#btn-next:hover { background: rgba(var(--accent-rgb),0.15); }

/* ── Shortcut legend ── */
#shortcut-legend {
  position: fixed; bottom: 60px; right: 14px; z-index: 200;
  background: var(--panel); border: 1px solid var(--border);
  padding: 12px 16px; font-family: var(--font-mono); font-size: 12px;
  display: none; min-width: 200px;
}
#shortcut-legend.show { display: block; }
#shortcut-legend table { border-collapse: collapse; width: 100%; }
#shortcut-legend td { padding: 2px 8px 2px 0; color: var(--text); }
#shortcut-legend td:first-child { color: var(--accent); font-weight: 700; white-space: nowrap; }
#shortcut-legend tr.legend-head td { color: var(--dim); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; padding-top: 10px; }
#shortcut-legend tr.legend-head:first-child td { padding-top: 0; }

/* ── Toast ── */
#toast {
  position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%);
  background: var(--panel2); border: 1px solid var(--green);
  color: var(--green); font-family: var(--font-ui); font-size: 14px;
  padding: 8px 20px; z-index: 300;
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
#toast.show { opacity: 1; }

/* ── Config drawer ── */
#drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 400; display: none;
}
#drawer-backdrop.show { display: block; }
#drawer {
  position: fixed; top: 0; right: -480px; width: 480px; height: 100%;
  background: var(--panel); border-left: 1px solid var(--border);
  z-index: 500; transition: right 0.25s ease;
  display: flex; flex-direction: column; overflow: hidden;
}
#drawer.open { right: 0; }
#drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#drawer-title { font-family: var(--font-ui); font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; }
#drawer-close { background: none; border: none; color: var(--dim); font-size: 20px; padding: 0 4px; cursor: pointer; }
#drawer-close:hover { color: var(--text); background: none; border: none; }
#drawer-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 20px; }
.drawer-section-title { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }

/* Comparison queue items */
.comp-queue-item {
  padding: 10px 12px; background: var(--panel2); border: 1px solid var(--border); margin-bottom: 6px;
}
.comp-queue-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; gap: 8px; }
.comp-queue-id { font-family: var(--font-mono); font-size: 12px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.comp-queue-badges { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.status-badge { font-family: var(--font-ui); font-size: 10px; font-weight: 700; padding: 2px 6px; letter-spacing: 0.08em; white-space: nowrap; }
.status-badge.active { background: rgba(var(--green-rgb),0.2); color: var(--green); border: 1px solid var(--green); }
.status-badge.queued { background: rgba(var(--blue-rgb),0.2); color: var(--blue); border: 1px solid var(--blue); }
.status-badge.done   { background: rgba(var(--dim-rgb),0.2); color: var(--dim); border: 1px solid var(--border); }
.switch-task-btn { font-family: var(--font-ui); font-size: 10px; font-weight: 700; padding: 2px 8px; color: var(--blue); border-color: var(--blue); letter-spacing: 0.05em; flex-shrink: 0; }
.switch-task-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Review model selector ── */
#review-selector {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 14px; background: var(--panel); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#review-selector select {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  padding: 3px 6px; letter-spacing: 0.03em; cursor: pointer; flex: 1;
}
#review-selector select:focus { outline: none; border-color: var(--accent); }
.review-sel-label {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  color: var(--dim); letter-spacing: 0.1em; flex-shrink: 0;
}

/* ── Review mode ── */
.hidden { display: none !important; }
#review-badge { font-family: var(--font-ui); font-size: 11px; font-weight: 700; padding: 3px 10px; background: var(--accent); color: #111; letter-spacing: 0.1em; border-radius: 2px; flex-shrink: 0; }
.review-stats { position: absolute; bottom: 0; left: 0; right: 0; z-index: 15; text-align: center; pointer-events: none; background: rgba(14,14,14,0.92); padding: 8px 12px 10px; font-family: var(--font-ui); }
.review-stats .stat-model { font-size: 11px; color: var(--dim); display: block; margin-bottom: 4px; letter-spacing: 0.08em; text-transform: uppercase; }
.review-stats .stat-pct { font-size: 28px; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; }
.review-stats .stat-label { font-size: 12px; color: var(--text); margin-left: 8px; font-weight: 500; }
.review-disabled { opacity: 0.3 !important; pointer-events: none !important; }
#review-stats-panel table td, #review-stats-panel table th { padding: 5px 16px 5px 0; border-bottom: 1px solid var(--border); }
#review-stats-panel table tbody tr:hover { background: rgba(255,255,255,0.03); }
#controls.review-mode #vote-buttons-ab,
#controls.review-mode #vote-buttons-pf,
#controls.review-mode #vote-buttons-rank,
#controls.review-mode #autonext-wrap,
#controls.review-mode .ctrl-divider,
#controls.review-mode #btn-fit,
#controls.review-mode #btn-one { display: none !important; }
.your-badge      { font-family: var(--font-ui); font-size: 10px; font-weight: 700; padding: 2px 6px; background: rgba(var(--accent-rgb),0.15); color: var(--accent); border: 1px solid var(--accent); letter-spacing: 0.08em; }
.assigned-badge  { font-family: var(--font-ui); font-size: 10px; font-weight: 700; padding: 2px 6px; background: rgba(var(--dim-rgb),0.12); color: var(--dim); border: 1px solid var(--border); letter-spacing: 0.08em; }
.comp-queue-desc { font-family: var(--font-mono); font-size: 11px; color: var(--text); margin-bottom: 6px; }
.comp-queue-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.meta-chip { font-family: var(--font-ui); font-size: 10px; color: var(--dim); background: var(--panel); border: 1px solid var(--border); padding: 1px 6px; white-space: nowrap; }
.meta-chip.highlight { color: var(--text); border-color: var(--border); }
.mini-prog { height: 4px; background: var(--border); }
.mini-prog-fill { height: 100%; background: var(--accent); transition: width 0.3s; }

/* Annotators table */
.annotator-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--panel2); border: 1px solid var(--border); margin-bottom: 4px; }
.annotator-name { font-family: var(--font-mono); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.annotator-tag  { font-family: var(--font-ui); font-size: 10px; color: var(--dim); }
.annotator-prog-wrap  { width: 80px; flex-shrink: 0; }
.annotator-prog-label { font-family: var(--font-ui); font-size: 10px; color: var(--dim); margin-bottom: 2px; }
.annotator-bar       { height: 4px; background: var(--border); }
.annotator-bar-fill  { height: 100%; background: var(--accent); }
.annotator-check { color: var(--green); font-size: 14px; }