/**
 * ACXPA Agent Performance Matrix — entry page styles.
 *
 * Loaded after apm-core.css, which owns the shell, masthead, panels, buttons,
 * form controls, tooltip, loader and toast. Everything here is specific to
 * capturing results.
 *
 * @version 2.1.0
 */

.apm-mast h1{font-size:26px;margin:0;letter-spacing:-.01em;}
.apm-intro p:last-child{margin-bottom:0;}
.apm-tierwrap{margin:0 0 20px;}
.apm-previewbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding:7px 11px;background:#262626;border-radius:5px;}
.apm-previewbar .apm-previewlab{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#F0C969;margin-right:2px;}
.apm-pvseg{appearance:none;border:1px solid #555;background:#3a3a3a;color:#e2e2e2;font-size:12px;font-weight:600;padding:5px 11px;border-radius:4px;cursor:pointer;}
.apm-pvseg.on{background:#F0C969;border-color:#F0C969;color:#222;}
.apm-tierswitch{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;}
.apm-tierseg{appearance:none;border:0;background:#fff;text-align:left;padding:14px 16px;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:background .12s,box-shadow .12s;border-right:1px solid var(--line);}
.apm-tierseg:last-child{border-right:0;}
.apm-tierseg .apm-tiername{font-weight:700;font-size:15px;color:var(--ink);letter-spacing:.01em;}
.apm-tierseg .apm-tierdesc{font-size:12px;color:var(--inks);line-height:1.35;}
.apm-tierseg.apm-on{background:var(--paper2);box-shadow:inset 0 -3px 0 var(--gold);}
.apm-tierseg.apm-on .apm-tiername{color:var(--ink);}
.apm-tierseg--acxpa.apm-on{background:var(--ink) !important;box-shadow:inset 0 -3px 0 var(--gold);}
.apm-tierseg--acxpa.apm-on .apm-tiername,.apm-tierseg--acxpa.apm-on .apm-tierdesc{color:#fff !important;}
.apm-tierseg--acxpa.apm-on .apm-tierdesc{color:rgba(255,255,255,.78) !important;}
.apm-tierseg--acxpa .apm-tiername::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:7px;vertical-align:middle;}
.apm-tierseg.apm-locked{cursor:pointer;}
.apm-tierseg.apm-locked .apm-tiername,.apm-tierseg.apm-locked .apm-tierdesc{opacity:.6;}
.apm-tierlock{font-size:13px;line-height:1;margin-bottom:1px;}
.apm-tiernote{font-size:12.5px;color:var(--inks);margin-top:8px;padding:0 2px;line-height:1.45;}
.apm-tiernote a,.apm-tiernote a:link,.apm-tiernote a:visited,.apm-tiernote a:hover,.apm-tiernote a:focus{color:var(--goldd) !important;font-weight:600;}
.apm-tiernote.apm-upsell{background:#FBF6EA;border:1px solid #E8DBB6;border-radius:4px;padding:9px 12px;color:#6b5a2a;}
@media(max-width:560px){.apm-tierswitch{grid-template-columns:1fr;}.apm-tierseg{border-right:0;border-bottom:1px solid var(--line);}.apm-tierseg:last-child{border-bottom:0;}}
.apm-basic-row{display:flex;flex-direction:column;gap:6px;max-width:300px;}
.apm-basic-row input{font-size:18px;font-weight:600;padding:8px 10px;}
.apm-basic-zone{margin:4px 0 0;}
.apm-zonehint{display:inline-block;font-size:13px;color:var(--inks);background:var(--paper2);border:1px solid var(--line);border-radius:4px;padding:7px 11px;}
.apm-zonehint.best{color:var(--zone);background:var(--zonet);border-color:transparent;font-weight:600;}
.apm-pbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--acxpa);border-radius:4px;padding:12px 14px;}
/* The admin account bar. Gold-railed on a tinted ground so it never reads as
 * part of the customer-facing page below it — you are standing in somebody
 * else's account, and that should be obvious without reading a word. */
.apm-pbar.apm-acctbar{border-left-color:var(--gold);background:var(--paper2);}
.apm-pbar.apm-acctbar select{min-width:320px;max-width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:4px;font-family:inherit;font-size:14px;background:#fff;color:var(--ink);}
.apm-pbar.apm-acctbar .apm-scsum{flex:1 1 240px;min-width:0;}
/* What the scorecard in force actually measures, said in one line so the person
 * scoring never has to leave the page to find out. */
.apm-scsum{font-size:12.5px;color:var(--inks);line-height:1.5;}
.apm-scsum b{color:var(--goldd);}
.apm-noprofile{border:1px dashed var(--line);border-radius:5px;background:var(--paper2);padding:22px 24px;margin-bottom:18px;font-size:13.5px;line-height:1.6;color:var(--inks);}
.apm-noprofile strong{display:block;color:var(--ink);font-size:15px;margin-bottom:5px;}
.apm-noprofile a{color:var(--goldd);font-weight:600;text-decoration:underline;}
.apm-lab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--inks);}
.acxpa-apm-shell select,.acxpa-apm-shell input[type=text],.acxpa-apm-shell input[type=number],.acxpa-apm-shell input[type=datetime-local]{box-sizing:border-box!important;height:38px!important;min-height:38px!important;line-height:1.2!important;margin:0!important;font-family:inherit!important;font-size:14px!important;font-weight:400!important;color:var(--ink)!important;background:var(--paper)!important;border:1px solid var(--line)!important;border-radius:3px!important;padding:0 9px!important;vertical-align:middle;}
.acxpa-apm-shell input[type=number]{-moz-appearance:textfield;appearance:textfield;}
.acxpa-apm-shell input[type=number]::-webkit-outer-spin-button,.acxpa-apm-shell input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.acxpa-apm-shell input[type=number],.acxpa-apm-shell input.apm-num{font-family:var(--mono);text-align:right;}
#apm-profile-sel{min-width:230px;}
.apm-panel{background:#fff;border:1px solid var(--line);border-radius:5px;box-shadow:0 1px 2px rgba(20,60,59,.05);}
.apm-panel+.apm-panel{margin-top:18px;}
.apm-ph{display:flex;align-items:center;gap:11px;padding:13px 18px;border-bottom:2px solid var(--gold);background:var(--ink);border-radius:5px 5px 0 0;}
.apm-ph .apm-n{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);background:var(--gold);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;}
.apm-ph h2{font-size:17px!important;line-height:1.25!important;margin:0!important;font-weight:600!important;color:#fff!important;letter-spacing:-.005em;}
.apm-ph .apm-lab{color:rgba(255,255,255,.72);}
.apm-ph .apm-btn.apm-ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;}
.apm-ph .apm-btn.apm-ghost:hover{background:rgba(255,255,255,.14);}
#apm-save-profile{background:var(--gold)!important;border-color:var(--goldd)!important;color:#fff!important;}
#apm-save-profile:hover{background:var(--goldd)!important;}
.apm-pb{padding:16px;}
.apm-sm{padding:6px 10px;font-size:12px;}
.apm-x{border:1px solid var(--line);background:var(--paper);color:var(--inks);border-radius:3px;cursor:pointer;height:38px;width:38px;font-size:16px;line-height:1;}
.apm-x:hover{border-color:var(--alert);color:var(--alert);}
#apm-agent-name{flex:1;min-width:0;}
.apm-wt-grid{display:grid;grid-template-columns:1fr 90px;gap:8px 12px;align-items:center;}
.apm-wt-grid .cn{font-weight:700;font-size:13px;}
.apm-wt-grid input{width:100%;}
#apm-compliance-setup{margin-top:20px;border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:5px;padding:16px 18px;background:#F1F6F5;}
.apm-pickerbar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:18px;padding:13px 16px;background:var(--paper2);border:1px solid var(--line);border-radius:8px;}
.apm-pick-group{display:flex;align-items:center;gap:8px;}
.apm-pickerbar select{min-width:150px;}
.apm-pickerbar #apm-agent-sel{min-width:220px;font-weight:600;}
#apm-manage{margin-top:16px;}
#apm-capture-panel{margin-top:18px;}
.apm-roster{list-style:none;margin:0;padding:0;}
.apm-roster li{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:3px;margin-bottom:7px;cursor:pointer;background:var(--paper);}
.apm-roster li:hover{border-color:var(--gold);}
.apm-roster li.active{border-color:var(--ink);background:#fff;box-shadow:inset 3px 0 0 var(--gold);}
.apm-roster .dot{width:12px;height:12px;border-radius:50%;background:var(--alert);flex:none;}
.apm-roster .dot.breach{background:#fff;border:2px solid var(--alert);}
.apm-roster .nm{font-weight:600;font-size:13px;flex:1;}
.apm-roster .xy{font-family:var(--mono);font-size:11px;color:var(--inks);}
.apm-agent-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px;}
.apm-aff{flex:1;min-width:160px;display:flex;flex-direction:column;}
.apm-aff input{width:100%;}
.apm-aff-btns{display:flex;gap:8px;align-items:flex-end;}
.apm-opt{font-weight:600;text-transform:none;letter-spacing:0;color:var(--inks);opacity:.65;}
.apm-team-tag{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--inks);background:var(--paper2);border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap;}
.apm-roster-actions{display:flex;gap:5px;flex:none;}
.apm-roster .apm-mini{height:26px;width:26px;padding:0;display:grid;place-items:center;}
#apm-delete-profile{background:transparent!important;border-color:rgba(255,255,255,.4)!important;color:#fff!important;}
#apm-delete-profile:hover{border-color:var(--alert)!important;background:rgba(178,58,72,.3)!important;}
.apm-matrix-wrap{position:relative;}
.acxpa-apm-shell svg{display:block;width:100%;height:auto;}
.apm-tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-family:var(--mono);font-size:11px;padding:6px 9px;border-radius:3px;opacity:0;transition:opacity .12s;white-space:nowrap;transform:translate(-50%,-130%);z-index:5;}
.apm-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--inks);margin-top:10px;}
.apm-legend span{display:inline-flex;align-items:center;gap:6px;}
.apm-sw{width:12px;height:12px;border-radius:2px;}
.apm-cat{border:1px solid var(--line);border-radius:3px;margin-bottom:10px;overflow:hidden;}
.apm-cat-h{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:var(--paper2);cursor:pointer;}
.apm-cat-h .t{font-weight:700;font-size:13px;}
.apm-cat-h .w{font-family:var(--mono);font-size:10px;color:var(--inks);margin-left:8px;}
.apm-cat-h .s{font-family:var(--mono);font-size:13px;color:var(--goldd);}
.apm-cat-b{padding:10px 12px;display:none;}
.apm-cat.open .apm-cat-b{display:block;}
.apm-beh,.apm-prod,.apm-cmp,.apm-compin{display:grid;align-items:center;margin-bottom:7px;}
/* ONE COLUMN WIDTH FOR EVERY ROW, whether or not it has a third button.
 * Sizing the row to its own buttons left Pass and Fail in two different places
 * down one list, so the eye had to re-find the control on the rows that differ
 * — on a form somebody works through twenty times per sample. The width is set
 * for the widest case and the two-button rows share it. */
