/* ══════════ applicants and the campus roster ══════════

   Scoped to the two views campus.js owns, so the ledger's own tables and
   panels keep their rules. Everything here is built out of the console's
   existing tokens — no new colours, no new radii. */

/* the table and the open application, side by side */
.cm-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,390px);
  gap:0;align-items:start}
.cm-cols:has(.cm-detail[hidden]){grid-template-columns:1fr}
.cm-cols>.tbl-scroll{min-width:0}

/* Scrolls with the table rather than pinned: an application runs to two
   long answers and a stuck panel is one whose bottom cannot be reached. */
.cm-detail{border-left:1px solid var(--line);background:var(--surface);padding:14px}
.cm-detail-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:4px}
.cm-detail-h h2{font-size:15px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.cm-detail-h h2 small{display:block;font-size:11.5px;font-weight:400;color:var(--muted-2);margin-top:3px}
.cm-detail-h .push{margin-left:auto}
.cm-detail dl{margin:12px 0 0}
.cm-detail dt{font-size:10.5px;letter-spacing:.075em;text-transform:uppercase;color:var(--muted-2);
  margin:13px 0 4px}
.cm-detail dd{margin:0;font-size:12.5px;line-height:1.55;overflow-wrap:anywhere}
.cm-detail dd.say{white-space:pre-wrap;color:var(--muted);background:var(--raise);
  border-radius:var(--r-m);padding:9px 10px}
.cm-detail dd a{color:var(--violet-hi)}
.cm-detail dd a:hover{text-decoration:underline}
.cm-links{display:flex;flex-wrap:wrap;gap:6px}

/* the two controls that write back: status, and the team's own notes */
.cm-edit{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:9px}
.cm-edit label{display:grid;gap:5px;font-size:11.5px;color:var(--muted-2)}
.cm-edit select{width:100%}
.cm-edit textarea{font:inherit;font-size:12.5px;color:var(--text);background:transparent;
  border:1px solid var(--line-2);border-radius:7px;padding:8px 9px;min-height:72px;resize:vertical}
.cm-edit textarea:focus{outline:none;border-color:var(--violet);background:var(--surface-2)}
.cm-edit .row{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.cm-edit .row .push{margin-left:auto}

/* one applicant in the table */
.cm-row-on{background:var(--raise)}
td.cm-who b{font-weight:500}
td.cm-who small{display:block;font-size:11px;color:var(--muted-2);margin-top:2px;overflow-wrap:anywhere}

/* ── the roster ── */
.cm-group{margin-top:4px}
.cm-group-h{display:flex;align-items:baseline;gap:9px;padding:0 2px 8px}
.cm-group-h h2{font-size:13px;font-weight:600;letter-spacing:-.005em}
.cm-group-h .note{font-size:11.5px;color:var(--muted-2)}
.cm-group+.cm-group{margin-top:16px}
.cm-campuses{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.cm-campus{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-l);
  padding:12px 13px;display:grid;gap:9px;align-content:start;min-width:0}
.cm-campus-h{display:flex;align-items:baseline;gap:8px;min-width:0}
.cm-campus-h b{font-size:12.5px;font-weight:600;letter-spacing:-.005em;overflow-wrap:anywhere}
.cm-campus-h .note{margin-left:auto;font-size:11px;color:var(--muted-2);white-space:nowrap}
.cm-people{display:grid;gap:7px}
.cm-person{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--line);min-width:0;text-align:left;width:100%}
.cm-person:hover{border-color:var(--line-2);background:var(--raise)}
.cm-person .nm{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.cm-person .nm b{font-size:12.5px;font-weight:500;overflow-wrap:anywhere}
.cm-person .nm small{font-size:11px;color:var(--muted-2);overflow-wrap:anywhere}
.cm-person.off{opacity:.55}

/* add or edit one of them */
.cm-form{padding:13px 14px 14px;display:grid;gap:10px}
.cm-form h2{font-size:13.5px;font-weight:600}
.cm-form .fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cm-form label{display:grid;gap:5px;font-size:11.5px;color:var(--muted-2);min-width:0}
.cm-form label.wide{grid-column:1/-1}
.cm-form input,.cm-form select{width:100%}
.cm-form textarea{font:inherit;font-size:12.5px;color:var(--text);background:transparent;
  border:1px solid var(--line-2);border-radius:7px;padding:8px 9px;min-height:56px;resize:vertical;width:100%}
.cm-form textarea:focus{outline:none;border-color:var(--violet);background:var(--surface-2)}
.cm-form .acts{display:flex;gap:7px;align-items:center;opacity:1}
.cm-form .acts .push{margin-left:auto;display:flex;gap:7px}
@media(max-width:900px){.cm-form .fields{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cm-form .fields{grid-template-columns:1fr}}

/* a line that is about the connection rather than about the data */
.cm-msg{font-size:11.5px;color:var(--muted-2);padding:0 2px}
.cm-msg.err{color:var(--bad)}

@media(max-width:1100px){
  .cm-cols{grid-template-columns:1fr}
  .cm-detail{border-left:0;border-top:1px solid var(--line)}
}