/**
 * ACXPA Agent Performance Matrix — shared core styles.
 *
 * The tokens and primitives every APM page uses: the shell, masthead, panels,
 * buttons, form controls, tooltip, loader and toast. Lifted verbatim from the
 * rules that were duplicated byte-for-byte between the entry and results page
 * templates, so extracting them changes nothing visually.
 *
 * Loaded by apm-assets.php. Page-specific rules live in their own stylesheet
 * beside this one; nothing here is page-specific.
 *
 * Appearance is governed by the ACXPA Executable Ruleset — colours here are the
 * APM tool's existing scoped palette, not new values.
 *
 * @version 1.0.0
 */

/* --- Shell -----------------------------------------------------------------
 * EVERY COLOUR HERE IS AN ACXPA TOKEN. NOT ONE IS A LITERAL.
 *
 * The APM stylesheets carried 296 hand-picked hexes and referenced the design
 * system not once — which is R-A1 (the token file is the only place a brand hex
 * may live) broken 296 times, and it is why five rounds of colour argument were
 * possible at all: there was nothing authoritative to argue against.
 *
 * These locals are ALIASES, kept only so the other APM stylesheets keep working
 * unchanged; the values all arrive from acxpa-tokens.css. Per R-A3 there are no
 * var() fallbacks — if the token file has not loaded, that is a load-order bug
 * to fix, not something to paper over with a second colour nobody measured.
 *
 * WHY THESE TOKENS, for the roles this tool needs:
 *
 *   the four sections   Harbour Deep / Teal 700 / Gold Deep / Clay Deep.
 *                       Four brand colours, all dark enough for white type,
 *                       each with a published tint for its ground.
 *   the two blocks      Teal 600 is the accredited framework — it should be
 *                       ACXPA's own colour. Harbour is the account's own
 *                       measures: a brand accent, not a status colour, so it
 *                       cannot be mistaken for something being wrong.
 *   alert               --acxpa-ds-error, which is a STATUS token, used only
 *                       where something actually is wrong (R-B17).
 * -------------------------------------------------------------------------- */
.acxpa-apm-shell{
	--paper:var(--acxpa-ds-white);
	--paper2:var(--acxpa-ds-cloud);
	--bone:var(--acxpa-ds-sand);
	--ink:var(--acxpa-ds-ink);
	--inks:var(--acxpa-ds-slate);
	--line:var(--acxpa-ds-border);
	--line2:var(--acxpa-ds-border-strong);
	--graphite:var(--acxpa-ds-teal-800);
	--gold:var(--acxpa-ds-gold);
	--goldd:var(--acxpa-ds-gold-deep);
	--zone:var(--acxpa-ds-success);
	--zonet:var(--acxpa-ds-success-tint);
	--alert:var(--acxpa-ds-error);
	--alertt:var(--acxpa-ds-error-tint);

	/* The accredited framework, and the account's own measures. */
	--acxpa:var(--acxpa-ds-teal-600);
	--acxpat:var(--acxpa-ds-teal-50);
	--own:var(--acxpa-ds-harbour);
	--ownt:var(--acxpa-ds-harbour-tint);

	--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
	--ui:var(--acxpa-ds-font);

	max-width:1180px;margin:0 auto;
	padding:var(--acxpa-ds-space-lg) var(--acxpa-ds-space-md) var(--acxpa-ds-space-5xl);
	color:var(--ink);font-family:var(--ui);
}
.acxpa-apm-shell *{box-sizing:border-box;}

/* --- Masthead ------------------------------------------------------------ */
.apm-mast{border-bottom:2px solid var(--ink);padding-bottom:14px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;}
.apm-statstrip{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--acxpa-ds-radius-md);overflow:hidden;margin:0 0 22px;background:var(--paper);}
.apm-panel+.apm-statstrip{margin-top:20px;}
.apm-stat{flex:1;padding:12px 16px;border-right:1px solid var(--line);}
.apm-stat:last-child{border-right:0;}
.apm-stat .n{font-size:var(--acxpa-ds-text-h3);font-weight:800;color:var(--ink);line-height:1.1;letter-spacing:-.02em;}
.apm-stat .l{font-family:var(--mono);font-size:var(--acxpa-ds-text-caption);letter-spacing:.12em;text-transform:uppercase;color:var(--inks);margin-top:3px;}
.apm-stat.warn .n{color:var(--alert);}
.apm-mast h1{margin:0;font-size:var(--acxpa-ds-text-small);line-height:1.15;letter-spacing:-.01em;}
.apm-eyebrow{font-family:var(--mono);font-size:var(--acxpa-ds-text-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--goldd);margin:0 0 4px;}
.apm-badge{font-family:var(--mono);font-size:var(--acxpa-ds-text-caption);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--gold);color:var(--goldd);border-radius:999px;padding:4px 12px;}
.apm-gold-rule{height:3px;background:linear-gradient(90deg,var(--gold) 0,var(--gold) 38%,transparent 38%);margin:0 0 22px;}
.apm-intro{margin:0 0 22px;}
.apm-intro p{font-size:var(--acxpa-ds-text-body);line-height:1.6;color:var(--inks);margin:0 0 8px;}
.apm-intro a{color:var(--goldd);font-weight:600;text-decoration:underline;}