.apm-beh{grid-template-columns:1fr 228px;gap:10px;}
.apm-prod{grid-template-columns:1fr 96px 60px;gap:10px;}
.apm-cmp{grid-template-columns:1fr 156px;gap:10px;}
.apm-compin{grid-template-columns:1fr 110px;gap:10px;}
/* Pass and Fail keep the SAME width down the whole list, whether or not the row
   also offers N/A — otherwise every flagged element pulls its two main buttons
   narrower than its neighbours' and the column reads as ragged.

   THE SPACE IS RESERVED OUTSIDE THE BOX, NOT INSIDE IT. The first attempt
   stretched every box to the three-button width and left the third cell blank,
   which is worse than the problem it fixed: a bordered, empty tail hanging off
   the end of every two-button row. Justin: "all you've got is a wider Fail
   button which looks terrible."

   So the BOX shrinks by exactly the N/A track instead. Pass and Fail are the
   same 82px on every row, their right edge lands in the same place down the
   whole list, and a row that offers N/A simply reaches one button further —
   which is the honest reading, because that row does have one more control.
   A form with no N/A anywhere carries no has-na-col at all and the two
   buttons have the full column. */
.apm-pf{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:4px;overflow:hidden;width:100%;height:38px;}
.has-na-col .apm-pf{grid-template-columns:1fr 1fr 62px;}
.has-na-col .apm-pf:not(.has-na){width:calc(100% - 62px);grid-template-columns:1fr 1fr;}
.apm-pf .pf-btn{font-family:inherit;font-size:13px;font-weight:600;border:none;background:var(--paper);color:var(--inks);cursor:pointer;line-height:1;padding:0;}
.apm-pf .pf-btn+.pf-btn{border-left:1px solid var(--line);}
.apm-pf .pf-btn:hover{background:var(--paper2);}
.apm-pf .pf-pass.on{background:#1d7a4d;color:#fff;}
.apm-pf .pf-fail.on{background:var(--alert);color:#fff;}
/* N/A IS NOT A VERDICT, so it is not given a verdict colour. Pass is green and
 * Fail is red because they say something about the work; "did not arise" says
 * something about the call. Neutral ink keeps it from reading as a third grade
 * somewhere between the two. */
.apm-pf .pf-na{font-size:12px;letter-spacing:.03em;}
.apm-pf .pf-na.on{background:var(--inks);color:#fff;}
.apm-ta{width:100%!important;font-family:inherit!important;font-size:13px!important;line-height:1.5!important;color:var(--ink)!important;background:var(--paper)!important;border:1px solid var(--line)!important;border-radius:4px!important;padding:8px 10px!important;resize:vertical;min-height:52px;margin:0!important;box-sizing:border-box!important;}
.apm-ta:focus{outline:2px solid var(--gold);outline-offset:-1px;border-color:var(--gold)!important;}
.apm-cnote{margin-top:12px;}
.apm-cnote label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--inks);margin-bottom:5px;}
.apm-overall-notes{margin-top:18px;}
.apm-input-err{border-color:var(--alert)!important;background:rgba(178,58,72,.06)!important;}
.apm-rangeerr{display:block;font-size:11px;color:var(--alert);margin-top:3px;font-weight:600;}
.apm-beh label,.apm-prod .l,.apm-cmp .l,.apm-compin .l,.apm-comp-summary .l{font-size:13px;color:var(--inks);}
.apm-prod .meta,.apm-cmp .meta,.apm-compin .meta,.apm-comp-summary .meta{font-family:var(--mono);font-size:10px;color:var(--inks);}
/* Severity, readable at a glance in the scoring form. */
.apm-cmp .meta.maj,.apm-comp-summary .meta.maj{color:var(--alert);font-weight:700;}
.apm-cmp .meta.min,.apm-comp-summary .meta.min{color:var(--goldd,#8a6a1e);font-weight:700;}
/* The two breach tiles. Never one blended number. */
.apm-tc--maj{border-left:3px solid var(--alert);}
.apm-tc--min{border-left:3px solid var(--gold);}
.apm-beh input,.apm-prod input,.apm-cmp input,.apm-cmp select,.apm-compin input,.apm-comp-summary input{width:100%;}
.apm-att{font-family:var(--mono);font-size:13px;color:var(--goldd);text-align:right;}
.apm-prod-head{margin-bottom:2px;}
.apm-compin-head{margin-bottom:2px;}
.apm-compin-head .l,.apm-compin-head .hcol{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--inks);}
.apm-compin-head .hcol{text-align:right;}
.apm-prod-head .l,.apm-prod-head .hcol{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--inks);}
.apm-prod-head .hcol{text-align:right;}
.apm-cmp .fail{color:var(--alert);font-weight:700;}
.apm-totals{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap;}
.apm-tc{flex:1;min-width:120px;border:1px solid var(--line);border-radius:3px;padding:10px 12px;background:var(--paper);}
.apm-tc .k{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--inks);}
.apm-tc .v{font-family:var(--mono);font-size:24px;font-weight:600;}
.apm-tc .v.apm-v-text{font-size:18px;}
.apm-breach-banner{background:rgba(178,58,72,.08);border:1px solid var(--alert);color:var(--alert);border-radius:3px;padding:10px 12px;margin-top:12px;font-size:13px;font-weight:600;}
.apm-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.apm-tab{font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--paper);border-radius:3px;padding:6px 11px;cursor:pointer;color:var(--inks);}
.apm-tab.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.apm-empty{color:var(--inks);font-size:13px;padding:30px 10px;text-align:center;border:1px dashed var(--line);border-radius:4px;}
.apm-bad{border-color:var(--alert)!important;box-shadow:0 0 0 2px rgba(178,58,72,.18)!important;}
.apm-bad-pf{outline:2px solid var(--alert);outline-offset:2px;border-radius:5px;}
.apm-save-row{display:flex;gap:10px;align-items:center;margin-top:14px;}
.apm-savestatus{font-size:12.5px;}
.apm-savestatus.ok{color:var(--zone);font-weight:600;}
.apm-savestatus.err{color:var(--alert);font-weight:600;}
.apm-postsave{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:12px 14px;background:rgba(95,126,80,.10);border:1px solid var(--zone);border-radius:5px;}
.apm-periodbar{display:flex;align-items:center;gap:8px;}
.apm-period-sel{min-width:84px;}
#apm-period-sub{min-width:104px;}
.apm-section{border:1px solid var(--line);border-radius:5px;margin-bottom:16px;overflow:hidden;}
.apm-section>.sh{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--paper2);border-bottom:1px solid var(--line);}
.apm-section>.sh .st{font-weight:600;font-size:14px;color:var(--ink);}
.apm-section>.sh .sc{font-family:var(--mono);font-size:11px;color:var(--inks);}
.apm-section>.sh .sp{flex:1;}
.apm-section>.sb{padding:14px;}
.apm-sec-q{border-left:3px solid var(--ink);}
.apm-sec-q>.sh{background:rgba(20,60,59,.06);border-bottom-color:rgba(20,60,59,.18);}
.apm-sec-p{border-left:3px solid var(--gold);}
.apm-sec-p>.sh{background:rgba(184,144,48,.11);border-bottom-color:rgba(184,144,48,.32);}
.apm-axis{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap;}
.apm-axis.q{background:var(--ink);color:#fff;}
.apm-axis.p{background:var(--gold);color:#3a2f00;}
.apm-axis.n{background:var(--line);color:var(--inks);}
.apm-acc>.sh{cursor:pointer;user-select:none;}
.apm-acc.collapsed>.sb{display:none;}
/* An accordion nobody can see is a heading. This was a 10px grey glyph that
   read as a full stop, so the samples list looked like it had simply vanished
   rather than folded. */
.apm-caret{display:inline-block;font-size:15px;line-height:1;color:var(--ink);transition:transform .15s;margin-right:7px;}
.apm-acc:not(.collapsed)>.sh .apm-caret{transform:rotate(90deg);}
.apm-chip{font-weight:600;padding:1px 8px;border-radius:999px;font-size:12.5px;white-space:nowrap;}
.apm-manage-btn{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important;font-weight:600!important;}
.apm-manage-btn:hover{background:#0e2c2b!important;border-color:#0e2c2b!important;}
.apm-calls{list-style:none;margin:0;padding:0;}
.apm-call{display:grid;grid-template-columns:1fr auto auto auto auto auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:4px;margin-bottom:7px;background:var(--paper);}
.apm-call .cref{font-weight:600;font-size:13px;}
.apm-call .cmeta{font-family:var(--mono);font-size:11px;color:var(--inks);}
.apm-call .cq{font-family:var(--mono);font-size:13px;color:var(--goldd);}
.apm-call .cbreach{font-family:var(--mono);font-size:10px;font-weight:700;display:flex;gap:5px;}
.apm-call .cbreach .maj{color:var(--alert);}
.apm-call .cbreach .min{color:var(--goldd,#8a6a1e);}
.apm-mini{border:1px solid var(--line);background:var(--paper);color:var(--inks);border-radius:3px;cursor:pointer;height:30px;padding:0 9px;font-size:12px;font-weight:600;font-family:inherit;}
.apm-mini:hover{border-color:var(--gold);color:var(--goldd);}
.apm-mini.del:hover{border-color:var(--alert);color:var(--alert);}
/* The marking form is one repeated decision — read a short label, hit Pass or
 * Fail — twenty or so times per sample, so it is held tighter than the column
 * around it: the label and its buttons have to stay in one glance. */
.apm-callform{
	border:1px solid var(--ink);border-radius:5px;padding:14px;margin-top:10px;background:#fff;
	max-width:860px;
}
/* ALIGNED ON THE INPUTS, NOT ON THE TOP OF THE LABEL.
 *
 * "HANDLE TIME (MM:SS)" carries a tooltip marker and wrapped to two lines in
 * its column, which pushed its input a line lower than the other three — so a
 * row of four fields read as three fields and a mistake. align-items:end puts
 * every input on the same baseline however many lines its label takes, which
 * survives translation and a longer measure name; widening the column only
 * moves the problem to the next long label. */
.apm-meta-grid{display:grid;grid-template-columns:1.4fr 1.2fr 1fr .9fr;gap:10px;margin-bottom:14px;align-items:end;}
.apm-meta-grid .apm-fld{margin-bottom:4px;}
/* The "?" used to be a separate inline word, so "Handle time (mm:ss)" plus a
   marker overflowed the narrowest column and wrapped, dropping that field's
   input a line below the other three. The marker rides the last line instead of
   starting a new one. */
.apm-fld--tip{display:flex;align-items:center;gap:5px;white-space:nowrap;}
.apm-fld--tip .apm-info{flex:none;}
/* THE INPUTS FILL THEIR COLUMN. Justin: "why is there an empty space after
 * the input field for call ref/recording ID and before Date & Time?" Because
 * each input sized itself to its own default width and left the rest of its
 * grid column empty — so the row read as four fields with a hole punched after
 * the first, rather than as four columns. */
.apm-meta-grid input,.apm-meta-grid select{width:100%;}
.apm-mode-help{font-size:13.5px;line-height:1.55;color:var(--inks);margin:0 0 14px;}
.apm-savedbanner{background:rgba(184,144,48,.10);border:1px solid var(--gold);color:#5c4708;border-radius:5px;padding:9px 12px;font-size:13px;line-height:1.5;margin:0 0 14px;}
.apm-rollnote{font-family:var(--mono);font-size:12px;color:var(--inks);margin-top:8px;}
.apm-comp-summary{display:grid;grid-template-columns:1fr 110px 80px;gap:10px;align-items:center;margin-bottom:7px;}
.apm-comp-summary .pr{font-family:var(--mono);font-size:11px;text-align:right;color:var(--inks);}
.apm-comp-summary.brc .pr{color:var(--alert);font-weight:700;}
.apm-comp-summary.brn .pr{color:var(--goldd,#8a6a1e);font-weight:700;}
@media(max-width:920px){.apm-meta-grid{grid-template-columns:1fr 1fr;}.apm-call{grid-template-columns:1fr auto auto;}}

/* =========================================================================
 * THE TWO BLOCKS (2.0.0)
 *
 * Quality is a blend of the accredited ACXPA block and the account's own
 * measures. Everything below exists so the person capturing can see which
 * half they are scoring, what the other half is contributing, and — when it
 * has not been scored yet — that the number in front of them is honest for
 * what HAS been marked rather than quietly halved.
 * ====================================================================== */

/* Block identity, shared by tabs, pills, headers and the sample form. */
.apm-bt-acxpa{--bk:var(--acxpa);--bkt:var(--acxpat);}
.apm-bt-custom{--bk:var(--own);--bkt:var(--ownt);}

/* --- Which block am I scoring? ------------------------------------------ */
.apm-blocktabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px;}
.apm-blocktab{flex:1;min-width:200px;text-align:left;cursor:pointer;font-family:inherit;
	background:#fff;border:1px solid var(--line);border-left:4px solid var(--bk,var(--inks));
	border-radius:5px;padding:10px 13px;transition:background .12s,box-shadow .12s;}
.apm-blocktab:hover:not(:disabled){background:var(--paper2);}
.apm-blocktab.on{background:var(--bkt,var(--paper2));box-shadow:inset 0 -3px 0 var(--bk,var(--gold));}
.apm-blocktab .nm{display:block;font-weight:700;font-size:14.5px;color:var(--ink);}
/* Progress against the period's target: dots for the glance, words for the
 * reading, neither carrying the meaning alone. */
/* THE PROGRESS IS WHAT THE CARD IS FOR. It was 12px grey under a 14.5px title
   and a 10.5px share, so the one number an assessor opens this page to read was
   the quietest thing on it. Justin: "way too small — I think these are quite
   pivotal and should stand out." */
.apm-blocktab .pr{display:flex;align-items:center;gap:9px;margin-top:8px;font-size:15px;font-weight:700;color:var(--ink);}
.apm-blocktab .pr .togo{font-weight:600;color:var(--inks);}
/* "no target set" is a note about the SETUP, not a reading of the work, so it
   is sized and coloured like a note and never competes with the count. */
.apm-blocktab .pr .apm-notgt{font-weight:600;font-size:13px;}
.apm-dots{display:inline-flex;gap:5px;}
.apm-dot{width:13px;height:13px;border-radius:50%;background:var(--line);display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
.apm-dot.on{background:var(--zone);box-shadow:none;}
.apm-blocktab.on .pr{color:var(--ink);font-weight:600;}
.apm-blocktab .mt{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--inks);margin-top:3px;}
.apm-blocktab.locked{opacity:.55;cursor:not-allowed;background:var(--paper2);}
.apm-blockmark{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
	color:var(--bk,var(--ink));background:var(--bkt,var(--paper2));border:1px solid var(--bk,var(--line));
	border-radius:999px;padding:4px 11px;display:inline-block;margin:0 0 12px;}
.apm-blockmark strong{font-weight:700;}

/* --- What each block is contributing ------------------------------------ */
.apm-blockline{display:flex;gap:9px;flex-wrap:wrap;margin:10px 0 0;}
.apm-blockpill{display:inline-flex;align-items:baseline;gap:8px;border:1px solid var(--line);
	border-left:3px solid var(--bk,var(--inks));border-radius:4px;padding:5px 10px;background:#fff;}
.apm-blockpill .n{font-size:12.5px;color:var(--ink);font-weight:600;}
.apm-blockpill .s{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--bk,var(--ink));}
.apm-blockpill .w{font-family:var(--mono);font-size:10.5px;color:var(--inks);}
.apm-blockpill.none{background:var(--paper2);}
.apm-blockpill.none .s{font-size:11.5px;font-weight:400;color:var(--inks);font-family:inherit;}

/* --- Part-scored ---------------------------------------------------------
 * Amber, not red: nothing is wrong, something is simply outstanding. Red here
 * would teach people to ignore it, and this is the one flag that has to keep
 * meaning something. */
.apm-partialbanner{background:rgba(184,144,48,.10);border:1px solid var(--gold);border-left-width:4px;
	border-radius:4px;padding:11px 14px;margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--ink);}
.apm-partial-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
	color:var(--goldd);border:1px solid var(--gold);background:rgba(184,144,48,.12);
	border-radius:999px;padding:2px 8px;white-space:nowrap;}

/* --- Summary entry, grouped by block ------------------------------------ */
.apm-sumblock{border:1px solid var(--line);border-left:4px solid var(--bk,var(--inks));border-radius:5px;
	margin:0 0 14px;overflow:hidden;background:#fff;}
.apm-sumblock .hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:9px 13px;
	background:var(--bkt,var(--paper2));border-bottom:1px solid var(--line);}
.apm-sumblock .hd .nm{font-weight:700;font-size:14.5px;color:var(--ink);}
.apm-sumblock .hd .sh{font-family:var(--mono);font-size:11px;color:var(--inks);}
.apm-sumblock .hd .lk{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
	color:var(--inks);border:1px solid var(--line);border-radius:999px;padding:2px 8px;margin-left:auto;}
.apm-sumblock .apm-compin{padding-left:13px;padding-right:13px;}

/* --- What the scorecard measures (read-only, in setup) ------------------ */
.apm-fw-acxpa{--bk:var(--acxpa);--bkt:var(--acxpat);}
.apm-fw-custom{--bk:var(--own);--bkt:var(--ownt);}
	padding:8px 12px;background:var(--bkt,var(--paper2));border-bottom:1px solid var(--line);}

/* The productivity grid's rules moved to apm-productivity.css with the module
 * itself. Leaving a copy here would be two stylesheets for one table, free to
 * drift the first time either is touched. */

/* ── The rail is the WORKLIST ─────────────────────────────────────────────
   The old page asked "which agent?" in a dropdown buried in a toolbar, five
   controls along, after four paragraphs and a demo advert. Monthly QA is a
   list of people you work through — so the list IS the navigation, and it
   carries its own progress. */
.apm-wl{display:flex;flex-direction:column;gap:2px;margin:0 calc(var(--acxpa-ds-space-xs) * -1);}
.apm-wl-team{
	font-size:var(--acxpa-ds-text-caption);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
	color:var(--acxpa-ds-text-muted-on-dark);padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-xs) var(--acxpa-ds-space-2xs);
}
.apm-wl-a{
	display:flex;align-items:center;gap:var(--acxpa-ds-space-xs);width:100%;
	background:none;border:0;cursor:pointer;text-align:left;
	padding:var(--acxpa-ds-space-xs);border-radius:var(--acxpa-ds-radius-md);
	color:var(--acxpa-ds-text-on-dark);font:inherit;font-size:var(--acxpa-ds-text-small);
}
.apm-wl-a:hover{background:var(--acxpa-ds-teal-800);}
.apm-wl-a.on{background:var(--acxpa-ds-white);color:var(--acxpa-ds-ink);box-shadow:var(--acxpa-ds-shadow-sm);}
.apm-wl-a .nm{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.apm-wl-a .ct{
	flex:none;font-size:var(--acxpa-ds-text-caption);font-variant-numeric:tabular-nums;
	color:var(--acxpa-ds-text-muted-on-dark);
}
.apm-wl-a.on .ct{color:var(--acxpa-ds-warm-slate);}
.apm-wl-a .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--acxpa-ds-teal-600);}
.apm-wl-a .dot.none{background:transparent;box-shadow:inset 0 0 0 1px var(--acxpa-ds-warm-slate);}
.apm-wl-a .dot.done{background:var(--acxpa-ds-success);}

.apm-railfind{
	width:100%;box-sizing:border-box;height:34px;
	background:var(--acxpa-ds-teal-800);border:1px solid var(--acxpa-ds-teal-600);
	color:var(--acxpa-ds-text-on-dark);border-radius:var(--acxpa-ds-radius-sm);
	padding:0 var(--acxpa-ds-space-xs);font:inherit;font-size:var(--acxpa-ds-text-small);
}
.apm-railfind::placeholder{color:var(--acxpa-ds-text-muted-on-dark);}
.apm-railperiod{
	display:flex;align-items:center;gap:var(--acxpa-ds-space-2xs);
	padding:var(--acxpa-ds-space-xs);background:rgba(255,255,255,.06);
	border-radius:var(--acxpa-ds-radius-md);
}
.apm-railperiod .l{font-size:var(--acxpa-ds-text-caption);color:var(--acxpa-ds-text-muted-on-dark);flex:1;min-width:0;}
/* The label and the month are two lines, not a run-on: "PeriodAug 2026". */
.apm-railperiod .l b{display:block;font-weight:600;font-size:var(--acxpa-ds-text-small);color:var(--acxpa-ds-text-on-dark);}
.apm-railperiod button{
	background:none;border:0;color:var(--acxpa-ds-text-on-dark);cursor:pointer;
	font-size:var(--acxpa-ds-text-body);line-height:1;padding:2px 6px;border-radius:var(--acxpa-ds-radius-sm);
}
.apm-railperiod button:hover{background:rgba(255,255,255,.14);}

/* ── The canvas opens ON THE WORK ────────────────────────────────────── */
.apm-scorehead{
	display:flex;align-items:flex-start;gap:var(--acxpa-ds-space-md);flex-wrap:wrap;
	padding:var(--acxpa-ds-space-lg) var(--acxpa-ds-space-lg) var(--acxpa-ds-space-md);
}
.apm-scorehead h1{
	margin:0;font-size:var(--acxpa-ds-text-h2);font-weight:600;letter-spacing:-.02em;
	color:var(--acxpa-ds-ink);line-height:1.15;
}
.apm-scorehead .sub{
	margin:4px 0 0;font-size:var(--acxpa-ds-text-small);color:var(--acxpa-ds-warm-slate);
}
.apm-scorehead .act{margin-left:auto;display:flex;gap:var(--acxpa-ds-space-xs);align-items:center;}

.apm-primary{
	background:var(--acxpa-ds-gold);color:var(--acxpa-ds-ink);border:0;cursor:pointer;
	font:inherit;font-size:var(--acxpa-ds-text-small);font-weight:700;
	padding:11px var(--acxpa-ds-space-lg);border-radius:var(--acxpa-ds-radius-md);
	box-shadow:var(--acxpa-ds-shadow-sm);white-space:nowrap;
}
.apm-samples{list-style:none;margin:0;padding:0;}
.apm-samples li{
	display:flex;align-items:center;gap:var(--acxpa-ds-space-sm);
	padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-lg);
	border-bottom:1px solid var(--acxpa-ds-stone);font-size:var(--acxpa-ds-text-small);
}
.apm-samples li:last-child{border-bottom:0;}
.apm-samples .ref{font-weight:600;color:var(--acxpa-ds-ink);}
.apm-samples .when{color:var(--acxpa-ds-warm-slate);font-size:var(--acxpa-ds-text-caption);}
.apm-samples .sc{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;}

.apm-mini{
	display:flex;align-items:center;gap:var(--acxpa-ds-space-sm);
	padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-lg);
	font-size:var(--acxpa-ds-text-small);color:var(--acxpa-ds-warm-slate);
	border-top:1px solid var(--acxpa-ds-stone);
}
.apm-mini b{color:var(--acxpa-ds-ink);}
.apm-mini a{color:var(--acxpa-ds-teal-700);font-weight:600;margin-left:auto;white-space:nowrap;}

