/**
 * Onassis & Reis Auctions — agent portal.
 *
 * Every rule is scoped under #ap-portal. Divi's own selectors top out around
 * .et_pb_text a (0,2,1); an ID selector beats all of them without a single
 * !important, which keeps this maintainable when Divi updates.
 */

/* =========================================================================
 * The palette, declared once for every surface.
 *
 * It used to be repeated inside #ap-portal, #ap-room and #ap-popup — which
 * meant #ap-customer, the bidder's own portal, matched none of those selectors
 * and inherited no variables at all. Every var() in it resolved to nothing, so
 * its borders were invisible and its greys were whatever the theme happened to
 * set. Declaring the palette on the class every surface already carries fixes
 * that and stops the next surface repeating it.
 * ====================================================================== */

.ap-portal,
#ap-portal,
#ap-room,
#ap-room-shell,
#ap-popup,
#ap-customer {
	/* Onassis & Reis: deep navy and the champagne from the mark itself.
	   Navy carries the furniture — bars, menus, buttons — and the working
	   area stays light, because tables and long forms are read for an hour
	   at a time and a dark ground makes that harder, not smarter. */
	--ap-navy: #0f2137;
	--ap-navy-deep: #0a1626;
	--ap-navy-soft: #1c3350;
	--ap-champagne: #cab6a1;
	--ap-champagne-soft: #f4efe8;

	--ap-ink: #0f2137;
	--ap-paper: #eef1f5;
	--ap-card: #fff;
	--ap-line: #d7dde4;
	--ap-slate: #45536a;
	/* Darkened from the old #8a929e, which was 3.2:1 on white — below the 4.5
	   a label at this size needs. This clears 4.5 on BOTH grounds it appears
	   on: 5.2 on white, 4.6 on the paper background. Checking only against
	   white is how a label ends up unreadable on exactly the surface it is
	   used most. */
	--ap-mute: #626e83;
	/* The champagne itself is 1.9:1 on white — fine as a plate behind white
	   text, unreadable as text on one. So accents get a darker relative, and
	   the champagne proper is only ever used on navy. */
	--ap-brass: #7a6142;
	--ap-brassL: #cab6a1;
	--ap-amber: #f4efe8;
	--ap-oxblood: #7b2d3b;
	--ap-blush: #fbeff1;
	--ap-green: #2f6b4f;
	--ap-mint: #edf5f0;
	--ap-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* The base look, for the surfaces that never had one of their own. */
#ap-customer,
#ap-room-shell {
	background: var(--ap-paper);
	color: var(--ap-ink);
	font-family: "Helvetica Neue", Inter, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	padding: 20px;
	-webkit-font-smoothing: antialiased;
}

#ap-room-shell #ap-room { padding: 0; background: none; }

#ap-portal {

	background: var(--ap-paper);
	color: var(--ap-ink);
	font-family: "Helvetica Neue", Inter, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	padding: 20px;
	-webkit-font-smoothing: antialiased;
}

#ap-portal * { box-sizing: border-box; }
#ap-portal p { margin: 0 0 10px; padding: 0; }
#ap-portal h2, #ap-portal h3 { margin: 0; padding: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
#ap-portal a { color: var(--ap-slate); text-decoration: none; }
#ap-portal a:hover { text-decoration: underline; }

/* Divi sets a global button style with padding, border-radius and a
   transition. Reset it here rather than fighting it per-component. */
#ap-portal button {
	font: inherit;
	margin: 0;
	border-radius: 0;
	cursor: pointer;
	background: none;
	border: none;
	color: inherit;
	text-align: left;
	line-height: 1.4;
}

#ap-portal button:hover { background: none; }
#ap-portal button::after { display: none !important; } /* Divi injects arrow glyphs via ::after */

#ap-portal .ap-input {
	width: 100%;
	padding: 9px 11px;
	font-family: var(--ap-mono);
	font-size: 14px;
	color: var(--ap-ink);
	background: var(--ap-card);
	border: 1px solid var(--ap-line);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

#ap-portal select.ap-input { padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--ap-slate) 50%), linear-gradient(135deg, var(--ap-slate) 50%, transparent 50%); background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
#ap-portal textarea.ap-input { font-family: inherit; resize: vertical; }
#ap-portal .ap-input:focus { outline: none; border-color: var(--ap-ink); box-shadow: inset 0 0 0 1px var(--ap-ink); }
#ap-portal button:focus-visible, #ap-portal .ap-input:focus-visible { outline: 2px solid var(--ap-ink); outline-offset: 2px; }
#ap-portal .has-error .ap-input { border-color: var(--ap-oxblood); }

/* ── Chrome ──────────────────────────────────────────────────────────── */

#ap-portal .ap-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--ap-navy); border: 1px solid var(--ap-navy); padding: 12px 16px; margin-bottom: 16px; }
#ap-portal .ap-brand-sm { font-weight: 800; letter-spacing: -0.03em; font-size: 17px; }
#ap-portal .ap-brand-sm { font-weight: 800; letter-spacing: -0.03em; font-size: 17px; color: #fff; display: inline-flex; align-items: center; }
#ap-portal .ap-brand-sm span { font-family: var(--ap-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ap-champagne); margin-left: 9px; font-weight: 400; }
#ap-portal .ap-bar-right { font-family: var(--ap-mono); font-size: 11.5px; color: #9fb0c4; }
#ap-portal .ap-bar-right a { color: var(--ap-champagne); }
#ap-portal .ap-bar-right a:hover { color: #fff; }
#ap-portal .ap-flash { background: var(--ap-mint); border-left: 2px solid var(--ap-green); padding: 10px 13px; font-size: 13.5px; margin-bottom: 16px; }
#ap-portal .ap-loading { font-family: var(--ap-mono); font-size: 12px; color: var(--ap-mute); }
#ap-portal .ap-back { color: var(--ap-slate); font-size: 13px; padding: 0 0 12px; }
#ap-portal .ap-back:hover { text-decoration: underline; }

#ap-portal .ap-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
#ap-portal .ap-h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.025em; }
#ap-portal .ap-sub { font-family: var(--ap-mono); font-size: 12px; color: var(--ap-slate); margin: 6px 0 0; }
#ap-portal .ap-muted { color: var(--ap-mute); }
#ap-portal .ap-muted-sm { font-family: var(--ap-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ap-mute); font-weight: 400; }

#ap-portal .ap-btn { background: var(--ap-ink); color: var(--ap-card); border: 1px solid var(--ap-ink); padding: 9px 16px; font-size: 13px; transition: opacity 0.15s ease; text-align: center; }
#ap-portal .ap-btn:hover { opacity: 0.82; background: var(--ap-ink); }
#ap-portal .ap-btn--ghost { background: none; color: var(--ap-slate); border-color: var(--ap-line); }
#ap-portal .ap-btn--ghost:hover { background: none; }
#ap-portal .ap-btn[disabled] { opacity: 0.5; cursor: default; }
#ap-portal .ap-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

#ap-portal .ap-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0; }
#ap-portal .ap-chip { padding: 5px 10px; font-size: 11.5px; border: 1px solid var(--ap-line); color: var(--ap-slate); background: none; }
#ap-portal .ap-chip.is-on { background: var(--ap-ink); color: var(--ap-card); border-color: var(--ap-ink); }

/* ── Cards and rows ──────────────────────────────────────────────────── */

#ap-portal .ap-grid { display: grid; gap: 12px; }
#ap-portal .ap-card { background: var(--ap-card); border: 1px solid var(--ap-line); padding: 18px 20px 20px; margin-bottom: 14px; }
#ap-portal .ap-card--admin { border-color: var(--ap-brass); }
#ap-portal .ap-admin-head { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-brass); margin-bottom: 14px; }
#ap-portal .ap-card-title { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-slate); margin-bottom: 14px; }
#ap-portal .ap-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
#ap-portal .ap-card-head h3 { font-size: 15px; }
#ap-portal .ap-num { font-family: var(--ap-mono); font-size: 11px; color: var(--ap-mute); letter-spacing: 0.14em; }

#ap-portal .ap-row { display: block; width: 100%; background: var(--ap-card); border: 1px solid var(--ap-line); padding: 16px 18px; transition: border-color 0.15s ease; }
#ap-portal .ap-row:hover { border-color: var(--ap-ink); background: var(--ap-card); }
#ap-portal .ap-row-top { display: flex; justify-content: space-between; gap: 10px; }
#ap-portal .ap-ref { font-family: var(--ap-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ap-mute); }
#ap-portal .ap-row-title { font-size: 18px; font-weight: 700; margin: 6px 0 2px; }
#ap-portal .ap-row-meta { font-family: var(--ap-mono); font-size: 12.5px; color: var(--ap-slate); }
#ap-portal .ap-row-foot { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--ap-line); }

#ap-portal .ap-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; }
#ap-portal .ap-field { min-width: 0; }
#ap-portal .ap-label { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-mute); margin-bottom: 4px; }
#ap-portal .ap-value { font-family: var(--ap-mono); font-size: 14px; word-break: break-word; }
#ap-portal .ap-value.is-empty { color: var(--ap-mute); }

#ap-portal .ap-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
#ap-portal .ap-formrow { min-width: 0; margin-bottom: 14px; }
#ap-portal .ap-cols .ap-formrow { margin-bottom: 0; }
#ap-portal .ap-error { color: var(--ap-oxblood); font-size: 12px; margin: 5px 0 0; }
#ap-portal .ap-hint { color: var(--ap-mute); font-size: 12px; margin: 5px 0 0; }
#ap-portal .ap-warn { background: var(--ap-blush); border-left: 2px solid var(--ap-oxblood); padding: 10px 12px; font-size: 13px; margin-top: 12px; }
#ap-portal .ap-empty { background: var(--ap-card); border: 1px dashed var(--ap-line); padding: 34px 20px; text-align: center; }
#ap-portal .ap-empty p { color: var(--ap-slate); font-size: 14px; }

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

#ap-portal .ap-rail { margin-top: 12px; }
#ap-portal .ap-rail-bars { display: flex; gap: 3px; }
#ap-portal .ap-rail-bar { height: 3px; flex: 1; background: var(--ap-line); }
#ap-portal .ap-rail-label { font-family: var(--ap-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 7px; font-weight: 600; }
#ap-portal .ap-tone-ink .ap-rail-bar.is-on { background: var(--ap-ink); }
#ap-portal .ap-tone-ink .ap-rail-label { color: var(--ap-ink); }
#ap-portal .ap-tone-good .ap-rail-bar.is-on { background: var(--ap-brass); }
#ap-portal .ap-tone-good .ap-rail-label { color: var(--ap-brass); }
#ap-portal .ap-tone-bad .ap-rail-bar.is-on { background: var(--ap-oxblood); }
#ap-portal .ap-tone-bad .ap-rail-label { color: var(--ap-oxblood); }
#ap-portal .ap-tone-mute .ap-rail-bar.is-on { background: var(--ap-mute); }
#ap-portal .ap-tone-mute .ap-rail-label { color: var(--ap-mute); }