/* --- Form controls ------------------------------------------------------- */
.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:var(--acxpa-ds-text-small)!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 select:focus,.acxpa-apm-shell input:focus{outline:2px solid var(--gold);outline-offset:-1px;border-color:var(--gold);}
/* A field label is the smallest type on the page and was the weakest: grey,
 * 700, uppercase, tracked — the default "admin form" label. Ink at 600 with
 * looser tracking reads as considered rather than as system chrome. */
.apm-fld{display:block;font-size:var(--acxpa-ds-text-caption);color:var(--ink);margin-bottom:7px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;}

/* --- Panels + type ------------------------------------------------------- */
.apm-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--acxpa-ds-radius-md);box-shadow:var(--acxpa-ds-shadow-sm);overflow:hidden;}
.apm-panel+.apm-panel{margin-top:20px;}
.apm-panel-pad{padding:18px 20px;}
.apm-panel-head{padding:13px 20px;background:var(--paper2);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
.apm-panel-head h2,.apm-panel-head .apm-h3{color:var(--ink)!important;font-size:var(--acxpa-ds-text-body)!important;font-weight:700!important;letter-spacing:-.01em;margin:0!important;}
.apm-panel-head .apm-help{color:var(--inks)!important;margin:2px 0 0!important;font-size:var(--acxpa-ds-text-caption)!important;}
/* Reserved for the one bar that should dominate — not for every section. */
.apm-panel-head--dark{background:var(--ink);border-bottom:3px solid var(--gold);}
.apm-panel-head--dark h2,.apm-panel-head--dark .apm-h3{color:var(--acxpa-ds-text-on-dark)!important;}
.apm-panel-head--dark .apm-help{color:var(--acxpa-ds-text-muted-on-dark)!important;}

/* --- Accordion sections --------------------------------------------------
 * Built on <details>/<summary>: keyboard and screen-reader behaviour for free,
 * and the sections still open without JavaScript. Each carries a coloured edge
 * so the eye can tell them apart without three competing dark blocks.
 * ---------------------------------------------------------------------- */
.apm-acc{background:var(--paper);border:1px solid var(--line);border-radius:var(--acxpa-ds-radius-md);box-shadow:var(--acxpa-ds-shadow-sm);overflow:hidden;margin:0 0 14px;}
.apm-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:15px 18px 15px 0;background:var(--paper);position:relative;transition:background .12s;}
.apm-acc>summary::-webkit-details-marker{display:none;}
.apm-acc>summary:hover{background:var(--paper2);}
.apm-acc>summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.apm-acc[open]>summary{background:var(--paper2);border-bottom:1px solid var(--line);}
.apm-acc-edge{width:5px;align-self:stretch;flex:none;background:var(--inks);}
.apm-acc--people .apm-acc-edge{background:var(--acxpa-ds-teal-600);}
.apm-acc--struct .apm-acc-edge{background:var(--gold);}
.apm-acc--audit  .apm-acc-edge{background:var(--acxpa-ds-harbour);}
.apm-acc-txt{flex:1;min-width:0;}
.apm-acc-title{display:block;font-size:var(--acxpa-ds-text-body);font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.25;}
.apm-acc-sub{display:block;font-size:var(--acxpa-ds-text-caption);color:var(--inks);margin-top:2px;line-height:1.4;}
.apm-acc-count{font-family:var(--mono);font-size:var(--acxpa-ds-text-caption);letter-spacing:.06em;color:var(--inks);background:var(--paper2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap;}
.apm-acc[open] .apm-acc-count{background:var(--paper);}
.apm-acc-chev{width:9px;height:9px;border-right:2px solid var(--goldd);border-bottom:2px solid var(--goldd);transform:rotate(45deg);transition:transform .18s;flex:none;margin-top:-4px;}
.apm-acc[open] .apm-acc-chev{transform:rotate(-135deg);margin-top:3px;}
.apm-acc-body{padding:18px;}

/* Section label inside a panel — a heading needs a ground of its own even when
   it is not a whole panel. */
/* A sub-heading inside a section. It was a bordered, tinted, gold-railed strip
 * — a banner announcing a heading, which is one component too many. */
.apm-sect{background:transparent;border:0;border-bottom:1px solid var(--secl);border-radius:0;padding:0 0 9px;margin:0 0 16px;}
.apm-sect .apm-fld{margin:0;color:var(--ink);font-size:var(--acxpa-ds-text-caption);}
.apm-sect .apm-help{margin:3px 0 0!important;font-size:var(--acxpa-ds-text-caption)!important;}
.apm-help{font-size:var(--acxpa-ds-text-small)!important;line-height:1.55!important;color:var(--inks);margin:0 0 14px;}
.apm-h3{font-size:var(--acxpa-ds-text-body)!important;line-height:1.3!important;margin:0 0 6px!important;font-weight:600!important;color:var(--ink);}

/* --- Buttons ------------------------------------------------------------- */
/* Buttons: bigger target, the system radius, and a disabled state that looks
 * deliberately unavailable rather than like a washed-out enabled one. */
.apm-btn{font-family:var(--ui);font-size:var(--acxpa-ds-text-small);font-weight:600;cursor:pointer;border-radius:var(--acxpa-ds-radius-md);padding:11px 20px;border:1.5px solid var(--ink);background:var(--ink);color:var(--acxpa-ds-text-on-dark);transition:background .12s,border-color .12s,box-shadow .12s,transform .08s;}
.apm-btn:active{transform:translateY(1px);}
.apm-btn[disabled]{background:var(--acxpa-ds-stone);border-color:var(--acxpa-ds-stone);color:var(--acxpa-ds-warm-slate);cursor:not-allowed;box-shadow:none;}
.apm-btn[disabled]:hover{background:var(--acxpa-ds-stone);}
/* A link wearing the button class still inherits the theme's link underline. */
a.apm-btn,a.apm-btn:hover,a.apm-btn:focus{display:inline-block;text-decoration:none!important;}
a.apm-btn.apm-ghost{color:var(--ink);}
.apm-btn:hover{background:var(--acxpa-ds-teal-900);}
.apm-btn:disabled{opacity:.45;cursor:not-allowed;}
.apm-ghost{background:transparent;color:var(--ink);}
.apm-ghost:hover{background:var(--paper2);}
.apm-gold{background:var(--gold);border-color:var(--gold);color:var(--acxpa-ds-ink);box-shadow:var(--acxpa-ds-shadow-sm);}
.apm-gold:hover{background:var(--acxpa-ds-gold-mid);border-color:var(--acxpa-ds-gold-mid);color:var(--acxpa-ds-ink);}
.apm-gold:hover{background:var(--goldd);}
.apm-danger{background:transparent;color:var(--alert);border-color:var(--alert);}
.apm-danger:hover{background:var(--acxpa-ds-error-tint);}
.apm-btn-sm{font-size:var(--acxpa-ds-text-caption);padding:6px 10px;}

/* --- Utility ------------------------------------------------------------- */
.apm-hidden{display:none!important;}
.apm-empty{color:var(--inks);font-size:var(--acxpa-ds-text-small);line-height:1.55;padding:26px 22px;text-align:center;border:1px dashed var(--line);border-radius:4px;background:var(--paper2);}
.apm-empty strong{display:block;color:var(--ink);font-size:var(--acxpa-ds-text-small);margin-bottom:5px;}
.apm-chip{font-weight:600;padding:1px 8px;border-radius:999px;font-size:var(--acxpa-ds-text-caption);white-space:nowrap;display:inline-block;}
.apm-chip.q{background:var(--acxpa-ds-teal-100);color:var(--ink);}
.apm-chip.p{background:var(--acxpa-ds-gold-tint);color:var(--goldd);}
.apm-sumbar{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-family:var(--mono);font-size:var(--acxpa-ds-text-eyebrow);padding:8px 10px;border-radius:3px;border:1px dashed var(--line);}
.apm-sumbar.ok{border-color:var(--zone);background:var(--zonet);color:var(--acxpa-ds-success-deep);}
.apm-sumbar.bad{border-color:var(--alert);background:var(--acxpa-ds-error-tint);color:var(--alert);}
.apm-formerr{background:var(--alertt);border:1px solid var(--alert);color:var(--acxpa-ds-error-deep);border-radius:5px;padding:10px 13px;font-size:var(--acxpa-ds-text-eyebrow);line-height:1.5;margin:14px 0 0;}
.apm-formerr code{font-family:var(--mono);font-size:var(--acxpa-ds-text-caption);background:var(--acxpa-ds-error-tint);padding:1px 5px;border-radius:3px;}

/* --- Info tooltip -------------------------------------------------------- */
.apm-info{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--inks);color:var(--inks);font-size:var(--acxpa-ds-text-caption);font-weight:700;line-height:1;cursor:help;margin-left:5px;vertical-align:middle;font-family:inherit;background:none;}
.apm-info:hover,.apm-info:focus{border-color:var(--gold);color:var(--goldd);outline:none;}
.apm-tipbox{position:fixed;z-index:9999;max-width:280px;background:var(--ink);color:var(--acxpa-ds-text-on-dark);font-family:inherit;font-size:var(--acxpa-ds-text-caption);line-height:1.5;padding:9px 11px;border-radius:5px;box-shadow:var(--acxpa-ds-shadow-lg);opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none;}
.apm-tipbox.show{opacity:1;visibility:visible;}
.apm-tipbox::after{content:"";position:absolute;width:9px;height:9px;background:var(--ink);transform:rotate(45deg);}
.apm-tipbox[data-pos=top]::after{bottom:-4px;left:var(--ax,16px);}
.apm-tipbox[data-pos=bottom]::after{top:-4px;left:var(--ax,16px);}