.apm-tot{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
	gap:1px;background:var(--acxpa-ds-stone);border-top:1px solid var(--acxpa-ds-stone);
}
.apm-tot div{background:var(--acxpa-ds-white);padding:var(--acxpa-ds-space-md) var(--acxpa-ds-space-lg);}
.apm-tot .l{
	display:block;font-size:var(--acxpa-ds-text-caption);font-weight:600;letter-spacing:.06em;
	text-transform:uppercase;color:var(--acxpa-ds-warm-slate);margin-bottom:4px;
}
.apm-tot .n{font-size:var(--acxpa-ds-text-h3);font-weight:600;color:var(--acxpa-ds-ink);font-variant-numeric:tabular-nums;}
.apm-tot .n.na{color:var(--acxpa-ds-warm-slate);font-weight:400;}

.apm-note{
	margin:0 var(--acxpa-ds-space-lg) var(--acxpa-ds-space-lg);
	padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-md);
	background:var(--acxpa-ds-sand);border:1px solid var(--acxpa-ds-stone);
	border-radius:var(--acxpa-ds-radius-md);
	font-size:var(--acxpa-ds-text-caption);color:var(--acxpa-ds-warm-slate);line-height:1.6;
}

/* ── The pieces the mockup stood in for ──────────────────────────────────── */

