:root { --bg:#111; --fg:#eee; --line:#333; --accent:#ffb000; --bad:#e05252; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:15px/1.5 system-ui, sans-serif; }
.topbar { display:flex; justify-content:space-between; align-items:center;
          padding:.75rem 1.25rem; border-bottom:1px solid var(--line); }
.brand { font-weight:600; }
.who a { color:var(--accent); margin-left:.5rem; }
main { padding:1.25rem; max-width:1200px; margin:0 auto; }
h1 { font-size:1.25rem; }
.hint { color:#999; }
.filters { display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; margin:1rem 0 .75rem; }
.summary { color:#999; margin:.25rem 0 1rem; }
.pager { display:flex; align-items:center; gap:1rem; margin-top:1rem; }
.pager a { color:var(--accent); }

.views { display:flex; gap:.5rem; margin:1rem 0; }
.view-tab { background:#1c1c1c; color:var(--fg); border:1px solid var(--line);
            padding:.4rem 1rem; border-radius:4px; cursor:pointer;
            text-transform:capitalize; }
.view-tab.active { background:var(--accent); color:#111; border-color:var(--accent);
                   font-weight:600; }

.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem; }
.panel { margin:0; background:#000; border:2px solid var(--line); border-radius:6px;
         overflow:hidden; cursor:pointer; }
.panel img { display:block; width:100%; aspect-ratio:1; object-fit:contain;
             background:#000; }
.panel.chosen { border-color:var(--accent); }
.panel.rejected { opacity:.45; border-color:var(--bad); }
figcaption { display:flex; justify-content:space-between; align-items:center;
             padding:.35rem .6rem; font-size:.85rem; }
.reject { background:none; border:1px solid var(--line); color:#888;
          border-radius:3px; cursor:pointer; font-size:.75rem; }
.panel.rejected .reject { color:var(--bad); border-color:var(--bad); }

.slider { display:flex; align-items:center; gap:1rem; margin:1rem 0; }
.slider input { flex:1; }

#followup { display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap;
            margin-top:1rem; }
label { display:flex; flex-direction:column; gap:.25rem; }
input, select, textarea { background:#1c1c1c; color:var(--fg);
                          border:1px solid var(--line); border-radius:4px;
                          padding:.4rem; font:inherit; }
button[type=submit] { background:var(--accent); color:#111; font-weight:600;
                      border:none; border-radius:4px; padding:.55rem 1.25rem;
                      cursor:pointer; }

.login { max-width:320px; margin:4rem auto; display:flex; flex-direction:column;
         gap:.9rem; }
.error { color:var(--bad); }
.patients { list-style:none; padding:0; }
.patients li { display:flex; justify-content:space-between;
               padding:.7rem 0; border-bottom:1px solid var(--line); }
.patients a { color:var(--accent); font-weight:600; }
.status.done { color:#5ac57f; }
.status.todo { color:#888; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line); }

/* Chunked ranking screen */
.chunk { border:1px solid var(--line); border-radius:8px; padding:1rem; margin:1.25rem 0; }
.chunk h2 { font-size:1rem; margin:0 0 .5rem; }
.chunk h2 .range { color:#888; font-weight:400; font-size:.82rem; margin-left:.5rem; }
.grid { grid-template-columns:repeat(6, 1fr); }          /* 6 panels across per chunk */
select.rank { background:#1c1c1c; color:var(--fg); border:1px solid var(--line);
              border-radius:4px; padding:.15rem .25rem; font:inherit; font-size:.8rem; }
.panel figcaption { gap:.4rem; }
.submit-row { display:flex; flex-direction:column; gap:.75rem; align-items:flex-start;
              margin:1.75rem 0 3rem; }
.submit-row textarea { width:min(520px, 90vw); }
#submit:disabled { opacity:.45; cursor:not-allowed; }
@media (max-width: 900px) { .grid { grid-template-columns:repeat(3, 1fr); } }

/* Press-to-rank interaction */
.chunk-head { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.5rem; }
.chunk-head h2 { margin:0; }
.chunk-head .views { margin:0; }
.panel { position:relative; }
.rank-badge { position:absolute; top:6px; left:6px; min-width:1.6rem; height:1.6rem;
              display:flex; align-items:center; justify-content:center; border-radius:50%;
              background:var(--accent); color:#111; font-weight:700; font-size:.95rem;
              box-shadow:0 0 0 2px #000; }
.rank-badge:empty { display:none; }
.panel.ranked { border-color:var(--accent); }
.reset { background:none; border:1px solid var(--line); color:#aaa; border-radius:4px;
         padding:.3rem .8rem; cursor:pointer; font-size:.82rem; margin-left:auto; }
.reset:hover { color:var(--fg); border-color:#666; }

/* Per-view ranking: one view's three sections visible at a time; 3-up grid for zoom */
.view-panel { display:none; }
.view-panel.active { display:block; }
.grid { grid-template-columns:repeat(3, 1fr); }    /* 3 cols x 2 rows = larger panels */
@media (max-width: 700px) { .grid { grid-template-columns:repeat(2, 1fr); } }

/* No-tumor reference panel: shown but not ranked */
.panel[data-reference] { border-style:dashed; border-color:#666; cursor:default; }
.ref-label { position:absolute; top:6px; left:6px; background:rgba(20,20,20,.85);
             color:#bbb; font-size:.68rem; line-height:1.05; text-align:center;
             padding:.15rem .35rem; border-radius:3px; }

/* Patient list: a patient still being rendered has no link yet */
.pid-pending { color:#777; }
.status.pending { color:#c9a227; }