/* Klero — the courtroom board and juror boxes */

/* ---------- juror boxes ---------- */
.juror { position: absolute; width: 128px; height: 96px; border-radius: 10px; border: 1.5px solid var(--box-border); background: var(--box); color: var(--box-ink);
  padding: 0; box-shadow: var(--box-shadow); cursor: pointer; overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: none; transition: background-color .15s, border-color .15s, box-shadow .15s;
  display: flex; flex-direction: row; }
/* overflow hidden keeps the tags inside the text area, so they never cover the arrows */
.j-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 7px 5px 6px 9px; overflow: hidden; }
/* scoring strip: ▲ adds a point, ▼ takes one away; the score sits between them */
.j-strip { flex: none; width: 36px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: rgba(16,24,40,.04); border-left: 1px solid rgba(16,24,40,.1); padding: 3px 0; cursor: pointer; }
.j-up, .j-down { font-size: 13px; line-height: 1; opacity: .55; padding: 5px 8px; }
.juror:hover .j-up, .juror:hover .j-down { opacity: 1; }
.j-strip .j-score { font-size: 16px; font-weight: 700; opacity: 1; }
.stage.picking .j-strip { visibility: hidden; }
/* the check mark on a box while picking jurors for a question (questionnaire) */
.j-check { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--select); color: #fff;
  font-weight: 800; font-size: 16px; line-height: 26px; text-align: center; display: none; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.juror.q-picked { outline: 4px solid var(--select); outline-offset: 1px; }
.juror.q-picked .j-check { display: block; }
.juror:hover { box-shadow: 0 2px 4px rgba(16,24,40,.1), 0 8px 18px rgba(16,24,40,.1); }
.juror.dragging { cursor: grabbing; z-index: 20; box-shadow: 0 8px 22px rgba(0,0,0,.28); transition: none; }
.juror.selected { outline: 3px solid var(--select); outline-offset: 2px; }
.juror.pulse { animation: pulse .22s ease-out; }
@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
/* text on a box: the number and tags on top, the name (which may wrap to two lines), then the first detail at the bottom */
.j-top { display: flex; justify-content: space-between; align-items: center; gap: 3px; min-width: 0; }
.j-tags { display: inline-flex; align-items: center; gap: 2px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.j-num { font-weight: 700; font-size: 19px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.j-top .j-num { flex: none; }
.j-score { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; opacity: .9; }
.j-name { font-size: 13.5px; line-height: 1.18; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; font-weight: 600; letter-spacing: -.01em;
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.j-main .j-detail { margin-top: auto; padding-top: 2px; }
/* the notes button on a box (icon and count) */
.j-notes { display: inline-flex; align-items: center; gap: 2px !important; border: 1px solid currentColor; flex: none; min-height: 18px;
  border-radius: 5px; background: rgba(255,255,255,.35); color: inherit; padding: 0 4px !important; font-size: 12px; line-height: 16px; opacity: .75; }
.j-tags .j-notes { padding: 0 3px !important; min-height: 17px; }
.juror:hover .j-notes { opacity: 1; }
.j-notes:hover { background: rgba(255,255,255,.6); }
.j-notes.has { opacity: 1; font-weight: 650; }
.j-notes svg { width: 13px; height: 13px; flex: none; }

/* internet research: confidence letter beside the globe on a box (H / M / L) */
.j-notes.conf-only { border: 0; padding: 0; background: none; opacity: 1; }
.j-notes .conf { display: inline-block; min-width: 16px; text-align: center; font-size: 11px; font-weight: 750; line-height: 16px; padding: 0 3px; border-radius: 4px; }
.j-notes .conf.c-high { background: var(--ok); color: #fff; }
.j-notes .conf.c-medium { background: var(--accent); color: #fff; }
.j-notes .conf.c-low { border: 1px solid currentColor; }

/* the research progress button in the top bar (board/research.js) */
.research-pill { font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; min-height: 32px; padding: 0 10px; border-radius: 16px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; }
.research-pill.running { border-color: var(--accent); color: var(--accent); }
.research-pill.warn { border-color: var(--warn); color: var(--warn); }
@media (max-width: 900px) { .research-pill { font-size: 11px; padding: 0 8px; } }
@media print { .research-pill { display: none; } }

/* research coming in stages (board/research.js): a circle on the box. Its shape says whether it's still under way
 * (outline or half filled) or finished (filled); green means something on it hasn't been opened on this device yet */
.j-res { display: inline-flex; flex: none; }
.res-dot { width: 16px; height: 16px; flex: none; }
.res-dot .ring { fill: none; stroke: var(--res-ring, #6b7280); stroke-width: 1.5; }
.res-dot .fill { fill: var(--res-seen, #b9c0cb); }      /* "white": a light gray, so it shows on a white box */
.res-dot.s-part-new .fill, .res-dot.s-done-new .fill { fill: var(--res-new, #16803c); }
.res-dot.s-part-new .ring, .res-dot.s-done-new .ring { stroke: var(--res-new, #16803c); }
:root[data-theme="dark"] .res-dot .ring { stroke: #9aa3b2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .res-dot .ring { stroke: #9aa3b2; } }
/* colorblind mode: blue for new, as for favorable scores */
.colorblind .res-dot { --res-new: #1f5fbf; }
.research-pill.fresh { box-shadow: 0 0 0 2px var(--res-new, #16803c) inset; }