/* This page has no side panel; the shell reserves one for the scorecard page. */
.apm-scoring .apm-work{grid-template-columns:minmax(0,1fr);}

/* ONE MEASURE FOR THE WHOLE WORKING COLUMN, not just the marking form.
 *
 * Justin: "You've got the recorded scores full width still." Capping only the
 * form left the samples list above it spanning the monitor, with the reference
 * hard left and its date and Edit button seventeen hundred pixels away — the
 * same journey for the eye, on the list somebody scans before they even start.
 * Capping the column instead of each piece means the next thing added to this
 * page inherits the measure rather than having to be remembered.
 *
 * The RAIL is outside this and keeps its own width, so the page still fills the
 * screen; it is the reading and marking column that stops. */
.apm-scoring .apm-work{max-width:1040px;}

.apm-wl-empty{
	padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-xs);
	font-size:var(--acxpa-ds-text-caption);color:var(--acxpa-ds-text-muted-on-dark);line-height:1.5;
}
.apm-wl-team span{font-weight:400;opacity:.75;}

/* A COMPLIANCE BREACH IS NOT A PROGRESS STATE. The dot says how much is done;
 * a breach is a different kind of fact, so it gets its own ring rather than
 * overwriting the answer to "is this person finished". R-B17. */
.apm-wl-a .dot[data-breach]{box-shadow:0 0 0 2px var(--acxpa-ds-error);}
.apm-wl-a .ct.done{color:var(--acxpa-ds-success);font-weight:600;}
.apm-wl-a.on .ct.done{color:var(--acxpa-ds-success-deep);}