/* ── Document seal ───────────────────────────────────────────────────── */

#ap-portal .ap-seal { display: flex; align-items: center; gap: 3px; }
#ap-portal .ap-seal-bar { width: 18px; height: 5px; background: var(--ap-line); }
#ap-portal .ap-seal-count { font-family: var(--ap-mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 600; margin-left: 6px; }
#ap-portal .ap-seal.ap-tone-good .ap-seal-bar.is-on { background: var(--ap-green); }
#ap-portal .ap-seal.ap-tone-good .ap-seal-count { color: var(--ap-green); }
#ap-portal .ap-seal.ap-tone-warn .ap-seal-bar.is-on { background: var(--ap-brass); }
#ap-portal .ap-seal.ap-tone-warn .ap-seal-count { color: var(--ap-brass); }
#ap-portal .ap-seal.ap-tone-mute .ap-seal-count { color: var(--ap-mute); }

/* ── Document tracker ────────────────────────────────────────────────── */

#ap-portal .ap-docs { display: grid; gap: 10px; }
#ap-portal .ap-doc { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; border: 1px solid var(--ap-line); background: var(--ap-card); padding: 12px 14px; }
#ap-portal .ap-doc.is-done { border-color: var(--ap-green); background: var(--ap-mint); }
#ap-portal .ap-tick { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; border: 1px solid var(--ap-line); background: var(--ap-card); color: var(--ap-card); font-size: 12px; display: flex; align-items: center; justify-content: center; }
#ap-portal .ap-doc.is-done .ap-tick { background: var(--ap-green); border-color: var(--ap-green); }
#ap-portal .ap-tick[disabled] { cursor: default; }
#ap-portal .ap-doc-body { flex: 1; min-width: 150px; }
#ap-portal .ap-doc-body strong { display: block; font-size: 14px; }
#ap-portal .ap-doc-body span { display: block; font-size: 12px; color: var(--ap-slate); margin-top: 2px; }
#ap-portal .ap-doc-date { font-family: var(--ap-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ap-mute); text-align: right; min-width: 120px; }
#ap-portal .ap-doc.is-done .ap-doc-date { color: var(--ap-green); }
#ap-portal .ap-date { width: auto; padding: 4px 6px; font-size: 11px; }

/* ── Login ───────────────────────────────────────────────────────────── */

#ap-portal.ap-portal--login { padding: 40px 20px; }
#ap-portal .ap-login { max-width: 380px; margin: 0 auto; }
#ap-portal .ap-brand { font-weight: 800; font-size: 26px; letter-spacing: -0.03em; margin-bottom: 4px; }
#ap-portal .ap-brand span { display: block; font-family: var(--ap-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ap-mute); margin-top: 4px; font-weight: 400; }
#ap-portal #ap-login-form { background: var(--ap-card); border: 1px solid var(--ap-line); padding: 22px; margin-top: 24px; }
#ap-portal #ap-login-form label { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-mute); margin-bottom: 5px; }
#ap-portal #ap-login-form input[type="text"], #ap-portal #ap-login-form input[type="password"] { width: 100%; padding: 9px 11px; font-family: var(--ap-mono); font-size: 14px; border: 1px solid var(--ap-line); border-radius: 0; background: var(--ap-card); color: var(--ap-ink); }
#ap-portal #ap-login-form input[type="submit"] { background: var(--ap-ink); color: var(--ap-card); border: 1px solid var(--ap-ink); padding: 9px 16px; font-size: 13px; border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
#ap-portal #ap-login-form p { margin-bottom: 14px; }
#ap-portal .login-remember { font-size: 13px; }
#ap-portal .login-remember label { display: inline; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ap-slate); }
#ap-portal .ap-fineprint { font-size: 12px; color: var(--ap-mute); margin-top: 16px; }

/* ── Small screens ───────────────────────────────────────────────────── */

@media (max-width: 640px) {
	#ap-portal { padding: 14px; }
	#ap-portal .ap-card { padding: 16px; }
	#ap-portal .ap-h1 { font-size: 20px; }
	#ap-portal .ap-doc-date { text-align: left; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
	#ap-portal * { transition: none !important; }
}

/* =======================================================================
 * LIVE AUCTION ROOM (v2)
 *
 * Scoped under #ap-room, the same ID-specificity trick the portal uses.
 * Tokens are inherited from the portal block above and extended with the
 * two states the room needs that a referral list never did: a lot that is
 * live on the clock, and a lot that has settled.
 * ==================================================================== */

#ap-room {

	background: var(--ap-paper);
	color: var(--ap-ink);
	font-family: "Helvetica Neue", Inter, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	padding: 20px;
	-webkit-font-smoothing: antialiased;
}

#ap-room * { box-sizing: border-box; }
#ap-room p { margin: 0 0 10px; padding: 0; }
#ap-room h2, #ap-room h3 { margin: 0; padding: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
#ap-room a { color: var(--ap-slate); text-decoration: none; }
#ap-room a:hover { text-decoration: underline; }

/* Divi resets, same as the portal. */
#ap-room button {
	font: inherit;
	margin: 0;
	border-radius: 0;
	cursor: pointer;
	background: none;
	border: none;
	color: inherit;
	text-align: left;
	line-height: 1.4;
}

#ap-room button:hover { background: none; }
#ap-room button::after { display: none !important; }

#ap-room .ap-input {
	width: 100%;
	padding: 9px 11px;
	font-family: var(--ap-mono);
	font-size: 14px;
	color: var(--ap-ink);
	background: var(--ap-card);
	border: 1px solid var(--ap-line);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

#ap-room .ap-input:focus { outline: none; border-color: var(--ap-ink); box-shadow: inset 0 0 0 1px var(--ap-ink); }
#ap-room button:focus-visible, #ap-room .ap-input:focus-visible { outline: 2px solid var(--ap-ink); outline-offset: 2px; }
#ap-room .ap-loading { font-family: var(--ap-mono); font-size: 12px; color: var(--ap-mute); }
#ap-room .ap-muted { color: var(--ap-mute); }

/* ── Room chrome ─────────────────────────────────────────────────────── */

#ap-room .ap-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--ap-navy); border: 1px solid var(--ap-navy); padding: 12px 16px; margin-bottom: 16px; }
#ap-room .ap-brand-sm { font-weight: 800; letter-spacing: -0.03em; font-size: 17px; }
#ap-room .ap-brand-sm { font-weight: 800; letter-spacing: -0.03em; font-size: 17px; color: #fff; display: inline-flex; align-items: center; }
#ap-room .ap-brand-sm span { font-family: var(--ap-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ap-champagne); margin-left: 9px; font-weight: 400; }
#ap-room .ap-bar-right { font-family: var(--ap-mono); font-size: 11.5px; color: #9fb0c4; }
#ap-room .ap-bar-right a { color: var(--ap-champagne); }
#ap-room .ap-bar-right a:hover { color: #fff; }
#ap-room .ap-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
#ap-room .ap-h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.025em; }
#ap-room .ap-sub { font-family: var(--ap-mono); font-size: 12px; color: var(--ap-slate); margin: 6px 0 0; }
#ap-room .ap-back { color: var(--ap-slate); font-size: 13px; padding: 0 0 12px; }
#ap-room .ap-back:hover { text-decoration: underline; }

#ap-room .ap-btn { background: var(--ap-ink); color: var(--ap-card); border: 1px solid var(--ap-ink); padding: 9px 16px; font-size: 13px; transition: opacity 0.15s ease; text-align: center; }
#ap-room .ap-btn:hover { opacity: 0.82; background: var(--ap-ink); }
#ap-room .ap-btn--ghost { background: none; color: var(--ap-slate); border-color: var(--ap-line); }
#ap-room .ap-btn--ghost:hover { background: none; }
#ap-room .ap-btn[disabled] { opacity: 0.5; cursor: default; }

#ap-room .ap-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0; }
#ap-room .ap-chip { padding: 5px 10px; font-size: 11.5px; border: 1px solid var(--ap-line); color: var(--ap-slate); background: none; }
#ap-room .ap-chip.is-on { background: var(--ap-ink); color: var(--ap-card); border-color: var(--ap-ink); }

#ap-room .ap-flash { background: var(--ap-mint); border-left: 2px solid var(--ap-green); padding: 10px 13px; font-size: 13.5px; margin-bottom: 16px; }
#ap-room .ap-flash--bad { background: var(--ap-blush); border-left-color: var(--ap-oxblood); }
#ap-room .ap-warn { background: var(--ap-blush); border-left: 2px solid var(--ap-oxblood); padding: 10px 12px; font-size: 13px; margin-top: 12px; }
#ap-room .ap-empty { background: var(--ap-card); border: 1px dashed var(--ap-line); padding: 34px 20px; text-align: center; }
#ap-room .ap-empty p { color: var(--ap-slate); font-size: 14px; }

/* ── Lot cards ───────────────────────────────────────────────────────── */

#ap-room .ap-grid { display: grid; gap: 12px; }

/* The lot number rides a dark spine down the left edge — the catalogue tab
   made structural rather than decorative. */
#ap-room .ap-lot { display: flex; width: 100%; background: var(--ap-card); border: 1px solid var(--ap-line); padding: 0; transition: border-color 0.15s ease; overflow: hidden; }
#ap-room .ap-lot:hover { border-color: var(--ap-ink); background: var(--ap-card); }
#ap-room .ap-lot.is-live { border-color: var(--ap-oxblood); }
#ap-room .ap-lot.is-settled { opacity: 0.78; }

#ap-room .ap-spine { flex-shrink: 0; width: 34px; background: var(--ap-ink); display: flex; align-items: center; justify-content: center; }
#ap-room .ap-lot.is-live .ap-spine { background: var(--ap-oxblood); }
#ap-room .ap-spine span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--ap-mono); font-size: 10px; letter-spacing: 0.18em; color: #fff; font-weight: 600; }