/* --- Loader + toast ------------------------------------------------------ */
.apm-loader{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:var(--acxpa-ds-teal-900);opacity:.72;backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);}
.apm-loader img{width:84px;height:auto;display:block;}
.apm-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--acxpa-ds-text-on-dark);padding:10px 18px;border-radius:4px;font-size:var(--acxpa-ds-text-eyebrow);z-index:9999;opacity:0;transition:opacity .2s;pointer-events:none;}
.apm-toast.show{opacity:1;}
.apm-toast.bad{background:var(--alert);}


/* ═══════════════════════════════════════════════════════════════════════════
 * THE APP SHELL — shared by every APM tool page that opts into it
 *
 * Lifted out of apm-scorecard.css when the roles page needed the same frame.
 * It is scoped to .apm-app throughout, so a page that does not carry that class
 * — the entry, results and demo pages, for now — is untouched by every rule
 * below. That is also the migration path: a page joins the shell by adding one
 * class and a rail, not by having its stylesheet rewritten.
 *
 * WHY THE SHELL EXISTS AT ALL. Four full-width sections stacked down one page
 * forced colour to say where you are AND what you are looking at AND whose
 * measure this is, which is why five rounds of palette work all failed. A rail
 * that carries the steps takes the first job away, a solid header band over a
 * white body takes the second, and colour is left meaning exactly one thing.
 *
 * COLOUR RULES. Not one brand hex here (R-A1); no var() fallbacks (R-A3); no
 * hand-written type size (R-C5) — --acxpa-ds-text-caption is the smallest step
 * that exists. Status tokens appear only where something is actually right or
 * wrong (R-B17).
 * ═════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
 * THE APP SHELL
 * ═════════════════════════════════════════════════════════════════════════ */