/* Quick-add, folded away until it is wanted. */
.apm-wl-add{margin:var(--acxpa-ds-space-xs) 0 0;}
.apm-wl-addbtn{
	width:100%;background:none;border:1px dashed var(--acxpa-ds-teal-600);
	color:var(--acxpa-ds-text-muted-on-dark);cursor:pointer;font:inherit;
	font-size:var(--acxpa-ds-text-caption);padding:var(--acxpa-ds-space-xs);
	border-radius:var(--acxpa-ds-radius-md);
}
.apm-wl-addbtn:hover{color:var(--acxpa-ds-text-on-dark);border-color:var(--acxpa-ds-gold);}
.apm-app .apm-wl-add input,
.apm-app .apm-wl-add select{width:100%;margin-top:var(--acxpa-ds-space-2xs)!important;}
.apm-wl-addrow{display:flex;gap:var(--acxpa-ds-space-2xs);margin-top:var(--acxpa-ds-space-2xs);}
.apm-wl-add .apm-help{
	font-size:var(--acxpa-ds-text-caption);color:var(--acxpa-ds-text-muted-on-dark);
	margin:var(--acxpa-ds-space-2xs) 0 0;line-height:1.45;
}

/* The roll-up. A bar, because "13 of 25" is a ratio and a ratio is a length. */
.apm-progline{
	margin:0;font-size:var(--acxpa-ds-text-caption);line-height:1.5;
	color:var(--acxpa-ds-text-muted-on-dark);
}
.apm-progline b{color:var(--acxpa-ds-text-on-dark);}
.apm-progbar{
	display:block;height:5px;border-radius:999px;overflow:hidden;
	background:var(--acxpa-ds-teal-900);margin:0 0 var(--acxpa-ds-space-2xs);
}
.apm-progbar i{display:block;height:100%;background:var(--acxpa-ds-gold);}
.apm-progno{display:block;margin-top:var(--acxpa-ds-space-2xs);opacity:.8;}
.apm-progno a{color:var(--acxpa-ds-gold);}

