/* ==========================================================================
   South Africa section components. Loaded after brand.css (and, on the
   private pages, dashboard.css). References only the :root tokens in
   brand.css; no hard-coded colours.
   ========================================================================== */

/* ---- private: SA top bar ------------------------------------------------ */
.sa-flag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--lime);color:var(--accent-ink);padding:2px 8px;border-radius:999px;margin-left:8px}
.qbadge{display:inline-block;min-width:20px;padding:0 6px;margin-left:6px;border-radius:999px;
  background:var(--lime);color:var(--accent-ink);font-size:12px;font-weight:700;text-align:center}
.app .btn.primary .qbadge{background:var(--on-accent-soft);color:var(--on-accent)}

/* ---- dashboard filters, bulk bar, pager ---------------------------------- */
.sa-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.sa-filters select,.sa-filters input{margin-top:0;width:auto;min-width:0;font-size:13.5px;padding:8px 10px}
.sa-filters .search{min-width:200px}
.bulkbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;margin:0 0 12px;
  background:var(--panel-soft);border:1px solid var(--line);border-radius:var(--radius)}
.bulkbar select,.bulkbar input{margin-top:0;width:auto;font-size:13px;padding:7px 9px}
.bulkbar .sel-count{font-weight:700;color:var(--ink);margin-right:6px}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin:12px 0}
.cands td.c-check,.cands th.c-check{width:34px;text-align:center}
.mini{font-size:12px;color:var(--faint)}
.chip.ko{background:var(--chip-bad-bg);color:var(--chip-bad-ink);margin:2px 4px 2px 0}
.chip.flag{background:var(--chip-warn-bg);color:var(--chip-warn-ink);margin-left:4px}
.chip.pass{background:var(--chip-good-bg);color:var(--chip-good-ink)}
.chip.fail{background:var(--chip-bad-bg);color:var(--chip-bad-ink)}
.chip.muted{background:var(--panel-soft);color:var(--muted)}

/* ---- listening queue ----------------------------------------------------- */
.queue-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.queue-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:980px){.queue-grid{grid-template-columns:1fr}}
.media-box{background:var(--ink);border-radius:var(--radius);overflow:hidden}
.media-box video{display:block;width:100%;max-height:420px;background:var(--ink)}
.media-box audio{display:block;width:100%;padding:18px 14px}
.script-box{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--panel-soft);
  font-size:13.5px;color:var(--muted)}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.shots a{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.shots img{display:block;width:100%;height:150px;object-fit:cover}
.shots span{display:block;font-size:12px;color:var(--muted);padding:5px 8px}
.rubric-card .rdim{display:grid;grid-template-columns:1fr 74px;gap:4px 10px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line)}
.rubric-card .rdim:last-of-type{border-bottom:0}
.rdim .rl{font-weight:600;color:var(--ink);font-size:14px}
.rdim .rl kbd{margin-right:6px}
.rdim .rd{font-size:12.5px;color:var(--faint);grid-column:1}
.rdim input[type=number]{margin-top:0;text-align:center;font-weight:700;font-size:16px;padding:8px 4px}
.rdim .rn{grid-column:1 / -1;margin-top:2px;font-size:12.5px;padding:6px 9px}
.rdim.gate .rl::after{content:"hard gate";margin-left:8px;font-size:11px;font-weight:700;
  color:var(--chip-bad-ink);background:var(--chip-bad-bg);padding:1px 7px;border-radius:999px}
.verdict-live{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:12px 0;padding:10px 12px;border-radius:10px;background:var(--panel-soft)}
.verdict-live .tot{font-size:22px;font-weight:800;color:var(--ink)}
.verdict-live .why{font-size:12.5px;color:var(--muted)}
.decide{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.decide .btn{flex:1;justify-content:center}
kbd{display:inline-block;min-width:18px;padding:0 5px;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;background:var(--panel);font:600 11.5px/18px var(--font);color:var(--muted);text-align:center}
.keys{font-size:12.5px;color:var(--muted);line-height:2}
.signal-box{margin-top:10px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;font-size:13px}
.signal-box b{color:var(--ink)}
.signal-tag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--warn)}
.transcript{white-space:pre-wrap;font-size:13.5px;color:var(--body);max-height:180px;overflow:auto;
  background:var(--panel-soft);border-radius:8px;padding:8px 10px;margin-top:6px}
.queue-empty{text-align:center;padding:60px 20px}

/* ---- reviews on the candidate record -------------------------------------- */
.rev-table td,.rev-table th{font-size:13px;padding:7px 8px}
.rev-block{margin:0 0 14px}
.rev-block h4{margin:0 0 6px}
.disagree{background:var(--chip-warn-bg);color:var(--chip-warn-ink);padding:6px 10px;border-radius:8px;
  font-size:13px;margin:6px 0}

/* ---- pipeline board ------------------------------------------------------- */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;
  padding-bottom:10px}
.board-col{background:var(--panel-soft);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.board-col h4{margin:0 0 8px;font-size:14px;display:flex;justify-content:space-between}
.board-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;margin:0 0 8px;font-size:13px;color:var(--body);text-decoration:none}
.board-card:hover{border-color:var(--accent)}
.board-card .bc-top{display:flex;gap:6px;align-items:center}
.board-card .bc-name{font-weight:700;color:var(--ink);flex:1}

/* ---- stats ---------------------------------------------------------------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}

/* ---- public SA application ------------------------------------------------ */
.sa-step{margin:22px 0 4px;font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:17px}
.sa-step span{display:inline-block;width:24px;height:24px;line-height:24px;text-align:center;
  border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:13px;margin-right:8px}