#ap-room .ap-lot-body { flex: 1; min-width: 0; padding: 15px 18px; }
#ap-room .ap-lot-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
#ap-room .ap-lot-title { font-size: 18px; font-weight: 700; margin: 4px 0 2px; }
#ap-room .ap-lot-meta { font-family: var(--ap-mono); font-size: 12.5px; color: var(--ap-slate); }
#ap-room .ap-lot-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--ap-line); }
#ap-room .ap-ref { font-family: var(--ap-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ap-mute); }

/* ── State pill ──────────────────────────────────────────────────────── */

#ap-room .ap-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; font-family: var(--ap-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; border: 1px solid var(--ap-line); color: var(--ap-slate); white-space: nowrap; }
#ap-room .ap-pill--live { background: var(--ap-oxblood); border-color: var(--ap-oxblood); color: #fff; }
#ap-room .ap-pill--scheduled { background: var(--ap-amber); border-color: var(--ap-brass); color: var(--ap-brass); }
#ap-room .ap-pill--sold { background: var(--ap-mint); border-color: var(--ap-green); color: var(--ap-green); }
#ap-room .ap-pill--passed { background: var(--ap-paper); }

#ap-room .ap-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ap-pulse 1.4s ease-in-out infinite; }

@keyframes ap-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ── Money and clock ─────────────────────────────────────────────────── */

#ap-room .ap-money-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-mute); margin-bottom: 3px; }
#ap-room .ap-money { font-family: var(--ap-mono); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
#ap-room .ap-money--live { color: var(--ap-oxblood); }
#ap-room .ap-money--sold { color: var(--ap-green); }

#ap-room .ap-clock { font-family: var(--ap-mono); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-align: right; }
#ap-room .ap-clock--urgent { color: var(--ap-oxblood); }
#ap-room .ap-clock-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-mute); margin-bottom: 3px; text-align: right; font-weight: 400; }

/* ── Detail view ─────────────────────────────────────────────────────── */

#ap-room .ap-card { background: var(--ap-card); border: 1px solid var(--ap-line); padding: 18px 20px 20px; margin-bottom: 14px; }
#ap-room .ap-card--live { border-color: var(--ap-oxblood); border-left-width: 3px; }
#ap-room .ap-card-title { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-slate); margin-bottom: 14px; }

#ap-room .ap-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; margin-bottom: 16px; }
#ap-room .ap-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; }
#ap-room .ap-field { min-width: 0; }
#ap-room .ap-label { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-mute); margin-bottom: 4px; }
#ap-room .ap-value { font-family: var(--ap-mono); font-size: 14px; word-break: break-word; }
#ap-room .ap-value.is-empty { color: var(--ap-mute); }
#ap-room .ap-blurb { font-size: 14.5px; color: var(--ap-slate); line-height: 1.6; }

/* ── Reserve indicator ───────────────────────────────────────────────── */

#ap-room .ap-reserve { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ap-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-top: 10px; }
#ap-room .ap-reserve-bar { width: 26px; height: 4px; background: var(--ap-line); }
#ap-room .ap-reserve.is-met { color: var(--ap-green); }
#ap-room .ap-reserve.is-met .ap-reserve-bar { background: var(--ap-green); }
#ap-room .ap-reserve.is-under { color: var(--ap-brass); }
#ap-room .ap-reserve.is-under .ap-reserve-bar { background: var(--ap-brass); }

/* ── Bidding controls ────────────────────────────────────────────────── */

#ap-room .ap-bidbox { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 4px; }
#ap-room .ap-bidbox .ap-formrow { flex: 1; min-width: 150px; margin: 0; }
#ap-room .ap-bid-btn { background: var(--ap-oxblood); color: #fff; border: 1px solid var(--ap-oxblood); padding: 11px 22px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; transition: opacity 0.15s ease; }
#ap-room .ap-bid-btn:hover { opacity: 0.85; background: var(--ap-oxblood); }
#ap-room .ap-bid-btn[disabled] { opacity: 0.45; cursor: default; }
#ap-room .ap-bid-hint { font-family: var(--ap-mono); font-size: 11.5px; color: var(--ap-mute); margin-top: 9px; }
#ap-room .ap-lead { background: var(--ap-mint); border-left: 2px solid var(--ap-green); padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--ap-green); margin-bottom: 12px; }
#ap-room .ap-formrow { margin-bottom: 14px; }
#ap-room .ap-hint { color: var(--ap-mute); font-size: 12px; margin: 5px 0 0; }

/* ── Bid ledger ──────────────────────────────────────────────────────── */

#ap-room .ap-ledger { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow-y: auto; }
#ap-room .ap-bid { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--ap-line); background: var(--ap-card); font-size: 13px; }
#ap-room .ap-bid.is-top { border-color: var(--ap-oxblood); background: var(--ap-blush); }
#ap-room .ap-bid.is-mine { border-left-width: 3px; border-left-color: var(--ap-green); }
#ap-room .ap-bid-who { font-family: var(--ap-mono); font-size: 11.5px; color: var(--ap-slate); letter-spacing: 0.04em; }
#ap-room .ap-bid.is-mine .ap-bid-who { color: var(--ap-green); font-weight: 600; }
#ap-room .ap-bid-amt { font-family: var(--ap-mono); font-size: 14px; font-weight: 600; }
#ap-room .ap-bid.is-top .ap-bid-amt { color: var(--ap-oxblood); }
#ap-room .ap-bid-time { font-family: var(--ap-mono); font-size: 10.5px; color: var(--ap-mute); }

/* A landing bid gets one quiet flash. Enough to catch the eye, not enough
   to be a distraction in a room where bids land every few seconds. */
#ap-room .ap-flashed { animation: ap-land 1s ease-out; }

@keyframes ap-land {
	0% { background: var(--ap-amber); }
	100% { background: var(--ap-blush); }
}

/* ── Sign-in prompt ──────────────────────────────────────────────────── */

#ap-room .ap-signin { background: var(--ap-amber); border: 1px solid var(--ap-brass); padding: 16px 18px; }
#ap-room .ap-signin p { color: var(--ap-ink); font-size: 13.5px; }
#ap-room .ap-signin .ap-btn { display: inline-block; margin-top: 6px; }

/* ── Live connection indicator ───────────────────────────────────────── */

#ap-room .ap-conn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ap-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-green); }
#ap-room .ap-conn.is-stale { color: var(--ap-brass); }
#ap-room .ap-conn-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#ap-room .ap-conn:not(.is-stale) .ap-conn-dot { animation: ap-pulse 2s ease-in-out infinite; }

/* ── Small screens ───────────────────────────────────────────────────── */

@media (max-width: 640px) {
	#ap-room { padding: 14px; }
	#ap-room .ap-card { padding: 16px; }
	#ap-room .ap-h1 { font-size: 20px; }
	#ap-room .ap-spine { width: 26px; }
	#ap-room .ap-spine span { font-size: 9px; letter-spacing: 0.12em; }
	#ap-room .ap-lot-body { padding: 13px 14px; }
	#ap-room .ap-money { font-size: 17px; }
	#ap-room .ap-bidbox { flex-direction: column; align-items: stretch; }
	#ap-room .ap-bid-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	#ap-room * { transition: none !important; animation: none !important; }
}

/* ── Auction fields inside the agent portal ──────────────────────────── */

#ap-portal .ap-live-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--ap-blush); border-left: 2px solid var(--ap-oxblood); padding: 10px 13px; margin-top: 12px; }
#ap-portal .ap-live-strip .ap-money { font-family: var(--ap-mono); font-size: 16px; font-weight: 600; color: var(--ap-oxblood); }
#ap-portal .ap-live-strip .ap-label { margin-bottom: 2px; }
#ap-portal .ap-tone-live .ap-rail-bar.is-on { background: var(--ap-oxblood); }
#ap-portal .ap-tone-live .ap-rail-label { color: var(--ap-oxblood); }

/* =======================================================================
 * FORMS, POPUP AND AGENT LISTING CONTROLS (v3)
 * ==================================================================== */

#ap-portal.ap-portal--form { padding: 40px 20px; }
#ap-portal .ap-formwrap { max-width: 520px; margin: 0 auto; }
#ap-portal .ap-formwrap .ap-card { padding: 26px; }
#ap-portal .ap-btn--wide { display: block; width: 100%; margin-top: 6px; }
#ap-portal .ap-btn--wide + .ap-btn--wide { margin-top: 10px; }
#ap-portal .ap-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ap-mute); font-size: 10px; }
#ap-portal .ap-locked { font-family: var(--ap-mono); font-size: 14px; background: var(--ap-paper); border: 1px solid var(--ap-line); padding: 9px 11px; margin: 0; }
#ap-portal .ap-notice { background: var(--ap-amber); border-left: 2px solid var(--ap-brass); padding: 11px 14px; font-size: 13.5px; margin-bottom: 16px; }
#ap-portal .ap-formrow--check { margin-bottom: 16px; }
#ap-portal .ap-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--ap-slate); cursor: pointer; }
#ap-portal .ap-check input { margin-top: 3px; flex-shrink: 0; }

/* Agent listing controls */
#ap-portal .ap-owner-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--ap-line); }
#ap-portal .ap-btn--danger { background: none; color: var(--ap-oxblood); border-color: var(--ap-oxblood); }
#ap-portal .ap-btn--danger:hover { background: var(--ap-oxblood); color: #fff; }
#ap-portal .ap-confirm { background: var(--ap-blush); border: 1px solid var(--ap-oxblood); padding: 14px 16px; margin-top: 12px; }
#ap-portal .ap-confirm p { font-size: 13.5px; color: var(--ap-ink); }
#ap-portal .ap-confirm .ap-actions { margin-top: 10px; }
#ap-portal .ap-locked-note { font-size: 12.5px; color: var(--ap-mute); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ap-line); }

/* ── Bid popup ───────────────────────────────────────────────────────── */

#ap-popup {

	background: var(--ap-card);
	color: var(--ap-ink);
	font-family: "Helvetica Neue", Inter, system-ui, sans-serif;
	font-size: 15px; line-height: 1.5; padding: 0;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

#ap-popup * { box-sizing: border-box; }
#ap-popup p { margin: 0 0 10px; padding: 0; }
#ap-popup h2, #ap-popup h3 { margin: 0; padding: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
#ap-popup button { font: inherit; margin: 0; border-radius: 0; cursor: pointer; border: none; text-align: left; }
#ap-popup button::after { display: none !important; }
#ap-popup a { text-decoration: none; }