/* Support-only controls, visually separated so nobody mistakes them for part
 * of the job. */
.apm-railadmin{
	margin-top:var(--acxpa-ds-space-sm);padding:var(--acxpa-ds-space-sm);
	background:var(--acxpa-ds-teal-900);border:1px dashed var(--acxpa-ds-teal-600);
	border-radius:var(--acxpa-ds-radius-md);
}
.apm-railadmin>b{
	display:block;font-size:var(--acxpa-ds-text-caption);font-weight:600;
	letter-spacing:var(--acxpa-ds-tracking-eyebrow);text-transform:uppercase;
	color:var(--acxpa-ds-teal-300);margin-bottom:var(--acxpa-ds-space-2xs);
}
.apm-railadmin .apm-tierswitch{display:flex;gap:2px;}
.apm-railadmin .apm-tierseg{
	flex:1;background:var(--acxpa-ds-teal-800);border:0;cursor:pointer;
	color:var(--acxpa-ds-text-muted-on-dark);font:inherit;
	font-size:var(--acxpa-ds-text-caption);padding:6px;border-radius:var(--acxpa-ds-radius-sm);
}
.apm-railadmin .apm-tierseg.apm-on{background:var(--acxpa-ds-white);color:var(--acxpa-ds-ink);font-weight:600;}
.apm-railadmin .apm-tiernote{
	margin:var(--acxpa-ds-space-2xs) 0 0;font-size:var(--acxpa-ds-text-caption);
	line-height:1.45;color:var(--acxpa-ds-text-muted-on-dark);
}