.acxpa-apm-shell.apm-app{
	--apm-railw:264px;
	--apm-prevw:372px;
	--apm-top:0px;              /* set by the script to the site header's height */

	max-width:none;
	width:var(--apm-vw,100vw);
	margin-left:calc(50% - (var(--apm-vw,100vw) / 2));
	margin-right:calc(50% - (var(--apm-vw,100vw) / 2));
	padding:0;
	display:grid;
	grid-template-columns:var(--apm-railw) minmax(0,1fr);
	align-items:start;
	background:var(--acxpa-ds-sand);
	color:var(--acxpa-ds-ink);
}

/* ─── rail ──────────────────────────────────────────────────────────────── */

.apm-rail{
	position:sticky;top:var(--apm-top);
	height:calc(100vh - var(--apm-top));
	min-height:640px;
	overflow-y:auto;overflow-x:hidden;
	/* INK, NOT TEAL. Justin: "the sidebar section on all pages — not sure having
	 * it the same colour background as the main site menu is a good idea."
	 *
	 * He is right, and the note at the top of apm-scorecard.css explains how it
	 * happened: "Teal is the app chrome — rail, brand, pickers — at full
	 * strength, where it reads as ACXPA rather than as wallpaper." That was
	 * decided looking at the tool on its own. On the live site the rail sits
	 * directly under a teal site header, so the two merge into one dark block:
	 * the rail stops reading as the tool's own chrome, and its job — saying
	 * where you are INSIDE the tool — is exactly what it loses.
	 *
	 * Ink is the system's own utility colour and is already used for the basics
	 * card band, so this is not a new hue. It separates the workspace from the
	 * website without arguing with it, and the brand mark at the top of the rail
	 * still carries the teal. */
	/* THE RAIL'S OWN SURFACES, NAMED ONCE (R-A1).
	 *
	 * The rail needs a raised panel, a sunken field and two hairlines on top of
	 * ink. None of those is a brand colour — they are the ink and the white the
	 * token file already defines, at a stated strength — so they are mixed from
	 * those tokens rather than written as literals. Writing them out long-hand put
	 * seven hard-coded colours into this file, which is the exact thing R-A1
	 * exists to stop: the next person adjusting the rail would have had no name
	 * to change and would have picked a slightly different black.
	 *
	 * Declared on .apm-rail, so nothing outside the rail inherits them. */
	--apm-rail-edge:color-mix(in srgb, var(--acxpa-ds-ink) 60%, transparent);
	--apm-rail-raised:color-mix(in srgb, var(--acxpa-ds-white) 6%, transparent);
	--apm-rail-hover:color-mix(in srgb, var(--acxpa-ds-white) 7%, transparent);
	--apm-rail-line:color-mix(in srgb, var(--acxpa-ds-white) 12%, transparent);
	--apm-rail-line-strong:color-mix(in srgb, var(--acxpa-ds-white) 22%, transparent);
	--apm-rail-sunken:color-mix(in srgb, var(--acxpa-ds-ink) 55%, transparent);

	background:var(--acxpa-ds-ink);
	color:var(--acxpa-ds-text-on-dark);
	border-right:1px solid var(--apm-rail-edge);
	display:flex;flex-direction:column;
	padding:var(--acxpa-ds-space-md) var(--acxpa-ds-space-sm) var(--acxpa-ds-space-md);
	gap:var(--acxpa-ds-space-sm);
}

.apm-rail-brand{display:flex;align-items:center;gap:var(--acxpa-ds-space-sm);padding:0 var(--acxpa-ds-space-xs) var(--acxpa-ds-space-xs);}
.apm-rail-mk{
	width:34px;height:34px;flex:none;border-radius:var(--acxpa-ds-radius-md);
	background:var(--acxpa-ds-gold);color:var(--acxpa-ds-teal-900);
	display:grid;place-items:center;font-weight:700;font-size:var(--acxpa-ds-text-small);
}
.apm-rail-id{min-width:0;}
.apm-rail-id b{display:block;font-size:var(--acxpa-ds-text-small);font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--acxpa-ds-text-on-dark);}
.apm-rail-id span{display:block;font-size:var(--acxpa-ds-text-caption);color:var(--acxpa-ds-text-muted-on-dark);margin-top:2px;}

/* the two pickers — what is being edited */
/* THE PANELS INSIDE THE RAIL HAD TO MOVE TOO.
 *
 * Justin: "you haven't changed the colour of the sidebar?" — and he was
 * looking at a build that HAD the change. The rail's backdrop went to ink in
 * 4.18, but these panels, which are the largest blocks in it, stayed teal-800
 * on a teal-700 border. So the rail still read as teal: I had repainted the
 * wall behind the furniture.
 *
 * A lift off the ink rather than a colour of their own, so the rail is one
 * surface with raised panels on it and nothing in it competes with the site
 * header above. */