#ap-popup .ap-popup-head { background: var(--ap-ink); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#ap-popup .ap-brand-sm { font-weight: 800; letter-spacing: -0.03em; font-size: 16px; color: #fff; }
#ap-popup .ap-brand-sm span { display: block; font-family: var(--ap-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--ap-champagne); margin-top: 2px; font-weight: 400; }
#ap-popup .ap-bar-right { font-family: var(--ap-mono); font-size: 11px; color: #9ba3ae; }

#ap-popup .ap-popup-lot { padding: 18px 20px 0; }
#ap-popup .ap-ref { font-family: var(--ap-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--ap-mute); margin-bottom: 4px; }
#ap-popup .ap-h1 { font-size: 21px; font-weight: 800; letter-spacing: -0.025em; }
#ap-popup .ap-sub { font-family: var(--ap-mono); font-size: 12px; color: var(--ap-slate); margin: 5px 0 0; }

#ap-popup .ap-popup-price { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 16px 20px; margin-top: 14px; background: var(--ap-paper); border-top: 1px solid var(--ap-line); border-bottom: 1px solid var(--ap-line); }
#ap-popup .ap-money-label, #ap-popup .ap-clock-label { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-mute); margin-bottom: 3px; }
#ap-popup .ap-clock-label { text-align: right; }
#ap-popup .ap-money { font-family: var(--ap-mono); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
#ap-popup .ap-money--live { color: var(--ap-oxblood); }
#ap-popup .ap-clock { font-family: var(--ap-mono); font-size: 17px; font-weight: 600; text-align: right; }
#ap-popup .ap-clock--urgent { color: var(--ap-oxblood); }

#ap-popup .ap-reserve { display: flex; align-items: center; gap: 7px; font-family: var(--ap-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 9px 20px; background: var(--ap-paper); border-bottom: 1px solid var(--ap-line); }
#ap-popup .ap-reserve-bar { width: 24px; height: 4px; background: var(--ap-line); }
#ap-popup .ap-reserve.is-met { color: var(--ap-green); }
#ap-popup .ap-reserve.is-met .ap-reserve-bar { background: var(--ap-green); }
#ap-popup .ap-reserve.is-under { color: var(--ap-brass); }
#ap-popup .ap-reserve.is-under .ap-reserve-bar { background: var(--ap-brass); }

#ap-popup .ap-popup-body { padding: 20px; }
#ap-popup .ap-label { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-mute); margin-bottom: 4px; }
#ap-popup .ap-input { width: 100%; padding: 11px; font-family: var(--ap-mono); font-size: 16px; border: 1px solid var(--ap-line); border-radius: 0; background: #fff; color: var(--ap-ink); -webkit-appearance: none; appearance: none; }
#ap-popup .ap-input:focus { outline: none; border-color: var(--ap-ink); box-shadow: inset 0 0 0 1px var(--ap-ink); }
#ap-popup .ap-formrow { margin-bottom: 14px; }
#ap-popup .ap-notice { background: var(--ap-amber); border-left: 2px solid var(--ap-brass); padding: 12px 14px; font-size: 13px; margin-bottom: 16px; }
#ap-popup .ap-lead { background: var(--ap-mint); border-left: 2px solid var(--ap-green); padding: 10px 13px; font-size: 13px; font-weight: 600; color: var(--ap-green); margin-bottom: 14px; }
#ap-popup .ap-warn { background: var(--ap-blush); border-left: 2px solid var(--ap-oxblood); padding: 14px 16px; font-size: 13px; margin: 20px; }
#ap-popup .ap-flash { background: var(--ap-mint); border-left: 2px solid var(--ap-green); padding: 11px 20px; font-size: 13px; }
#ap-popup .ap-flash--bad { background: var(--ap-blush); border-left-color: var(--ap-oxblood); }
#ap-popup .ap-loading { font-family: var(--ap-mono); font-size: 12px; color: var(--ap-mute); padding: 30px 20px; }

#ap-popup .ap-btn { display: block; width: 100%; text-align: center; background: var(--ap-ink); color: #fff; border: 1px solid var(--ap-ink); padding: 12px 18px; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
#ap-popup .ap-btn--ghost { background: none; color: var(--ap-slate); border-color: var(--ap-line); font-weight: 500; }
#ap-popup .ap-bid-btn { display: block; width: 100%; text-align: center; background: var(--ap-oxblood); color: #fff; border: 1px solid var(--ap-oxblood); padding: 13px 20px; font-size: 15px; font-weight: 700; }
#ap-popup .ap-bid-btn[disabled] { opacity: 0.45; cursor: default; }
#ap-popup .ap-bid-hint { font-family: var(--ap-mono); font-size: 11px; color: var(--ap-mute); margin-top: 10px; }
#ap-popup .ap-card-title { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-slate); margin-bottom: 10px; }
#ap-popup .ap-ledger { display: flex; flex-direction: column; gap: 3px; }
#ap-popup .ap-bid { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--ap-line); font-size: 13px; }
#ap-popup .ap-bid.is-top { border-color: var(--ap-oxblood); background: var(--ap-blush); }
#ap-popup .ap-bid.is-mine { border-left-width: 3px; border-left-color: var(--ap-green); }
#ap-popup .ap-bid-who { font-family: var(--ap-mono); font-size: 11px; color: var(--ap-slate); }
#ap-popup .ap-bid.is-mine .ap-bid-who { color: var(--ap-green); font-weight: 600; }
#ap-popup .ap-bid-amt { font-family: var(--ap-mono); font-size: 13.5px; font-weight: 600; }
#ap-popup .ap-bid.is-top .ap-bid-amt { color: var(--ap-oxblood); }
#ap-popup button:focus-visible, #ap-popup .ap-input:focus-visible, #ap-popup a:focus-visible { outline: 2px solid var(--ap-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	#ap-popup * { transition: none !important; animation: none !important; }
}

/* =======================================================================
 * MEDIA AND VERIFICATION (v4)
 * ==================================================================== */

#ap-portal .ap-slots { display: flex; flex-direction: column; gap: 20px; }
#ap-portal .ap-slot { border: 1px solid var(--ap-line); padding: 14px 16px; background: var(--ap-card); }
#ap-portal .ap-slot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
#ap-portal .ap-slot-label { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
#ap-portal .ap-req { font-family: var(--ap-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-oxblood); font-weight: 500; }
#ap-portal .ap-slot-count { font-family: var(--ap-mono); font-size: 11.5px; color: var(--ap-mute); }

#ap-portal .ap-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 12px 0; }
#ap-portal .ap-tile { position: relative; border: 1px solid var(--ap-line); background: var(--ap-paper); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
#ap-portal .ap-tile.is-rejected { border-color: var(--ap-oxblood); background: var(--ap-blush); }
#ap-portal .ap-tile img { width: 100%; height: 74px; object-fit: cover; display: block; background: var(--ap-line); }
#ap-portal .ap-tile-file { display: flex; align-items: center; justify-content: center; height: 74px; background: var(--ap-ink); color: var(--ap-brassL); font-family: var(--ap-mono); font-size: 11px; letter-spacing: 0.12em; }
#ap-portal .ap-tile-name { font-size: 10px; color: var(--ap-slate); word-break: break-all; line-height: 1.3; }
#ap-portal .ap-tile-note { font-size: 10px; color: var(--ap-oxblood); line-height: 1.35; }
#ap-portal .ap-tile-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; background: rgba(17,20,26,.82); color: #fff; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; }
#ap-portal .ap-tile-x:hover { background: var(--ap-oxblood); }

#ap-portal .ap-vbadge { font-family: var(--ap-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 2px 5px; align-self: flex-start; }
#ap-portal .ap-vbadge.is-good { background: var(--ap-mint); color: var(--ap-green); }
#ap-portal .ap-vbadge.is-bad { background: var(--ap-blush); color: var(--ap-oxblood); }
#ap-portal .ap-vbadge.is-warn { background: var(--ap-amber); color: var(--ap-brass); }

#ap-portal .ap-upload { display: inline-block; margin-top: 4px; }
#ap-portal .ap-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#ap-portal .ap-upload span { display: inline-block; background: none; color: var(--ap-slate); border: 1px dashed var(--ap-line); padding: 9px 16px; font-size: 13px; cursor: pointer; }
#ap-portal .ap-upload span:hover { border-color: var(--ap-ink); color: var(--ap-ink); }
#ap-portal .ap-upload input:focus-visible + span { outline: 2px solid var(--ap-ink); outline-offset: 2px; }

#ap-portal .ap-upload-status { font-family: var(--ap-mono); font-size: 11.5px; color: var(--ap-mute); margin-top: 12px; min-height: 16px; }
#ap-portal .ap-upload-status.is-good { color: var(--ap-green); }
#ap-portal .ap-upload-status.is-bad { color: var(--ap-oxblood); }

#ap-portal .ap-submit-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ap-line); }
#ap-portal .ap-gaps { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
#ap-portal .ap-gaps li { margin-bottom: 3px; }
#ap-portal .ap-verified-banner { background: var(--ap-mint); border-left: 2px solid var(--ap-green); padding: 10px 13px; font-size: 13.5px; color: var(--ap-green); font-weight: 600; margin-bottom: 14px; }

/* ── Gallery in the bid window ───────────────────────────────────────── */

#ap-popup .ap-gallery { display: flex; gap: 4px; overflow-x: auto; padding: 0 20px 12px; scroll-snap-type: x mandatory; }
#ap-popup .ap-shot { flex: 0 0 auto; scroll-snap-align: start; }
#ap-popup .ap-shot img { width: 200px; height: 132px; object-fit: cover; display: block; background: var(--ap-line); }
#ap-popup .ap-docs-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 20px 14px; }
#ap-popup .ap-doc-link { font-family: var(--ap-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--ap-line); padding: 5px 10px; color: var(--ap-slate); }
#ap-popup .ap-doc-link:hover { border-color: var(--ap-ink); color: var(--ap-ink); }
#ap-popup .ap-doc-locked { font-size: 11px; color: var(--ap-mute); padding: 5px 0; }

/* ── Titled documents, drag handles, admin-issued files ──────────────── */

#ap-portal .ap-slot.is-admin-slot { border-color: var(--ap-brass); background: var(--ap-amber); }
#ap-portal .ap-readonly { font-family: var(--ap-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-brass); font-weight: 500; }

#ap-portal .ap-doc-add { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin-top: 4px; }
#ap-portal .ap-doc-add .ap-input { flex: 1; min-width: 200px; }
#ap-portal .ap-doc-add .ap-upload { display: flex; }
#ap-portal .ap-doc-add .ap-upload span { display: flex; align-items: center; white-space: nowrap; }