.yn{margin:14px 0 0}
.yn .q{font-size:14.5px;color:var(--ink);font-weight:600}
.yn .opts{display:flex;gap:10px;margin-top:8px}
.yn label.opt{display:flex;align-items:center;gap:8px;margin:0;padding:9px 16px;border:1px solid var(--line);
  border-radius:var(--btn-radius);background:var(--panel);cursor:pointer;font-weight:600;color:var(--ink)}
.yn label.opt input{width:auto;margin:0}
.hint{font-size:13px;color:var(--muted);margin:6px 0 0}
.script-quote{margin:10px 0;padding:12px 14px;border-left:4px solid var(--lime);background:var(--panel-soft);
  border-radius:0 10px 10px 0;font-size:15px;color:var(--ink)}
.rec-box{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-soft)}
.rec-box video{display:block;width:100%;max-height:340px;border-radius:10px;background:var(--ink);margin-top:10px}
.rec-tabs{display:flex;gap:8px;flex-wrap:wrap}
.rec-tabs button{width:auto}
.rec-state{font-size:13.5px;color:var(--muted);margin-top:8px;min-height:20px}
.rec-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--bad);margin-right:6px;
  animation:recblink 1s infinite}
@keyframes recblink{50%{opacity:.25}}
.check{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;font-weight:400;color:var(--body)}
.check input{width:auto;margin-top:3px}
.err ul{margin:6px 0 0;padding-left:18px}
.btn.secondary{background:var(--panel);color:var(--accent);border:1px solid var(--accent)}
.level{height:8px;border-radius:6px;background:var(--track);overflow:hidden;margin-top:10px}
.level i{display:block;height:100%;width:0;background:var(--good);transition:width .08s}
.prompt-box{margin:14px 0;padding:16px;border-radius:var(--radius);background:var(--panel-soft);
  border:2px solid var(--accent);font-size:18px;font-weight:600;color:var(--ink)}
.rubric-card textarea{width:100%;font:inherit;font-size:13.5px;padding:8px 10px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);color:var(--body);box-sizing:border-box;resize:vertical}
.verdict-live > div:first-child{white-space:nowrap}
.role-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 18px}
@media(max-width:640px){.role-facts{grid-template-columns:1fr}}
.role-facts .fact-h{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:15px;margin:0 0 4px}
.role-facts p{margin:0;font-size:14.5px;color:var(--body);line-height:1.5}
.id-check{display:grid;grid-template-columns:220px 1fr;gap:14px;margin-top:10px}
@media(max-width:760px){.id-check{grid-template-columns:1fr}}
.id-video video{width:100%;border-radius:10px;background:var(--ink)}
.strip{display:flex;gap:8px;overflow-x:auto;padding:4px 0}
.snap{flex:0 0 132px;display:block;text-decoration:none;color:var(--body);font-size:11.5px}
.snap img{width:132px;height:99px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--ink)}
.snap span{display:block;margin-top:2px}
.snap em{font-style:normal;font-size:11px;padding:1px 8px}
.net-thumb img{display:block;width:140px;max-height:140px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:var(--panel-soft)}
/* Candidate page layout: keep both columns inside the window. The shared
   .grid (dashboard.css) uses a plain 1fr column, which grows to fit wide
   content such as a long webcam snapshot strip (22 snapshots is ~3,100px)
   and pushes the page wider than the browser. SA pages only: the column may
   shrink, and wide rows scroll inside their own card instead. */
.grid{grid-template-columns:minmax(0,1fr) 320px}
.grid > *{min-width:0}
@media(max-width:820px){.grid{grid-template-columns:minmax(0,1fr)}}
.shots{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.id-check{grid-template-columns:220px minmax(0,1fr)}
@media(max-width:760px){.id-check{grid-template-columns:minmax(0,1fr)}}
.two-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:900px){.two-col{grid-template-columns:minmax(0,1fr)}}
.strip{max-width:100%}
.table-wrap{max-width:100%;overflow-x:auto}
/* Rejected banner and the plain-English assessment card (brand tokens only) */
.rejected-banner{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.rejected-banner .rb-text{min-width:0;flex:1 1 260px}
details.inline-reject{display:inline-block;position:relative}
details.inline-reject > summary{list-style:none;cursor:pointer;display:inline-flex}
details.inline-reject > summary::-webkit-details-marker{display:none}
details.inline-reject[open] form{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
details.inline-reject input{min-width:0;flex:1 1 180px}
.assess-plain{margin:4px 0 8px}
.ap-status{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ap-status .chip{margin-left:0;font-size:13px}
.ap-score b{font-size:26px;font-family:var(--font-head);color:var(--ink)}
.ap-sentence{margin:10px 0 0;font-weight:600;color:var(--chip-bad-ink)}
.ap-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:12px}
.ap-cols h4{margin:0 0 4px;font-size:14px}
@media(max-width:640px){.ap-cols{grid-template-columns:minmax(0,1fr)}}
.ap-detail{margin-top:10px}
.ap-detail[open] > summary{margin-bottom:6px}
.tab.tab-rejected{border-color:var(--chip-bad-ink);color:var(--chip-bad-ink)}
.tab.tab-rejected.active{background:var(--chip-bad-ink);color:var(--on-accent)}
.rej-line{color:var(--chip-bad-ink);font-weight:600;font-size:13px;margin-bottom:4px}
.settings-grid{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr) auto;gap:14px;align-items:start}
.settings-grid > div:last-child{align-self:end;padding-bottom:22px}
@media(max-width:700px){.settings-grid{grid-template-columns:minmax(0,1fr)}.settings-grid > div:last-child{padding-bottom:0}}
.ap-listen{margin:10px 0 0;font-weight:600;color:var(--chip-warn-ink)}