/* The candidate's diagram screen, served by the candidates' relay. It borrows interview.css for
   the drawings and the controls; this is only what is its own. */
.cand-main { max-width: 1000px; padding-block: 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.cand-join { max-width: 440px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.cand-join h2 { font-size: 24px; }
.cand-join input { font-family: var(--font-mono); font-size: 24px; letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); width: 100%; }
.cand-join #joinNote:empty { display: none; }
.cand-join #joinNote { color: var(--load); }
.cand-diagram { display: flex; flex-direction: column; gap: 10px; }
.cand-diagram[hidden], .cand-join[hidden] { display: none; }
.cand-status { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.candidate-page #dia.drawing { cursor: crosshair; touch-action: none; }
.candidate-page .chip[data-tool] .sw { background: var(--cand); }