.apm-railsel{
	background:var(--apm-rail-raised);
	border:1px solid var(--apm-rail-line);
	border-radius:var(--acxpa-ds-radius-md);
	padding:var(--acxpa-ds-space-sm);
}
.apm-railsel-lab{
	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-text-muted-on-dark);margin-bottom:var(--acxpa-ds-space-2xs);
}
.apm-app .apm-railsel select{
	width:100%;
	background:var(--apm-rail-sunken)!important;
	color:var(--acxpa-ds-text-on-dark)!important;
	border:1px solid var(--apm-rail-line-strong)!important;
	border-radius:var(--acxpa-ds-radius-sm)!important;
}
.apm-app .apm-railsel select:focus{outline:2px solid var(--acxpa-ds-gold);border-color:var(--acxpa-ds-gold)!important;}
.apm-railsel-note{
	font-size:var(--acxpa-ds-text-caption);line-height:1.5;
	color:var(--acxpa-ds-text-muted-on-dark);margin:var(--acxpa-ds-space-xs) 0 0;
}
.apm-railsel-note strong{color:var(--acxpa-ds-text-on-dark);font-weight:600;}
/* The demo account is our own sample, not a customer's data, and it is worth
 * knowing that at a glance before typing into it. */
.apm-app select.apm-on-demo{border-color:var(--acxpa-ds-gold)!important;}

.apm-railsel-acts{display:flex;gap:var(--acxpa-ds-space-2xs);margin-top:var(--acxpa-ds-space-xs);}
.apm-railbtn{
	flex:1;font-family:var(--acxpa-ds-font);font-size:var(--acxpa-ds-text-caption);font-weight:600;
	padding:var(--acxpa-ds-space-xs) var(--acxpa-ds-space-2xs);cursor:pointer;
	border-radius:var(--acxpa-ds-radius-sm);
	border:1px solid var(--acxpa-ds-gold);background:var(--acxpa-ds-gold);color:var(--acxpa-ds-teal-900);
}
.apm-railbtn:hover{background:var(--acxpa-ds-gold-mid);border-color:var(--acxpa-ds-gold-mid);}
.apm-railbtn--quiet{background:transparent;border-color:var(--acxpa-ds-teal-600);color:var(--acxpa-ds-text-muted-on-dark);}
.apm-railbtn--quiet:hover{background:var(--acxpa-ds-teal-700);border-color:var(--acxpa-ds-teal-400);color:var(--acxpa-ds-text-on-dark);}
.apm-railbtn[disabled]{opacity:.42;cursor:not-allowed;}

.apm-rail-h{
	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:var(--acxpa-ds-space-xs) 0 0;padding:0 var(--acxpa-ds-space-sm);
}

/* ─── the four steps ────────────────────────────────────────────────────── */

.apm-steps{display:flex;flex-direction:column;gap:2px;}
.apm-step{
	display:flex;gap:var(--acxpa-ds-space-sm);align-items:flex-start;width:100%;text-align:left;
	padding:var(--acxpa-ds-space-sm);cursor:pointer;
	background:transparent;border:0;border-left:3px solid transparent;
	border-radius:var(--acxpa-ds-radius-md);
	color:var(--acxpa-ds-text-on-dark);font-family:var(--acxpa-ds-font);
	transition:background .12s;
}
.apm-step:hover{background:var(--apm-rail-hover);}
.apm-step.on{background:var(--acxpa-ds-white);color:var(--acxpa-ds-ink);border-left-color:var(--acxpa-ds-gold);border-radius:var(--acxpa-ds-radius-md);}
.apm-step-n{
	flex:none;width:24px;height:24px;border-radius:var(--acxpa-ds-radius-pill);
	display:grid;place-items:center;margin-top:1px;
	font-size:var(--acxpa-ds-text-caption);font-weight:600;
	border:1.5px solid var(--apm-rail-line-strong);color:var(--acxpa-ds-text-muted-on-dark);
}
.apm-step.on .apm-step-n{background:var(--acxpa-ds-teal-700);border-color:var(--acxpa-ds-teal-700);color:var(--acxpa-ds-text-on-dark);}
/* Done is a state of the work, so it takes the status token (R-B17). */
.apm-step-n.done{background:var(--acxpa-ds-success);border-color:var(--acxpa-ds-success);color:var(--acxpa-ds-text-on-dark);}
.apm-step.on .apm-step-n.done{background:var(--acxpa-ds-success);border-color:var(--acxpa-ds-success);}
.apm-step-t{min-width:0;}
.apm-step-t b{display:block;font-size:var(--acxpa-ds-text-small);font-weight:600;line-height:1.25;}
.apm-step-t i{display:block;font-style:normal;font-size:var(--acxpa-ds-text-caption);line-height:1.4;margin-top:3px;color:var(--acxpa-ds-teal-200);}
.apm-step.on .apm-step-t i{color:var(--acxpa-ds-warm-slate);}
.apm-step-t i.todo{color:var(--acxpa-ds-gold);font-weight:600;}
.apm-step.on .apm-step-t i.todo{color:var(--acxpa-ds-gold-deep);}
.apm-step-t i.unsaved{color:var(--acxpa-ds-gold);font-weight:600;}
.apm-step.on .apm-step-t i.unsaved{color:var(--acxpa-ds-gold-deep);}

/* ─── rail footer: what this scorecard is ───────────────────────────────── */