#ap-portal .ap-tile-title { font-size: 11.5px; font-weight: 600; line-height: 1.3; }
#ap-portal .ap-tile-dl { font-family: var(--ap-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ap-slate); }
#ap-portal .ap-tile-dl:hover { color: var(--ap-ink); }

/* The grip is the affordance — without something to grab, a draggable tile
   reads as a static image and nobody discovers the reordering. */
#ap-portal .ap-tile.is-draggable { cursor: grab; }
#ap-portal .ap-tile.is-draggable:active { cursor: grabbing; }
#ap-portal .ap-grip { position: absolute; top: 2px; left: 2px; z-index: 2; background: rgba(17,20,26,.72); color: #fff; font-size: 11px; line-height: 1; padding: 3px 5px; letter-spacing: -1px; }
#ap-portal .ap-tile.is-dragging { opacity: 0.35; }
#ap-portal .ap-tile.is-dragover { outline: 2px solid var(--ap-ink); outline-offset: 1px; }
#ap-portal .ap-cover-tag { position: absolute; bottom: 2px; left: 2px; z-index: 2; background: var(--ap-ink); color: var(--ap-brassL); font-family: var(--ap-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 5px; }

#ap-popup .ap-guide-note { font-family: var(--ap-mono); font-size: 10.5px; color: var(--ap-mute); margin-top: 3px; }

/* ── Password reveal ─────────────────────────────────────────────────── */

.onassis-pw { position: relative; display: block; }
.onassis-pw input { padding-right: 62px !important; }

.onassis-pw-toggle {
	position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
	background: none; border: none; padding: 5px 8px; cursor: pointer;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
	color: #5c6574; line-height: 1;
}

.onassis-pw-toggle:hover { color: #11141a; }
.onassis-pw-toggle:focus-visible { outline: 2px solid #11141a; outline-offset: 1px; }
.onassis-pw-toggle[aria-pressed="true"] { color: #7b2d3b; font-weight: 600; }

/* WordPress's own login form markup, which we do not control. */
#ap-portal .onassis-pw input[type="password"],
#ap-portal .onassis-pw input[type="text"],
#ap-popup .onassis-pw input[type="password"],
#ap-popup .onassis-pw input[type="text"] { width: 100%; }

#ap-portal .ap-hint--lock { background: var(--ap-amber); border-left: 2px solid var(--ap-brass); padding: 9px 11px; margin: 8px 0 0; line-height: 1.45; }
#ap-portal .ap-live-strip.is-scheduled { background: var(--ap-amber); border-left-color: var(--ap-brass); }
#ap-portal .ap-countdown { text-align: right; margin-left: auto; }
#ap-portal .ap-countdown-value { font-family: var(--ap-mono); font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }
#ap-portal .ap-countdown.is-urgent .ap-countdown-value { color: var(--ap-oxblood); }

/* ── Policy acceptance ───────────────────────────────────────────────── */

#ap-portal .ap-policies { border: 1px solid var(--ap-line); padding: 16px; margin-bottom: 16px; background: var(--ap-paper); }
#ap-portal .ap-policy-head { font-size: 13px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
#ap-portal .ap-policy { padding: 11px 0; border-top: 1px solid var(--ap-line); }
#ap-portal .ap-policy:first-of-type { border-top: none; }
#ap-portal .ap-policy.has-error { background: var(--ap-blush); margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
#ap-portal .ap-policy-title { font-size: 13.5px; margin-bottom: 7px; }
#ap-portal .ap-policy-title a { text-decoration: underline; font-size: 12.5px; }
#ap-portal .ap-policy-choice { display: flex; gap: 18px; flex-wrap: wrap; }
#ap-portal .ap-policy-choice label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ap-slate); cursor: pointer; }
#ap-portal .ap-policy-warn { background: var(--ap-blush); border-left: 2px solid var(--ap-oxblood); padding: 10px 12px; font-size: 12.5px; margin-top: 12px; line-height: 1.45; }

/* ── A counter-offer put to the bidder ───────────────────────────────── */

#ap-popup .ap-offer { background: var(--ap-amber); border-top: 1px solid var(--ap-brass); border-bottom: 1px solid var(--ap-brass); padding: 18px 20px; }
#ap-popup .ap-offer-head { font-family: var(--ap-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ap-brass); font-weight: 600; margin-bottom: 6px; }
#ap-popup .ap-offer-amount { font-family: var(--ap-mono); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: var(--ap-ink); margin-bottom: 10px; }
#ap-popup .ap-offer-note { font-size: 13px; color: #6b4f0d; line-height: 1.5; margin: 0 0 10px; }
#ap-popup .ap-offer-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* =======================================================================
 * CUSTOMER PORTAL
 * ==================================================================== */

#ap-customer .ap-customer-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--ap-line); margin-bottom: 20px; }
#ap-customer .ap-customer-name { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin: 0; }
#ap-customer .ap-customer-meta { font-family: var(--ap-mono); font-size: 12px; color: var(--ap-mute); margin: 3px 0 0; }

/* ── Solicitor ───────────────────────────────────────────────────────── */

#ap-customer .ap-sol { border: 1px solid var(--ap-line); padding: 18px 20px; margin-bottom: 22px; background: var(--ap-card); }
#ap-customer .ap-sol.is-required { border-color: var(--ap-oxblood); border-left-width: 3px; background: var(--ap-blush); }
#ap-customer .ap-sol--closed { padding: 12px 16px; }
#ap-customer .ap-sol-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--ap-slate); }
#ap-customer .ap-sol-head { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
#ap-customer .ap-sol.is-required .ap-sol-head { color: var(--ap-oxblood); }
#ap-customer .ap-sol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
#ap-customer .ap-sol-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ── Tabs ────────────────────────────────────────────────────────────── */

#ap-customer .ap-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ap-line); margin-bottom: 20px; flex-wrap: wrap; }
#ap-customer .ap-tab { padding: 11px 16px; font-size: 13.5px; cursor: pointer; background: none; border: none; color: var(--ap-slate); border-bottom: 2px solid transparent; margin-bottom: -1px; }
#ap-customer .ap-tab.is-on { color: var(--ap-ink); font-weight: 600; border-bottom-color: var(--ap-oxblood); }
#ap-customer .ap-tab-count { font-family: var(--ap-mono); font-size: 11px; color: var(--ap-mute); }
#ap-customer .ap-tab.is-on .ap-tab-count { color: var(--ap-oxblood); }

/* ── Lot cards ───────────────────────────────────────────────────────── */

#ap-customer .ap-lotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
#ap-customer .ap-lotcard { border: 1px solid var(--ap-line); background: var(--ap-card); display: flex; flex-direction: column; }
#ap-customer .ap-lotcard.is-live { border-left: 3px solid var(--ap-oxblood); }
#ap-customer .ap-lotcard-photo { background: var(--ap-line); }
#ap-customer .ap-lotcard-photo img { width: 100%; height: 168px; object-fit: cover; display: block; }
#ap-customer .ap-lotcard-body { padding: 15px 17px; display: flex; flex-direction: column; flex: 1; }
#ap-customer .ap-lotcard-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
#ap-customer .ap-lotcard-title { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 2px; }
#ap-customer .ap-lotcard-addr { font-family: var(--ap-mono); font-size: 11.5px; color: var(--ap-mute); margin: 0 0 12px; }
#ap-customer .ap-lotcard-money { display: flex; gap: 18px; flex-wrap: wrap; padding: 11px 0; border-top: 1px solid var(--ap-line); margin-top: auto; }
#ap-customer .ap-lotcard-money .ap-money { font-family: var(--ap-mono); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
#ap-customer .ap-lotcard-money .ap-value { font-family: var(--ap-mono); font-size: 14px; }
#ap-customer .ap-lotcard .ap-btn { margin-top: 11px; }

#ap-customer .ap-tag { font-family: var(--ap-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 3px 7px; }
#ap-customer .ap-tag.is-leading { background: var(--ap-mint); color: var(--ap-green); }
#ap-customer .ap-tag.is-outbid { background: var(--ap-blush); color: var(--ap-oxblood); }
#ap-customer .ap-tag.is-won { background: var(--ap-ink); color: var(--ap-brassL); }
#ap-customer .ap-tag.is-lost { background: #f1efe8; color: var(--ap-mute); }

#ap-customer .ap-offer-flag { background: var(--ap-amber); border-left: 2px solid var(--ap-brass); padding: 9px 11px; font-size: 12.5px; line-height: 1.45; color: #6b4f0d; margin-bottom: 12px; }
#ap-customer .ap-empty { border: 1px dashed var(--ap-line); padding: 44px 20px; text-align: center; color: var(--ap-mute); font-size: 14px; }
#ap-customer .ap-loading { font-family: var(--ap-mono); font-size: 13px; color: var(--ap-mute); }
#ap-customer .ap-mono { font-family: var(--ap-mono); }

/* =========================================================================
 * Portal navigation
 *
 * One bar across every signed-in surface. Links are built server-side from
 * the same role tests that guard the pages, so this only ever has to draw
 * whatever it is handed.
 * ====================================================================== */

#ap-portal .ap-nav,
#ap-customer .ap-nav,
#ap-room-shell .ap-nav,
#ap-room .ap-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	background: var(--ap-navy);
	border: 1px solid var(--ap-navy);
	padding: 9px 14px;
	margin-bottom: 16px;
}

#ap-portal .ap-nav-links,
#ap-customer .ap-nav-links,
#ap-room-shell .ap-nav-links,
#ap-room .ap-nav-links { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

#ap-portal .ap-nav-link,
#ap-customer .ap-nav-link,
#ap-room-shell .ap-nav-link,
#ap-room .ap-nav-link {
	font-size: 12.5px;
	padding: 6px 11px;
	/* On navy, not on white: a light warm grey rather than pure white, so the
	   current page still has somewhere brighter to go. */
	color: #d6dce5;
	border: 1px solid transparent;
}

#ap-portal .ap-nav-link:hover,
#ap-customer .ap-nav-link:hover,
#ap-room-shell .ap-nav-link:hover,
#ap-room .ap-nav-link:hover { text-decoration: none; background: var(--ap-navy-soft); color: #fff; }

#ap-portal .ap-nav-link.is-current,
#ap-customer .ap-nav-link.is-current,
#ap-room-shell .ap-nav-link.is-current,
#ap-room .ap-nav-link.is-current { color: var(--ap-navy); border-color: var(--ap-champagne); background: var(--ap-champagne); font-weight: 600; }

#ap-portal .ap-nav-user,
#ap-customer .ap-nav-user,
#ap-room-shell .ap-nav-user,
#ap-room .ap-nav-user { display: flex; align-items: center; gap: 12px; font-family: var(--ap-mono); font-size: 11.5px; color: #9fb0c4; }

#ap-portal .ap-nav-out,
#ap-customer .ap-nav-out,
#ap-room-shell .ap-nav-out,
#ap-room .ap-nav-out { font-size: 11.5px; color: var(--ap-champagne); }

#ap-portal .ap-nav-out:hover,
#ap-customer .ap-nav-out:hover,
#ap-room-shell .ap-nav-out:hover,
#ap-room .ap-nav-out:hover { color: #fff; }

/* The mark, sitting on its own navy plate at the head of a page.
   The logo is champagne on transparent: on white it is barely there, so it is
   never drawn straight onto the page. */
#ap-portal .ap-mark,
#ap-customer .ap-mark {
	background: var(--ap-navy);
	padding: 18px 20px 16px;
	margin-bottom: 18px;
	text-align: center;
}