/* The canvas head, and how much is left of this person. */
.apm-scorewho{min-width:0;}
.apm-left{
	font-size:var(--acxpa-ds-text-caption);font-weight:600;white-space:nowrap;
	padding:4px var(--acxpa-ds-space-sm);border-radius:999px;
	background:var(--acxpa-ds-gold-tint);color:var(--acxpa-ds-gold-deep);
	border:1px solid var(--acxpa-ds-gold);
}
.apm-left.done{
	background:var(--acxpa-ds-success-tint);
	color:var(--acxpa-ds-teal-700);border-color:var(--acxpa-ds-teal-600);
}

/* The demo, for as long as it is doing a job. */
.apm-demorow{
	display:flex;align-items:center;gap:var(--acxpa-ds-space-md);flex-wrap:wrap;
	margin:var(--acxpa-ds-space-lg);padding:var(--acxpa-ds-space-md) var(--acxpa-ds-space-lg);
	background:var(--acxpa-ds-teal-800);border-radius:var(--acxpa-ds-radius-lg);
	color:var(--acxpa-ds-text-on-dark);
}
.apm-demo-t{flex:1;min-width:240px;}
.apm-demo-t b{display:block;font-size:var(--acxpa-ds-text-body);margin-bottom:2px;}
.apm-demo-t span{font-size:var(--acxpa-ds-text-small);color:var(--acxpa-ds-text-muted-on-dark);line-height:1.5;}