.apm-railfoot{
	margin-top:auto;
	background:var(--acxpa-ds-teal-800);border:1px solid var(--acxpa-ds-teal-700);
	border-radius:var(--acxpa-ds-radius-md);padding:var(--acxpa-ds-space-sm);
}
.apm-railfoot>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-xs);
}
.apm-scmeta{display:flex;flex-wrap:wrap;gap:var(--acxpa-ds-space-2xs);}
.apm-vchip{
	font-size:var(--acxpa-ds-text-caption);line-height:1.35;
	background:var(--acxpa-ds-teal-900);border:1px solid var(--acxpa-ds-teal-600);
	color:var(--acxpa-ds-text-on-dark);
	border-radius:var(--acxpa-ds-radius-sm);padding:3px 7px;
}
.apm-vchip.lic{border-color:var(--acxpa-ds-gold);color:var(--acxpa-ds-gold);}
.apm-vchip.unlic{border-color:var(--acxpa-ds-teal-500);color:var(--acxpa-ds-teal-200);}
.apm-vchip.frozen{border-color:var(--acxpa-ds-teal-300);color:var(--acxpa-ds-teal-100);}

.apm-rail-links{display:flex;flex-wrap:wrap;gap:var(--acxpa-ds-space-sm);padding:var(--acxpa-ds-space-xs) var(--acxpa-ds-space-sm) 0;}
.apm-rail-links a{
	font-size:var(--acxpa-ds-text-caption);color:var(--acxpa-ds-teal-200);
	text-decoration:none;border-bottom:1px solid var(--acxpa-ds-teal-600);
}
.apm-rail-links a:hover{color:var(--acxpa-ds-gold);border-bottom-color:var(--acxpa-ds-gold);}

/* Delete confirmation, inside the rail. */
.apm-confirm{
	margin-top:var(--acxpa-ds-space-xs);
	background:var(--acxpa-ds-teal-900);border:1px solid var(--acxpa-ds-error);
	border-radius:var(--acxpa-ds-radius-sm);padding:var(--acxpa-ds-space-xs);
	font-size:var(--acxpa-ds-text-caption);line-height:1.5;color:var(--acxpa-ds-text-on-dark);
}
.apm-confirm .apm-btn{margin-top:var(--acxpa-ds-space-xs);}

/* ═══════════════════════════════════════════════════════════════════════════
 * THE CANVAS
 * ═════════════════════════════════════════════════════════════════════════ */

.apm-canvas{min-width:0;display:flex;flex-direction:column;}

.apm-topbar{
	position:sticky;top:var(--apm-top);z-index:6;
	background:var(--acxpa-ds-sand);border-bottom:1px solid var(--acxpa-ds-stone);
	padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-xl);
	display:flex;align-items:center;gap:var(--acxpa-ds-space-sm);
}
.apm-crumb{margin:0;font-size:var(--acxpa-ds-text-caption);color:var(--acxpa-ds-warm-slate);}
.apm-crumb b{color:var(--acxpa-ds-ink);font-weight:600;}
.apm-crumb span{opacity:.6;}
.apm-topspace{flex:1;}
.apm-topbtn{
	font-family:var(--acxpa-ds-font);font-size:var(--acxpa-ds-text-caption);font-weight:600;
	color:var(--acxpa-ds-teal-700);background:var(--acxpa-ds-white);
	border:1px solid var(--acxpa-ds-stone);border-radius:var(--acxpa-ds-radius-md);
	padding:var(--acxpa-ds-space-xs) var(--acxpa-ds-space-sm);cursor:pointer;
}
.apm-topbtn:hover{border-color:var(--acxpa-ds-teal-400);}
.apm-app .apm-badge{
	font-family:var(--acxpa-ds-font);font-size:var(--acxpa-ds-text-caption);font-weight:600;
	letter-spacing:0;text-transform:none;
	background:var(--acxpa-ds-gold-tint);border:1px solid var(--acxpa-ds-gold);
	color:var(--acxpa-ds-gold-deep);border-radius:var(--acxpa-ds-radius-pill);
	padding:var(--acxpa-ds-space-2xs) var(--acxpa-ds-space-sm);
}

.apm-work{
	display:grid;grid-template-columns:minmax(0,1fr) var(--apm-prevw);
	gap:var(--acxpa-ds-space-lg);
	padding:var(--acxpa-ds-space-lg) var(--acxpa-ds-space-xl) var(--acxpa-ds-space-xl);
	align-items:start;flex:1;
}
.apm-work.no-preview,.apm-work.solo{grid-template-columns:minmax(0,1fr);}
.apm-work.no-preview .apm-preview{display:none;}
.apm-pane{min-width:0;}

/* The step's own title block. */
.apm-pane-head{margin:0 0 var(--acxpa-ds-space-md);display:flex;align-items:flex-start;gap:var(--acxpa-ds-space-sm);flex-wrap:wrap;}
.apm-pane-head h2{
	margin:0;font-size:var(--acxpa-ds-text-h2);font-weight:600;
	letter-spacing:-.025em;line-height:1.12;color:var(--acxpa-ds-ink);flex:1 1 auto;
}
.apm-pane-head p{
	margin:var(--acxpa-ds-space-xs) 0 0;flex:1 1 100%;
	font-size:var(--acxpa-ds-text-small);line-height:1.55;color:var(--acxpa-ds-warm-slate);
}
.apm-sec-state{
	font-size:var(--acxpa-ds-text-caption);font-weight:600;
	border-radius:var(--acxpa-ds-radius-pill);padding:var(--acxpa-ds-space-2xs) var(--acxpa-ds-space-sm);
	align-self:center;
}
.apm-sec-state.dirty{background:var(--acxpa-ds-gold-tint);border:1px solid var(--acxpa-ds-gold);color:var(--acxpa-ds-gold-deep);}