#ap-portal .ap-mark-img,
#ap-customer .ap-mark-img { display: block; height: 34px; width: auto; margin: 0 auto; }

#ap-portal .ap-mark-tag,
#ap-customer .ap-mark-tag {
	display: block;
	margin-top: 10px;
	font-family: var(--ap-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--ap-champagne);
}

/* The same mark, small, inside an app's own bar. */
#ap-portal .ap-bar-logo,
#ap-room .ap-bar-logo,
#ap-popup .ap-bar-logo { height: 19px; width: auto; display: inline-block; vertical-align: middle; }

/* The note under the username box on the sign-in form. */
#ap-portal .ap-login-hint { margin: -6px 0 12px; }

/* =========================================================================
 * The registration wizard
 * ====================================================================== */

#ap-portal .ap-progress { margin-bottom: 14px; }
#ap-portal .ap-progress-label { font-family: var(--ap-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-mute); margin: 0 0 8px; }

#ap-portal .ap-progress-track { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
#ap-portal .ap-progress-track li { flex: 1 1 90px; border-top: 2px solid var(--ap-line); padding-top: 6px; font-size: 11px; color: var(--ap-mute); }
#ap-portal .ap-progress-track li.is-done { border-top-color: var(--ap-green); color: var(--ap-slate); }
#ap-portal .ap-progress-track li.is-current { border-top-color: var(--ap-ink); color: var(--ap-ink); font-weight: 600; }

#ap-portal .ap-stage-title { font-size: 18px; margin-bottom: 4px; }
#ap-portal .ap-stage-note { color: var(--ap-slate); font-size: 13px; margin-bottom: 18px; }

#ap-portal .ap-stage-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 20px; }
#ap-portal .ap-stage-actions .ap-btn { min-width: 120px; }

/* Stage one: the two choices. */
#ap-portal .ap-choice-card { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--ap-line); padding: 14px 16px; margin-bottom: 10px; cursor: pointer; }
#ap-portal .ap-choice-card:hover { border-color: var(--ap-slate); }
#ap-portal .ap-choice-card:focus-within { outline: 2px solid var(--ap-ink); outline-offset: 2px; }
#ap-portal .ap-choice-card input { margin-top: 4px; }
#ap-portal .ap-choice-card:has(input:checked) { border-color: var(--ap-ink); background: var(--ap-card); box-shadow: inset 0 0 0 1px var(--ap-ink); }
#ap-portal .ap-choice-body { display: block; }
#ap-portal .ap-choice-label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 3px; }
#ap-portal .ap-choice-blurb { display: block; font-size: 13px; color: var(--ap-slate); line-height: 1.45; }

/* Subscription tiers, drawn the same way as the choices. */
#ap-portal .ap-tiers { display: grid; gap: 8px; }
#ap-portal .ap-tier { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--ap-line); padding: 11px 13px; cursor: pointer; }
#ap-portal .ap-tier:hover { border-color: var(--ap-slate); }
#ap-portal .ap-tier:has(input:checked) { border-color: var(--ap-ink); box-shadow: inset 0 0 0 1px var(--ap-ink); }
#ap-portal .ap-tier-label { display: block; font-weight: 600; font-size: 14px; }
#ap-portal .ap-tier-note { display: block; font-size: 12px; color: var(--ap-slate); }

#ap-portal .ap-input--file { padding: 7px; font-family: inherit; }
#ap-portal .ap-logo-preview { height: 30px; width: auto; vertical-align: middle; margin-right: 8px; }

/* The password meter. Advisory — the server has the final word. */
#ap-portal .ap-strength { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
#ap-portal .ap-strength-bar { flex: 1; height: 3px; background: var(--ap-line); display: block; }
#ap-portal .ap-strength-bar i { display: block; height: 3px; width: 0; background: var(--ap-oxblood); transition: width 0.18s ease, background 0.18s ease; }
#ap-portal .ap-strength[data-score="2"] .ap-strength-bar i { background: var(--ap-brass); }
#ap-portal .ap-strength[data-score="3"] .ap-strength-bar i,
#ap-portal .ap-strength[data-score="4"] .ap-strength-bar i { background: var(--ap-green); }
#ap-portal .ap-strength-word { font-family: var(--ap-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-mute); }

/* =========================================================================
 * The agreements stage
 * ====================================================================== */

#ap-portal .ap-agreements { margin-top: 4px; }
#ap-portal .ap-agreement { border: 1px solid var(--ap-line); padding: 13px 15px; margin-bottom: 10px; }
#ap-portal .ap-agreement.is-accepted { border-left: 3px solid var(--ap-green); }
#ap-portal .ap-agreement-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#ap-portal .ap-agreement-title { font-weight: 600; font-size: 14px; }
#ap-portal .ap-agreement-version { font-family: var(--ap-mono); font-size: 10.5px; color: var(--ap-mute); }
#ap-portal .ap-agreement-note { font-size: 12.5px; color: var(--ap-slate); margin: 5px 0 11px; }
#ap-portal .ap-agreement-state { font-family: var(--ap-mono); font-size: 11px; color: var(--ap-mute); margin-left: 11px; }
#ap-portal .ap-agreement.is-accepted .ap-agreement-state { color: var(--ap-green); }
#ap-portal .ap-btn--small { padding: 6px 12px; font-size: 12px; }
#ap-portal .ap-agreement-legal { margin-top: 12px; line-height: 1.5; }
#ap-portal .ap-formrow--captcha { margin-top: 16px; }

/* =========================================================================
 * The reading modal
 *
 * Lives on <body> rather than inside #ap-portal, so it is scoped by class and
 * given enough specificity to survive a theme's own dialog styling.
 * ====================================================================== */

html.ap-modal-open { overflow: hidden; }

body .ap-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(17, 20, 26, 0.62);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

body .ap-modal[hidden] { display: none; }

body .ap-modal .ap-modal-panel {
	background: #fff;
	border: 1px solid #d5d9de;
	width: min(760px, 100%);
	max-height: min(82vh, 780px);
	display: flex;
	flex-direction: column;
	font-family: "Helvetica Neue", Inter, system-ui, sans-serif;
	color: #11141a;
	box-shadow: 0 24px 60px rgba(17, 20, 26, 0.28);
}

