/* The Lab's reports (lab-report.js) and their review (lab-admin.js): the Lab's nave, gold for marks. */
.lab-col-h .rp-b { font-size: 12px; padding: 3px 8px; color: var(--dim); }
.lab-col-h .rp-b:hover, .lab-col.reporting .lab-col-h .rp-b { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); }
#lab .rp-m { background: color-mix(in srgb, var(--rubric) 42%, transparent); border-radius: 3px; outline: 1px solid color-mix(in srgb, var(--rubric) 80%, transparent); }
#lab svg .rp-m { fill: color-mix(in srgb, var(--rubric) 70%, transparent); stroke: var(--rubric); stroke-width: 1.5; outline: 0; }
#lab .lab-ipa .w.rp-w { box-shadow: inset 0 -2px 0 var(--rubric); }
.lab-col.rp-marking .lab-ipa .ph, .lab-col.rp-marking .lab-ipa .w, .lab-col.rp-marking .score rect.b { cursor: pointer; }

.lab-report { display: grid; gap: 7px; margin: 4px 0 6px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--stone-2) 85%, transparent); font-size: 13px; }
.lab-report .rp-h, #labAdmin .adm-dh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lab-report .rp-h b { font: 700 13px var(--label); letter-spacing: 0.06em; color: var(--gold); text-transform: lowercase; }
.lab-report .rp-steps { display: inline-flex; gap: 1px; padding: 1px; border: 1px solid var(--line); border-radius: 7px; background: var(--nave); }
.lab-report .rp-steps button { border: 0; background: transparent; padding: 2px 9px; color: var(--dim); font-size: 12px; }
.lab-report .rp-steps button.on { background: var(--gold); color: #1a1408; font-weight: 700; }
.lab-report .rp-h [data-rp="cancel"] { padding: 1px 7px; color: var(--dim); border-color: transparent; background: transparent; }
.lab-report .sp, #labAdmin .sp { flex: 1; }
.lab-report .rp-hint { margin: 0; color: var(--dim); font-size: 12.5px; }
.lab-report .lk { padding: 0 5px; font-size: 12px; }
.lab-report .rp-words, .lab-report .rp-kind { display: flex; flex-wrap: wrap; gap: 4px; }
.lab-report .rp-words button { font: 13px var(--display); padding: 1px 8px; }
.lab-report .rp-kind button { font-size: 12px; padding: 2px 8px; border-radius: 12px; }
.lab-report .rp-words button.on { border-color: var(--rubric); background: color-mix(in srgb, var(--rubric) 30%, transparent); color: var(--vellum); }
.lab-report .rp-kind button.on { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.lab-report .rp-note { display: flex; align-items: flex-end; gap: 6px; }
.lab-report textarea { flex: 1; min-width: 0; resize: vertical; font: 13px var(--display); padding: 4px 7px; background: var(--nave); color: var(--vellum); border: 1px solid var(--line); border-radius: 6px; }
.lab-report .rp-foot, #labAdmin .rp-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lab-report .rp-foot button, #labAdmin .rp-foot button { font-size: 12.5px; padding: 3px 9px; }
.lab-report .rp-ch ul, .rp-sum ul { margin: 2px 0 0; padding-left: 18px; }
.lab-report .rp-ch li, .rp-sum li { font: 12px var(--mono, "IBM Plex Mono", monospace); color: var(--vellum); }
.rp-sum { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 10px; margin: 0; }
.rp-sum dt { font: 11px var(--label); letter-spacing: 0.05em; color: var(--dim); padding-top: 2px; }
.rp-sum dd { margin: 0; overflow-wrap: anywhere; }
.rp-sum dd.ipa { font: 16px/1.3 "Gentium Plus", "Charis SIL", "Doulos SIL", var(--display); }
.rp-q { font-style: italic; color: var(--vellum); }
.rp-warn { margin: 0; color: var(--rubric); font-size: 12.5px; }
.rp-ok { margin: 0; color: var(--gold); font-size: 12.5px; }
.rp-ok code, #labAdmin code { font: 12px var(--mono, "IBM Plex Mono", monospace); user-select: all; }
.rp-msg { margin: 0; color: var(--dim); font-size: 12.5px; }
.rp-errs { margin: 0; padding-left: 18px; color: var(--rubric); font-size: 12px; }

/* the review: over the Lab, its own bar */
#labAdmin { position: absolute; inset: 0; z-index: 40; display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: var(--nave); color: var(--vellum); }
#labAdmin[hidden] { display: none; }
#labAdmin .adm-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 7px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); background: var(--stone); }
#labAdmin .adm-bar > b { font: 700 14px var(--label); letter-spacing: 0.06em; color: var(--gold); text-transform: lowercase; }
#labAdmin .adm-bar button { font-size: 12.5px; padding: 4px 9px; }
#labAdmin .adm-sign { display: flex; gap: 6px; }
#labAdmin .adm-tok { width: min(260px, 50vw); font: 13px var(--mono, "IBM Plex Mono", monospace); padding: 4px 8px; }
#labAdmin .adm-tabs { display: inline-flex; gap: 1px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: var(--nave); }
#labAdmin .adm-tabs button { border: 0; background: transparent; color: var(--dim); padding: 3px 10px; }
#labAdmin .adm-tabs button.on { background: var(--gold); color: #1a1408; font-weight: 700; }
#labAdmin .adm-tabs button.on .label { color: #1a1408; }
#labAdmin .adm-state { margin: 0; padding: 5px 16px; font-size: 12.5px; color: var(--gold); border-bottom: 1px solid var(--line); }
#labAdmin .adm-main { min-height: 0; display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 1fr); }
#labAdmin .adm-left { min-height: 0; overflow: auto; border-right: 1px solid var(--line); padding: 8px; scrollbar-width: thin; }
#labAdmin .adm-right { min-height: 0; overflow: auto; padding: 12px 16px 28px; scrollbar-width: thin; }
#labAdmin .adm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#labAdmin .adm-list li { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; display: grid; gap: 3px; }
#labAdmin .adm-list li:hover, #labAdmin .adm-list li:focus-visible { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); outline: 0; }
#labAdmin .adm-list li.cur { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
#labAdmin .adm-t { font: 14px var(--display); overflow-wrap: anywhere; }
#labAdmin .adm-m { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
#labAdmin .ltag.mk { color: var(--vellum); border-color: color-mix(in srgb, var(--rubric) 70%, var(--line)); }
#labAdmin .adm-n { font-size: 12px; font-style: italic; color: var(--dim); overflow-wrap: anywhere; }
#labAdmin .adm-empty { margin: 40px 0; text-align: center; }
#labAdmin .adm-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 820px; }
#labAdmin .adm-text { margin: 0; font: 19px var(--display); overflow-wrap: anywhere; }
#labAdmin .adm-ipa { font-size: 19px; }
#labAdmin .adm-words { font: 13px var(--display); color: var(--dim); }
#labAdmin .adm-words .mk { color: var(--vellum); box-shadow: inset 0 -2px 0 var(--rubric); }
#labAdmin .ltag.st-pending { color: var(--gold); }
#labAdmin .ltag.st-approved { color: #1a1408; background: var(--gold); border-color: var(--gold); }
#labAdmin .ltag.st-rejected { color: var(--rubric); border-color: var(--rubric); }
#labAdmin .adm-decide, #labAdmin .adm-patch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
#labAdmin .adm-reply { flex: 1 1 260px; min-width: 0; font: 13px var(--display); padding: 4px 8px; }
#labAdmin button.on { border-color: var(--gold); color: var(--gold); }
#labAdmin button.sure { border-color: var(--rubric); color: var(--rubric); }
@media (max-width: 700px) {
  #labAdmin .adm-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #labAdmin .adm-left { max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--line); }
}