/* ─── fields ──────────────────────────────────────────────────────────────
 * A FIELD IS AS WIDE AS THE COLUMN IT IS IN. The shell's base rule sets a
 * height, a border and a padding but never a width, so every text input fell
 * back to the browser's default ~20-character size and cut off the very first
 * thing anybody types into this page — the scorecard's own name. The column is
 * already the right width; the field just has to fill it.
 * ------------------------------------------------------------------------ */
.apm-app .apm-f input[type=text],
.apm-app .apm-f select,
.apm-app .apm-blockname input,
.apm-app .apm-struct-add input,
.apm-app .apm-newgrid input,
.apm-app .apm-newgrid select{width:100%;}
.apm-app .apm-blockname input{max-width:460px;}

/* A DROP-DOWN HAS TO LOOK LIKE ONE. The theme strips the native control's
 * appearance and supplies its own arrow through a background image, which the
 * shell's `background:` shorthand then wiped out — leaving a select that reads
 * as a plain text box until you click it. Handing the control back to the
 * browser restores the arrow without writing a colour for it (R-A1: a chevron
 * drawn as a data-URI would need a hex). */
.apm-app select{
	-webkit-appearance:menulist!important;
	appearance:menulist!important;
	background-image:none!important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CARDS AND THEIR COLOURED BANDS
 * ═════════════════════════════════════════════════════════════════════════ */

.apm-card{
	background:var(--acxpa-ds-white);
	border:1px solid var(--acxpa-ds-stone);
	border-radius:var(--acxpa-ds-radius-lg);
	box-shadow:var(--acxpa-ds-shadow-sm);
	overflow:hidden;
	margin:0 0 var(--acxpa-ds-space-md);
	/* Anything scrolled to lands BELOW the sticky top bar. Without this a
	 * scrollIntoView puts the card's header underneath the bar, so the panel
	 * that just opened appears to start halfway down itself. */
	scroll-margin-top:calc(var(--apm-top) + 76px);
}
.apm-card-b{padding:var(--acxpa-ds-space-md) var(--acxpa-ds-space-lg);}
.apm-card-b--tight{padding-bottom:var(--acxpa-ds-space-sm);}

.apm-band{
	display:flex;align-items:center;gap:var(--acxpa-ds-space-md);
	padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-lg);
	color:var(--acxpa-ds-text-on-dark);
}
.apm-band-ic{
	flex:none;width:32px;height:32px;border-radius:var(--acxpa-ds-radius-sm);
	display:grid;place-items:center;font-weight:700;font-size:var(--acxpa-ds-text-eyebrow);
	background:var(--acxpa-ds-white);color:var(--acxpa-ds-ink);
}
.apm-band-t{min-width:0;flex:1;}
.apm-band-t h3{margin:0;font-size:var(--acxpa-ds-text-h4);font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--acxpa-ds-text-on-dark);}
.apm-band-t p{margin:3px 0 0;font-size:var(--acxpa-ds-text-caption);line-height:1.45;color:var(--acxpa-ds-text-muted-on-dark);}
.apm-band-pct{flex:none;text-align:right;}
.apm-band-pct b{display:block;font-size:var(--acxpa-ds-text-h4);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--acxpa-ds-text-on-dark);}
.apm-band-pct span{display:block;font-size:var(--acxpa-ds-text-caption);letter-spacing:var(--acxpa-ds-tracking-eyebrow);text-transform:uppercase;margin-top:3px;color:var(--acxpa-ds-text-muted-on-dark);}

/* FOUR IDENTITIES, ALL ON WHITE BODIES.
 * A band is dark enough to carry solid white type; the body it sits on stays
 * white so the rows inside are never fighting a tint. */
.apm-band--ink   {background:var(--acxpa-ds-ink);}
.apm-band--ink   .apm-band-ic{background:var(--acxpa-ds-slate);color:var(--acxpa-ds-text-on-dark);}
.apm-band--acxpa {background:var(--acxpa-ds-teal-700);}
.apm-band--acxpa .apm-band-ic{background:var(--acxpa-ds-teal-600);color:var(--acxpa-ds-text-on-dark);}
.apm-band--own   {background:var(--acxpa-ds-harbour);}
.apm-band--own   .apm-band-ic{background:var(--acxpa-ds-harbour-deep);color:var(--acxpa-ds-text-on-dark);}
.apm-band--prod  {background:var(--acxpa-ds-gold-deep);}
.apm-band--prod  .apm-band-ic{background:var(--acxpa-ds-gold);color:var(--acxpa-ds-ink);}
.apm-band--comp  {background:var(--acxpa-ds-clay-deep);}
.apm-band--comp  .apm-band-ic{background:var(--acxpa-ds-clay);color:var(--acxpa-ds-text-on-dark);}

/* The column header over a list of rows. It is what lets the weight stop
 * carrying a repeated label on every single row. */
.apm-colhead{
	display:grid;grid-template-columns:40px minmax(0,1fr) 196px;gap:var(--acxpa-ds-space-md);
	padding:var(--acxpa-ds-space-xs) var(--acxpa-ds-space-lg);
	background:var(--acxpa-ds-sand);border-bottom:1px solid var(--acxpa-ds-stone);
	font-size:var(--acxpa-ds-text-caption);font-weight:600;
	letter-spacing:var(--acxpa-ds-tracking-eyebrow);text-transform:uppercase;
	color:var(--acxpa-ds-warm-slate);
}
.apm-colhead .r{text-align:center;}