body .ap-modal .ap-modal-head { display: flex; align-items: baseline; gap: 12px; padding: 15px 18px; border-bottom: 1px solid #d5d9de; }
body .ap-modal .ap-modal-title { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -0.02em; flex: 1; }
body .ap-modal .ap-modal-version { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: #8a929e; }
body .ap-modal .ap-modal-close { font-size: 22px; line-height: 1; background: none; border: none; cursor: pointer; color: #5c6574; padding: 0 2px; }

body .ap-modal .ap-modal-body { overflow-y: auto; padding: 18px; font-size: 14px; line-height: 1.62; flex: 1; }
body .ap-modal .ap-modal-body:focus-visible { outline: 2px solid #11141a; outline-offset: -2px; }
body .ap-modal .ap-doc h1, body .ap-modal .ap-doc h2, body .ap-modal .ap-doc h3 { font-size: 15px; margin: 20px 0 8px; }
body .ap-modal .ap-doc p, body .ap-modal .ap-doc li { margin: 0 0 11px; }
body .ap-modal .ap-doc ol, body .ap-modal .ap-doc ul { padding-left: 22px; margin: 0 0 12px; }

body .ap-modal .ap-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; border-top: 1px solid #d5d9de; background: #f7f8f9; }
body .ap-modal .ap-modal-hint { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #8a929e; }
body .ap-modal .ap-btn { background: #11141a; color: #fff; border: 1px solid #11141a; padding: 9px 18px; font-size: 13px; cursor: pointer; }
body .ap-modal .ap-btn[disabled] { opacity: 0.45; cursor: default; }
body .ap-modal .ap-error { color: #7b2d3b; font-size: 13px; }
body .ap-modal .ap-hint { color: #8a929e; font-size: 12px; }

@media (max-width: 600px) {
	body .ap-modal { padding: 0; }
	body .ap-modal .ap-modal-panel { max-height: 100vh; height: 100%; width: 100%; border: none; }
	#ap-portal .ap-stage-actions { flex-direction: column-reverse; }
	#ap-portal .ap-stage-actions .ap-btn { width: 100%; }
}

/* =========================================================================
 * The admin overview
 *
 * Dense on purpose. This is the page you open to find out whether anything
 * needs you, so everything that might needs to be visible without scrolling
 * through decoration.
 * ====================================================================== */

#ap-portal.ap-admin .ap-card-head { justify-content: space-between; }
#ap-portal .ap-count { font-family: var(--ap-mono); font-size: 12px; color: var(--ap-mute); }
#ap-portal .ap-subhead { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ap-mute); margin: 22px 0 10px; font-weight: 600; }
#ap-portal .ap-small { font-size: 11.5px; }
#ap-portal .ap-mute { color: var(--ap-mute); }
#ap-portal .ap-mono { font-family: var(--ap-mono); }
#ap-portal .ap-empty-line { color: var(--ap-mute); font-size: 13px; margin: 0; }

/* Health list. The left border is the whole signal — green, brass, oxblood. */
#ap-portal .ap-health { list-style: none; margin: 0; padding: 0; }
#ap-portal .ap-health-row { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; padding: 9px 0 9px 12px; border-left: 3px solid var(--ap-line); border-bottom: 1px solid var(--ap-line); }
#ap-portal .ap-health-row:last-child { border-bottom: none; }
#ap-portal .ap-health-row.is-ok { border-left-color: var(--ap-green); }
#ap-portal .ap-health-row.is-warn { border-left-color: var(--ap-brass); }
#ap-portal .ap-health-row.is-bad { border-left-color: var(--ap-oxblood); background: var(--ap-blush); }
#ap-portal .ap-health-label { flex: 0 0 150px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ap-slate); font-weight: 600; }
#ap-portal .ap-health-detail { flex: 1 1 260px; font-size: 13px; line-height: 1.45; }

/* Stat tiles. */
#ap-portal .ap-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
#ap-portal .ap-stat { flex: 1 1 140px; border: 1px solid var(--ap-line); padding: 11px 13px; }
#ap-portal .ap-stats--sold .ap-stat { border-left: 3px solid var(--ap-brass); }
#ap-portal .ap-stat-label { display: block; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ap-mute); margin-bottom: 5px; }
#ap-portal .ap-stat-value { display: block; font-family: var(--ap-mono); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }

/* Tables. */
#ap-portal .ap-tablewrap { overflow-x: auto; }
#ap-portal .ap-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#ap-portal .ap-table th { text-align: left; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ap-mute); font-weight: 600; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--ap-line); white-space: nowrap; }
#ap-portal .ap-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--ap-line); vertical-align: top; }
#ap-portal .ap-table tr:last-child td { border-bottom: none; }
#ap-portal .ap-table .ap-num { text-align: right; font-family: var(--ap-mono); }
#ap-portal .ap-table--compact td { padding: 5px 10px 5px 0; }
#ap-portal .ap-rowactions { text-align: right; white-space: nowrap; }

/* Definition lists for one record. */
#ap-portal .ap-detail { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: 4px 16px; margin: 12px 0 0; font-size: 13px; }
#ap-portal .ap-detail dt { color: var(--ap-mute); font-size: 11.5px; letter-spacing: 0.03em; text-transform: uppercase; padding-top: 1px; }
#ap-portal .ap-detail dd { margin: 0; }

/* Pending accounts. */
#ap-portal .ap-pending { border: 1px solid var(--ap-line); border-left: 3px solid var(--ap-brass); padding: 13px 15px; margin-bottom: 10px; }
#ap-portal .ap-pending-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
#ap-portal .ap-pending-kind { font-family: var(--ap-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ap-paper); padding: 2px 7px; color: var(--ap-slate); }
#ap-portal .ap-pending-when { margin-left: auto; font-family: var(--ap-mono); font-size: 11px; color: var(--ap-mute); }
#ap-portal .ap-pending-email { margin: 4px 0 0; font-size: 12.5px; }
#ap-portal .ap-pending-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
#ap-portal .ap-inline-form { display: inline; margin: 0; }
#ap-portal .ap-btn--danger { background: var(--ap-oxblood); border-color: var(--ap-oxblood); color: #fff; }
#ap-portal .ap-btn--danger:hover { background: var(--ap-oxblood); opacity: 0.85; }

/* Flags on a consent row. */
#ap-portal .ap-flag { font-family: var(--ap-mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; background: var(--ap-amber); color: #6b4f0d; padding: 2px 6px; margin-left: 5px; }
#ap-portal .ap-flag.is-bad { background: var(--ap-blush); color: var(--ap-oxblood); }

#ap-portal .ap-log { list-style: none; margin: 0; padding: 0; }
#ap-portal .ap-log li { padding: 4px 0; border-bottom: 1px solid var(--ap-line); color: var(--ap-slate); }

/* Links into the other areas. */
#ap-portal .ap-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; }
#ap-portal .ap-link-card { border: 1px solid var(--ap-line); padding: 12px 14px; display: block; }
#ap-portal .ap-link-card:hover { border-color: var(--ap-ink); text-decoration: none; }
#ap-portal .ap-link-label { display: block; font-weight: 600; font-size: 14px; color: var(--ap-ink); margin-bottom: 2px; }
#ap-portal .ap-link-note { display: block; font-size: 12px; color: var(--ap-mute); }

@media (max-width: 600px) {
	#ap-portal .ap-health-label { flex-basis: 100%; }
	#ap-portal .ap-detail { grid-template-columns: 1fr; gap: 2px; }
	#ap-portal .ap-detail dd { margin-bottom: 8px; }
}

/* =========================================================================
 * Address blocks, lookups and suggestions
 * ====================================================================== */

#ap-portal .ap-address { border: 1px solid var(--ap-line); padding: 14px 15px 4px; margin: 0 0 14px; }
#ap-portal .ap-address[hidden] { display: none; }
#ap-portal .ap-address legend { padding: 0 6px; margin-left: -6px; }

#ap-portal .ap-lookup { display: flex; gap: 8px; align-items: stretch; }
#ap-portal .ap-lookup .ap-input { flex: 1; }
#ap-portal .ap-lookup .ap-btn { white-space: nowrap; }

#ap-portal .ap-suggestions { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--ap-line); background: var(--ap-card); max-height: 240px; overflow-y: auto; }
#ap-portal .ap-suggestions[hidden] { display: none; }
#ap-portal .ap-suggestion button { display: block; width: 100%; padding: 9px 12px; font-size: 13px; text-align: left; border-bottom: 1px solid var(--ap-line); background: none; }
#ap-portal .ap-suggestion:last-child button { border-bottom: none; }
#ap-portal .ap-suggestion button:hover { background: var(--ap-paper); }

#ap-portal .ap-lookup-result { margin-top: 9px; }
#ap-portal .ap-lookup-result[hidden] { display: none; }
#ap-portal .ap-company-found { border: 1px solid var(--ap-line); border-left: 3px solid var(--ap-green); padding: 10px 12px; }
#ap-portal .ap-company-found.is-used { border-left-color: var(--ap-ink); background: var(--ap-mint); }
#ap-portal .ap-company-name { font-weight: 700; font-size: 14px; color: var(--ap-ink); text-decoration: underline; background: none; padding: 0; }

/* The agreed fee card in the agent portal. Brass edge, like everything that
   is the auction team's to set rather than the agent's. */
#ap-portal .ap-card--fee { border-left: 3px solid var(--ap-brass); }
#ap-portal .ap-card--fee .ap-muted-sm { font-family: var(--ap-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--ap-mute); margin-left: 8px; }

/* =========================================================================
 * Photographs and paperwork in the auction room
 *
 * The room received photos, floor plans and documents from the server from the
 * first version and drew none of them — a property catalogue made entirely of
 * text. This is that, fixed.
 * ====================================================================== */

#ap-room .ap-lot-cover { display: block; position: relative; background: var(--ap-paper); overflow: hidden; }
#ap-room .ap-lot-cover img { width: 100%; height: 170px; object-fit: cover; display: block; }
#ap-room .ap-lot-cover.is-empty { display: flex; align-items: center; justify-content: center; height: 170px; }
#ap-room .ap-lot-cover.is-empty span { font-family: var(--ap-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ap-mute); }
#ap-room .ap-lot-count { position: absolute; right: 8px; bottom: 8px; background: var(--ap-navy); color: var(--ap-champagne); font-family: var(--ap-mono); font-size: 10px; letter-spacing: 0.06em; padding: 3px 7px; }

#ap-room .ap-gallery { margin-bottom: 18px; background: var(--ap-navy-deep); }
#ap-room .ap-gallery-main img { width: 100%; max-height: 460px; object-fit: contain; display: block; background: var(--ap-navy-deep); }
#ap-room .ap-thumbs { display: flex; gap: 6px; padding: 8px; overflow-x: auto; }
#ap-room .ap-thumb { flex: 0 0 auto; padding: 0; border: 2px solid transparent; background: none; line-height: 0; cursor: pointer; }
#ap-room .ap-thumb img { width: 74px; height: 54px; object-fit: cover; display: block; }
#ap-room .ap-thumb.is-on { border-color: var(--ap-champagne); }
#ap-room .ap-thumb:hover { border-color: #fff; }

#ap-room .ap-docs { display: grid; gap: 6px; }
#ap-room .ap-doc { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--ap-line); padding: 11px 13px; background: var(--ap-card); }
#ap-room .ap-doc:hover { border-color: var(--ap-navy); text-decoration: none; }
#ap-room .ap-doc-name { font-size: 13.5px; color: var(--ap-ink); font-weight: 600; }
#ap-room .ap-doc-meta { font-family: var(--ap-mono); font-size: 11px; color: var(--ap-mute); white-space: nowrap; }
#ap-room .ap-doc-count { font-family: var(--ap-mono); font-size: 11px; color: var(--ap-mute); margin-left: 8px; }

@media (max-width: 600px) {
	#ap-room .ap-gallery-main img { max-height: 260px; }
}

/* The release control on a document tile in the agent portal. */
#ap-portal .ap-tile-release { display: block; width: 100%; margin-top: 5px; font-family: var(--ap-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: 4px 6px; border: 1px solid var(--ap-line); color: var(--ap-mute); background: var(--ap-card); }
#ap-portal .ap-tile-release.is-button { cursor: pointer; }
#ap-portal .ap-tile-release.is-button:hover { border-color: var(--ap-navy); color: var(--ap-navy); }
#ap-portal .ap-tile-release.is-on { background: var(--ap-mint); border-color: var(--ap-green); color: var(--ap-green); }
#ap-portal .ap-tile-release.is-blocked { background: var(--ap-paper); }

/* A previous value in a proposed change: present, but plainly the old one. */
#ap-portal .ap-was { color: var(--ap-mute); text-decoration: line-through; }

/* =========================================================================
 * One toolbar
 *
 * The mark, the area, the links and the account all in one strip. Each app
 * used to draw a second bar directly beneath this one, saying overlapping
 * things a line lower; they now draw nothing of their own.
 * ====================================================================== */

#ap-portal .ap-nav-mark,
#ap-customer .ap-nav-mark,
#ap-room-shell .ap-nav-mark,
#ap-room .ap-nav-mark {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-right: 14px;
	margin-right: 4px;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
	flex: 0 0 auto;
}

#ap-portal .ap-nav-mark:hover,
#ap-customer .ap-nav-mark:hover,
#ap-room-shell .ap-nav-mark:hover,
#ap-room .ap-nav-mark:hover { text-decoration: none; opacity: 0.85; }

#ap-portal .ap-nav-mark img,
#ap-customer .ap-nav-mark img,
#ap-room-shell .ap-nav-mark img,
#ap-room .ap-nav-mark img { height: 17px; width: auto; display: block; }

#ap-portal .ap-nav-context,
#ap-customer .ap-nav-context,
#ap-room-shell .ap-nav-context,
#ap-room .ap-nav-context {
	font-family: var(--ap-mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	color: var(--ap-champagne);
	white-space: nowrap;
}

/* The links take the middle, so the mark and the account sit at the ends. */
#ap-portal .ap-nav-links,
#ap-customer .ap-nav-links,
#ap-room-shell .ap-nav-links,
#ap-room .ap-nav-links { flex: 1 1 auto; }

@media (max-width: 720px) {
	#ap-portal .ap-nav-mark,
	#ap-customer .ap-nav-mark,
	#ap-room-shell .ap-nav-mark,
	#ap-room .ap-nav-mark { border-right: none; padding-right: 0; }

	#ap-portal .ap-nav-context,
	#ap-customer .ap-nav-context,
	#ap-room-shell .ap-nav-context,
	#ap-room .ap-nav-context { display: none; }
}

/* The introducing agency on a listing: its logo, or its name where it has
   none. A placeholder square would say less than the name and would look like
   something failed to load. */
#ap-room .ap-agency,
#ap-portal .ap-agency {
	display: inline-flex;
	align-items: center;
	background: var(--ap-card);
	border: 1px solid var(--ap-line);
	padding: 4px 8px;
	margin: 0 0 8px;
	max-width: 100%;
}

#ap-room .ap-agency img,
#ap-portal .ap-agency img { height: 20px; width: auto; max-width: 130px; object-fit: contain; display: block; }
#ap-room .ap-agency--lg img { height: 30px; max-width: 190px; }

#ap-room .ap-agency.is-text,
#ap-portal .ap-agency.is-text {
	font-family: var(--ap-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ap-slate);
}

/* =========================================================================
   The customer portal's share of the common furniture

   #ap-customer was built later than the agent portal and inherited none of
   the base rules, because every one of them is written against #ap-portal —
   an ID, which the customer page does not have even though it carries the
   ap-portal class. Its cards and buttons have been falling through to
   whatever Divi paints. These are the same declarations, nothing new.
   ====================================================================== */
#ap-customer .ap-card { background: var(--ap-card); border: 1px solid var(--ap-line); padding: 18px 20px 20px; margin-bottom: 14px; }
#ap-customer .ap-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
#ap-customer .ap-card-head h3 { font-size: 15px; }
#ap-customer .ap-btn { background: var(--ap-ink); color: var(--ap-card); border: 1px solid var(--ap-ink); padding: 9px 16px; font-size: 13px; transition: opacity 0.15s ease; text-align: center; }
#ap-customer .ap-btn:hover { opacity: 0.82; background: var(--ap-ink); }
#ap-customer .ap-btn--ghost { background: none; color: var(--ap-slate); border-color: var(--ap-line); }
#ap-customer .ap-btn--ghost:hover { background: none; }
#ap-customer .ap-btn[disabled] { opacity: 0.5; cursor: default; }
#ap-customer .ap-btn--small { padding: 6px 12px; font-size: 12px; }
#ap-customer .ap-hint { color: var(--ap-mute); font-size: 12px; margin: 5px 0 0; }
#ap-customer .ap-empty-line { color: var(--ap-mute); font-size: 13px; margin: 0; }

/* =========================================================================
   The to-do panel

   Red, amber, green — but never colour alone. The dot carries the colour, the
   left border repeats it, and the row's own words say what is wrong, so the
   panel still reads correctly to somebody who cannot tell the dots apart.
   That is why there is no "you have 3 reds" summary in prose anywhere: the
   count badge is decorative, the list is the message.
   ====================================================================== */
#ap-portal .ap-todo,
#ap-customer .ap-todo { border-color: var(--ap-line); }

#ap-portal .ap-todo .ap-card-head,
#ap-customer .ap-todo .ap-card-head { justify-content: space-between; }

#ap-portal .ap-todo-list,
#ap-customer .ap-todo-list { list-style: none; margin: 0; padding: 0; }

#ap-portal .ap-todo-row,
#ap-customer .ap-todo-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0 12px 13px;
	border-left: 3px solid var(--ap-line);
	border-bottom: 1px solid var(--ap-line);
}

#ap-portal .ap-todo-row:last-child,
#ap-customer .ap-todo-row:last-child { border-bottom: none; }

#ap-portal .ap-todo-row.is-red,
#ap-customer .ap-todo-row.is-red { border-left-color: var(--ap-oxblood); background: var(--ap-blush); }
#ap-portal .ap-todo-row.is-amber,
#ap-customer .ap-todo-row.is-amber { border-left-color: var(--ap-brass); background: var(--ap-amber); }
#ap-portal .ap-todo-row.is-green,
#ap-customer .ap-todo-row.is-green { border-left-color: var(--ap-green); }

#ap-portal .ap-todo-body,
#ap-customer .ap-todo-body { flex: 1 1 auto; min-width: 0; }

#ap-portal .ap-todo-title,
#ap-customer .ap-todo-title { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }

#ap-portal .ap-todo-detail,
#ap-customer .ap-todo-detail { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ap-slate); margin-top: 3px; }

#ap-portal .ap-todo-row .ap-btn,
#ap-customer .ap-todo-row .ap-btn { flex: 0 0 auto; align-self: center; text-decoration: none; }

/* The dot. 9px, with a ring, so it survives a low-contrast screen. */
#ap-portal .ap-todo-dot,
#ap-customer .ap-todo-dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-top: 6px;
	box-shadow: 0 0 0 1px rgba(15, 33, 55, 0.18);
}

#ap-portal .ap-todo-dot.is-red,
#ap-customer .ap-todo-dot.is-red { background: var(--ap-oxblood); }
#ap-portal .ap-todo-dot.is-amber,
#ap-customer .ap-todo-dot.is-amber { background: var(--ap-brass); }
#ap-portal .ap-todo-dot.is-green,
#ap-customer .ap-todo-dot.is-green { background: var(--ap-green); }

#ap-portal .ap-todo-counts,
#ap-customer .ap-todo-counts { display: flex; gap: 10px; align-items: center; }

#ap-portal .ap-todo-count,
#ap-customer .ap-todo-count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--ap-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--ap-mute);
}

#ap-portal .ap-todo-count .ap-todo-dot,
#ap-customer .ap-todo-count .ap-todo-dot { margin-top: 0; }

#ap-portal .ap-todo-key,
#ap-customer .ap-todo-key { margin-top: 12px; }

@media (max-width: 560px) {
	#ap-portal .ap-todo-row,
	#ap-customer .ap-todo-row { flex-wrap: wrap; }

	#ap-portal .ap-todo-row .ap-btn,
	#ap-customer .ap-todo-row .ap-btn { margin-left: 21px; align-self: flex-start; }
}

/* =========================================================================
   The verification screen

   Deliberately the same width and rhythm as the sign-in form it replaces, so
   the step reads as part of signing in rather than as an interruption. The
   code box is the exception: oversized, monospaced and widely tracked, because
   somebody is copying six digits across from a phone and every aid to reading
   them correctly saves an attempt.
   ====================================================================== */
#ap-portal .ap-verify { max-width: 400px; }

#ap-portal .ap-verify-head {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 26px 0 6px;
	text-align: center;
}

#ap-portal .ap-verify-lead {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ap-slate);
	margin: 0 0 18px;
	text-align: center;
}

/* The masked address, on its own line and never broken across two. */
#ap-portal .ap-verify-to {
	font-family: var(--ap-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--ap-ink);
	text-align: center;
	margin: 0 0 4px;
	overflow-wrap: break-word;
}

#ap-portal .ap-verify-form {
	background: var(--ap-card);
	border: 1px solid var(--ap-line);
	padding: 22px;
}

#ap-portal .ap-code-input {
	width: 100%;
	text-align: center;
	font-family: var(--ap-mono);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: 0.35em;
	/* The tracking is applied to the right of every character including the
	   last, which visually shifts the whole string left. Half of it back as
	   padding re-centres it. */
	padding: 12px 0 12px 0.35em;
	margin-bottom: 14px;
}

#ap-portal .ap-code-input::placeholder { letter-spacing: 0.2em; font-size: 20px; }

#ap-portal .ap-verify-watch {
	text-align: center;
	margin-top: 14px;
	/* Dimmer than the surrounding hints: it is a status line, not an
	   instruction, and it should not compete with the box being typed in. */
	color: var(--ap-mute);
	font-style: italic;
}

#ap-portal .ap-verify-resend,
#ap-portal .ap-verify-cancel { text-align: center; margin-top: 12px; }

/* A button that has to read as a link, because what it does is navigational
   even though it changes something and therefore cannot be an anchor. */
#ap-portal .ap-linkbtn {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 12.5px;
	color: var(--ap-slate);
	text-decoration: underline;
	cursor: pointer;
}

#ap-portal .ap-linkbtn:hover { color: var(--ap-ink); background: none; }
#ap-portal .ap-verify-cancel .ap-linkbtn { color: var(--ap-mute); }

#ap-portal .ap-flash.is-bad { background: var(--ap-blush); border-left-color: var(--ap-oxblood); }

@media (max-width: 420px) {
	#ap-portal .ap-code-input { font-size: 24px; letter-spacing: 0.25em; padding-left: 0.25em; }
}

/* The "was this you?" page the email's button lands on. The facts are the
   point of the page — somebody is being asked to recognise a sign-in — so they
   sit in a card of their own rather than running on as prose. */
#ap-portal .ap-confirm-facts { margin: 4px 0 18px; padding: 14px 16px; }
#ap-portal .ap-confirm-facts p { margin: 0 0 6px; font-size: 13.5px; color: var(--ap-slate); }
#ap-portal .ap-confirm-facts p:last-child { margin-bottom: 0; }
#ap-portal .ap-confirm-facts strong { color: var(--ap-ink); }

/* Served without the theme when no sign-in page exists to host it. */
body.ap-standalone { margin: 0; background: var(--ap-paper, #eef1f5); }

/* The password screens reuse the verify layout, which was built around a
   single oversized code box. A normal field needs room under it before the
   button, and the links beneath belong on the centre line like everything
   else in this narrow column. */
#ap-portal .ap-verify-form .ap-input { margin-bottom: 14px; }
#ap-portal .ap-verify-form .ap-input + .ap-label { margin-top: 2px; }
#ap-portal .ap-verify .ap-fineprint { text-align: center; }
#ap-portal .ap-verify .ap-hint { text-align: center; }
#ap-portal .ap-verify-form .ap-hint { text-align: left; margin-bottom: 14px; }
#ap-portal .ap-verify-form .ap-formrow--captcha { margin-bottom: 14px; }