/* ─── narrower ────────────────────────────────────────────────────────────
 * THE RAIL BECOMES A STRIP, NOT A SCREEN. Simply unpinning it put a full-height
 * column of navigation above the thing being edited, so the first screen on a
 * laptop held sideways was all chrome. Here it lays out across the top in one
 * band. Page-specific responses (which side panel to drop first) stay in the
 * page's own stylesheet.
 * ---------------------------------------------------------------------- */
@media (max-width:1080px){
	.acxpa-apm-shell.apm-app{grid-template-columns:minmax(0,1fr);}
	.apm-rail{
		position:static;height:auto;min-height:0;overflow:visible;
		display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
		align-items:start;gap:var(--acxpa-ds-space-sm);
		padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-md);
	}
	.apm-rail-brand{grid-column:1/-1;padding-bottom:0;}
	.apm-rail-h{display:none;}
	.apm-steps{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:var(--acxpa-ds-space-2xs);}
	.apm-step{flex:1 1 190px;padding:var(--acxpa-ds-space-xs) var(--acxpa-ds-space-sm);}
	.apm-railfoot{grid-column:1/-1;margin-top:0;}
	.apm-rail-links{grid-column:1/-1;padding-top:0;}
	.apm-work,.apm-topbar{padding-left:var(--acxpa-ds-space-md);padding-right:var(--acxpa-ds-space-md);}
	.apm-sec-foot{padding-left:var(--acxpa-ds-space-md);padding-right:var(--acxpa-ds-space-md);}
}
@media (max-width:720px){
	.apm-colhead{display:none;}
	.apm-band{flex-wrap:wrap;}
}


/* ─── shared form primitives ──────────────────────────────────────────────
 * These sat in apm-scorecard.css until the roles page needed them and got
 * none of them — which is why "Add a centre" and its field rendered flush
 * against the card edge with no padding at all. A primitive used by two pages
 * belongs here; one used by one page does not.
 * ---------------------------------------------------------------------- */
/* The running total under a block. */
.apm-blocksum{
	display:flex;align-items:center;gap:var(--acxpa-ds-space-sm);flex-wrap:wrap;
	padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-lg);
	background:var(--acxpa-ds-sand);border-top:1px solid var(--acxpa-ds-stone);
	font-size:var(--acxpa-ds-text-small);color:var(--acxpa-ds-ink);line-height:1.5;
}
.apm-blocksum>div{flex:1 1 auto;min-width:0;}
.apm-blocksum b{font-weight:600;}
.apm-blocksum .acts{display:flex;align-items:center;gap:var(--acxpa-ds-space-sm);flex:none;}
/* Right and wrong are both states of the work, which is exactly what a status
 * token is for (R-B17) — and the right one has to be said out loud, not left
 * as the absence of the wrong one. */
.apm-blocksum.ok{background:var(--acxpa-ds-success-tint);border-top-color:var(--acxpa-ds-success);}
.apm-blocksum.ok b.done{color:var(--acxpa-ds-success-deep);white-space:nowrap;}
.apm-blocksum.bad{background:var(--acxpa-ds-error-tint);border-top-color:var(--acxpa-ds-error);}
.apm-blocksum.bad b{color:var(--acxpa-ds-error-deep);}

.apm-addrow{padding:var(--acxpa-ds-space-md) var(--acxpa-ds-space-lg);border-top:1px solid var(--acxpa-ds-stone);}
.apm-struct-add{display:flex;gap:var(--acxpa-ds-space-xs);}
.apm-struct-add input{flex:1;min-width:0;}

.apm-guide{
	background:var(--acxpa-ds-teal-50);border:1px solid var(--acxpa-ds-teal-100);
	border-left:3px solid var(--acxpa-ds-teal-600);
	border-radius:var(--acxpa-ds-radius-md);
	padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-md);
	margin:0 0 var(--acxpa-ds-space-md);
}
.apm-guide p{margin:0 0 var(--acxpa-ds-space-xs);font-size:var(--acxpa-ds-text-small);line-height:1.6;color:var(--acxpa-ds-ink);}
.apm-guide p:last-child{margin-bottom:0;}
.apm-guide--loose{background:transparent;border:0;border-left:3px solid var(--acxpa-ds-stone);border-radius:0;padding:0 0 0 var(--acxpa-ds-space-md);}
.apm-guide .apm-rule{border-left:3px solid var(--acxpa-ds-gold);padding-left:var(--acxpa-ds-space-sm);}

.apm-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--acxpa-ds-space-md);}
.apm-f{min-width:0;}
.apm-fhelp{font-size:var(--acxpa-ds-text-caption);line-height:1.5;color:var(--acxpa-ds-warm-slate);margin:var(--acxpa-ds-space-2xs) 0 0;}

/* A rail field whose value is STATED rather than chosen. A dropdown holding a
 * single option is a question with one answer; this is the answer on its own,
 * in the place the dropdown would have been, so the rail reads the same either
 * way. Used by the productivity page for the scorecard when there is only one. */
.apm-railfix{
	margin:0;font-size:var(--acxpa-ds-text-small);font-weight:600;line-height:1.3;
	color:var(--acxpa-ds-text-on-dark);
	word-break:break-word;
}