/**
 * ArneIron Portal — customer self-service portal stylesheet.
 *
 * Styles the [arnpx_portal] shell (/account) and every panel so the portal
 * reads as an integral part of the LIGHT grey/white ArneIron site (wp#59,
 * Option A — the dark-red CRT palette is retired from the account area).
 * Reuses the theme design tokens (ds.css `--c-*` aliases + `--wp--preset--*`
 * presets) with self-contained LIGHT fallbacks mirroring theme.json, so the
 * portal still looks right if the theme tokens are not present. Everything is
 * scoped under .arnpx-portal / .arnpx-auth to avoid leaking into the page.
 *
 * @package ArneIron_Portal
 */

/* ===================================================================== *
 * Local token aliases — map to arneiron-g ds.css vars with safe fallbacks
 * so this file is correct standalone and inherits the live theme palette.
 * ===================================================================== */
.arnpx-portal,
.arnpx-auth {
	/*
	 * wp#59 (2026-07-29, Option A — light everywhere): the portal composes
	 * with the site's light grey/white system. Surfaces, ink, hairlines,
	 * status colors, spacing, radius and fonts inherit the theme seam
	 * (ds.css `--c-*` aliases / `--wp--preset--*` presets) and fall back to
	 * the theme.json LIGHT literals so the file is correct standalone.
	 * The RED family is pinned to WCAG-AA literals (#b02a37 = 6.5:1 on
	 * #ffffff, 6.1:1 on #f6f7f9) instead of inheriting `--c-signal` — the
	 * live theme maps that slug to its GREY accent, and per the owner
	 * decision red survives ONLY as the accent/destructive color.
	 */
	--arnpx-base:      var(--c-bg, #ffffff);
	--arnpx-panel:     var(--c-panel, #f6f7f9);
	--arnpx-panel-2:   var(--c-panel-2, #eceef2);
	--arnpx-panel-3:   var(--c-panel-3, #dee1e7);
	--arnpx-well:      var(--c-well, #eceef2);
	--arnpx-red:       #b02a37;
	--arnpx-red-deep:  #8f222d;
	--arnpx-blood:     #8f222d;
	--arnpx-maroon:    #f3e2e4;
	--arnpx-ink:       var(--c-ink, #14181f);
	--arnpx-ink-dim:   var(--c-ink-dim, #4b5462);
	--arnpx-ink-faint: var(--c-ink-3, #6b7280);
	--arnpx-grid:      var(--c-grid, #d7dbe2);
	--arnpx-grid-2:    var(--wp--preset--color--border-strong, #b9c0cc);
	--arnpx-hair:      var(--c-hair, #d7dbe2);
	--arnpx-green:     var(--c-success, #3f7a4a);
	--arnpx-green-dim: var(--c-success, #3f7a4a);
	--arnpx-amber:     var(--c-warning, #8a5a1f);
	--arnpx-error:     var(--c-danger, #9a3535);
	--arnpx-glow:      rgba(20, 24, 31, .12);
	--arnpx-glow-soft: rgba(20, 24, 31, .06);

	--arnpx-sp-1: var(--wp--preset--spacing--2, 4px);
	--arnpx-sp-2: var(--wp--preset--spacing--3, 8px);
	--arnpx-sp-3: var(--wp--preset--spacing--4, 12px);
	--arnpx-sp-4: var(--wp--preset--spacing--5, 16px);
	--arnpx-sp-5: var(--wp--preset--spacing--6, 24px);
	--arnpx-sp-6: var(--wp--preset--spacing--7, 32px);

	--arnpx-radius: var(--r-md, 6px);
	--arnpx-f-ui:      var(--wp--preset--font-family--ui, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
	--arnpx-f-display: var(--arnpx-f-ui);
	--arnpx-f-mono:    var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	--arnpx-shadow:    var(--sh-block, 0 4px 12px rgba(20, 24, 31, .08));
}

/* ===================================================================== *
 * Shell.
 * ===================================================================== */
.arnpx-portal {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--arnpx-sp-5);
	align-items: start;
	max-width: 1080px;
	margin: var(--arnpx-sp-5) auto;
	padding: var(--arnpx-sp-4);
	color: var(--arnpx-ink);
	font-family: var(--arnpx-f-ui);
	font-size: var(--wp--preset--font-size--base, 1rem);
	line-height: 1.6;
	background: var(--arnpx-base);
	border: 1px solid var(--arnpx-grid);
	border-radius: var(--arnpx-radius);
}

.arnpx-portal *,
.arnpx-portal *::before,
.arnpx-portal *::after {
	box-sizing: border-box;
}

.arnpx-portal a {
	color: var(--arnpx-red);
	text-decoration: none;
}

.arnpx-portal a:hover,
.arnpx-portal a:focus-visible {
	color: var(--arnpx-ink);
	text-decoration: underline;
}

/* Guest fallback (logged-out / not-yet-rendered shortcode). */
.arnpx-portal--guest {
	display: block;
	max-width: 480px;
	text-align: center;
}

/* ===================================================================== *
 * Navigation sidebar.
 * ===================================================================== */
.arnpx-portal__nav {
	position: sticky;
	top: var(--arnpx-sp-4);
	background: var(--arnpx-panel);
	border: 1px solid var(--arnpx-grid);
	border-radius: var(--arnpx-radius);
	padding: var(--arnpx-sp-2);
}

.arnpx-portal__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.arnpx-portal__nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.arnpx-portal__navlink {
	display: block;
	padding: var(--arnpx-sp-2) var(--arnpx-sp-3);
	margin: 2px 0;
	color: var(--arnpx-ink-dim);
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	font-size: 13px;
	border-left: 3px solid transparent;
	border-radius: 0 var(--arnpx-radius) var(--arnpx-radius) 0;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.arnpx-portal__navlink:hover,
.arnpx-portal__navlink:focus-visible {
	color: var(--arnpx-ink);
	background: var(--arnpx-panel-2);
	border-left-color: var(--arnpx-blood);
	text-decoration: none;
}

.arnpx-portal__navlink.is-active {
	color: var(--arnpx-ink);
	background: linear-gradient(90deg, var(--arnpx-maroon), transparent);
	border-left-color: var(--arnpx-red);
	box-shadow: inset 0 0 8px var(--arnpx-glow-soft);
}

/* ===================================================================== *
 * Main column.
 * ===================================================================== */
.arnpx-portal__main {
	min-width: 0;
}

.arnpx-portal__title {
	margin: 0 0 var(--arnpx-sp-5);
	padding-bottom: var(--arnpx-sp-3);
	font-family: var(--arnpx-f-display);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--arnpx-ink);
	border-bottom: 1px solid var(--arnpx-grid);
}

.arnpx-portal__main h2 {
	font-family: var(--arnpx-f-ui);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--arnpx-ink-dim);
	margin: 0 0 var(--arnpx-sp-3);
}

.arnpx-portal__main h3 {
	font-family: var(--arnpx-f-ui);
	font-size: 15px;
	font-weight: 700;
	color: var(--arnpx-ink);
	margin: 0 0 var(--arnpx-sp-2);
}

.arnpx-portal__placeholder {
	padding: var(--arnpx-sp-5);
	color: var(--arnpx-ink-faint);
	font-style: italic;
	background: var(--arnpx-panel);
	border: 1px dashed var(--arnpx-grid);
	border-radius: var(--arnpx-radius);
	text-align: center;
}

/* ===================================================================== *
 * Cards & card grids (dashboard, buy, profile).
 * ===================================================================== */
.arnpx-card {
	background: var(--arnpx-panel);
	border: 1px solid var(--arnpx-grid);
	border-radius: var(--arnpx-radius);
	padding: var(--arnpx-sp-4);
	margin: 0 0 var(--arnpx-sp-4);
}

/* .cards modifier turns a panel into a responsive auto-fit grid. */
.arnpx-panel.cards,
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--arnpx-sp-4);
}

.cards > .arnpx-card {
	margin: 0;
}

.arnpx-card--balance,
.arnpx-card--plan,
.arnpx-card--sites {
	border-top: 2px solid var(--arnpx-blood);
}

.arnpx-card__metric {
	margin: var(--arnpx-sp-1) 0 0;
	font-family: var(--arnpx-f-display);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.05;
	color: var(--arnpx-red);
}

.arnpx-card__sub {
	margin: var(--arnpx-sp-2) 0 0;
	color: var(--arnpx-ink-faint);
	font-size: 13px;
}

.arnpx-card__title {
	color: var(--arnpx-ink);
}

.arnpx-card__tokens {
	margin: 0 0 var(--arnpx-sp-2);
	color: var(--arnpx-ink-dim);
	font-family: var(--arnpx-f-mono);
}

.arnpx-card__price {
	margin: 0 0 var(--arnpx-sp-3);
	font-family: var(--arnpx-f-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--arnpx-ink);
}

.arnpx-card__cta {
	margin: 0;
}

/* Quick-links card (dashboard nav). */
.arnpx-card--links a {
	display: inline-block;
	margin-right: var(--arnpx-sp-3);
	font-weight: 600;
}

/* ===================================================================== *
 * Buttons (.arnpx-btn family + WP .button / .button-primary).
 * ===================================================================== */
.arnpx-portal .arnpx-btn,
.arnpx-portal .button,
.arnpx-auth .button {
	display: inline-block;
	padding: var(--arnpx-sp-2) var(--arnpx-sp-4);
	font-family: var(--arnpx-f-ui);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--arnpx-ink);
	background: var(--arnpx-panel-3);
	border: 1px solid var(--arnpx-grid-2);
	border-radius: var(--arnpx-radius);
	cursor: pointer;
	transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
	text-decoration: none;
}

.arnpx-portal .arnpx-btn:hover,
.arnpx-portal .button:hover,
.arnpx-portal .arnpx-btn:focus-visible,
.arnpx-portal .button:focus-visible,
.arnpx-auth .button:hover {
	background: var(--arnpx-panel-2);
	border-color: var(--arnpx-blood);
	box-shadow: 0 0 8px var(--arnpx-glow-soft);
	color: var(--arnpx-ink);
	text-decoration: none;
}

.arnpx-portal .arnpx-btn--primary,
.arnpx-portal .button-primary,
.arnpx-auth .button-primary,
.arnpx-portal .arnpx-onboarding__cta {
	color: #fff;
	background: var(--arnpx-red);
	border-color: var(--arnpx-red-deep);
}

.arnpx-portal .arnpx-btn--primary:hover,
.arnpx-portal .button-primary:hover,
.arnpx-portal .arnpx-btn--primary:focus-visible,
.arnpx-portal .button-primary:focus-visible,
.arnpx-auth .button-primary:hover {
	background: var(--arnpx-red-deep);
	box-shadow: var(--arnpx-shadow);
	color: #fff;
}

.arnpx-portal .arnpx-btn--secondary {
	background: transparent;
	border-color: var(--arnpx-grid-2);
	color: var(--arnpx-ink-dim);
}

.arnpx-portal .arnpx-btn--sm {
	padding: var(--arnpx-sp-1) var(--arnpx-sp-3);
	font-size: 12px;
}

.arnpx-portal .arnpx-btn--lg {
	padding: var(--arnpx-sp-3) var(--arnpx-sp-5);
	font-size: 16px;
}

/* ===================================================================== *
 * Forms (.arnpx-add-site, .arnpx-form, .arnpx-field) + WP fields.
 * ===================================================================== */
.arnpx-portal input[type="text"],
.arnpx-portal input[type="url"],
.arnpx-portal input[type="email"],
.arnpx-portal input[type="password"],
.arnpx-portal .regular-text,
.arnpx-auth input[type="text"],
.arnpx-auth input[type="email"],
.arnpx-auth input[type="password"] {
	width: 100%;
	max-width: 100%;
	padding: var(--arnpx-sp-2) var(--arnpx-sp-3);
	color: var(--arnpx-ink);
	background: var(--arnpx-well);
	border: 1px solid var(--arnpx-grid-2);
	border-radius: var(--arnpx-radius);
	font-family: var(--arnpx-f-mono);
	font-size: 14px;
}

.arnpx-portal input:focus,
.arnpx-auth input:focus {
	outline: none;
	border-color: var(--arnpx-red);
	box-shadow: 0 0 0 1px var(--arnpx-red), 0 0 8px var(--arnpx-glow-soft);
}

.arnpx-portal input::placeholder {
	color: var(--arnpx-ink-faint);
	opacity: .7;
}

.arnpx-portal label,
.arnpx-auth label {
	display: block;
	margin-bottom: var(--arnpx-sp-1);
	font-weight: 600;
	font-size: 13px;
	color: var(--arnpx-ink-dim);
}

.arnpx-portal .description {
	margin: var(--arnpx-sp-1) 0 0;
	font-size: 12px;
	color: var(--arnpx-ink-faint);
}

/* Inline add-site form: input + button on one row, hint below. */
.arnpx-add-site {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--arnpx-sp-2);
	align-items: end;
	background: var(--arnpx-panel);
	border: 1px solid var(--arnpx-grid);
	border-radius: var(--arnpx-radius);
	padding: var(--arnpx-sp-4);
	margin: var(--arnpx-sp-4) 0;
}

.arnpx-add-site label {
	grid-column: 1 / -1;
}

.arnpx-add-site .description {
	grid-column: 1 / -1;
}

.arnpx-add-site.is-prominent {
	border-color: var(--arnpx-blood);
	box-shadow: 0 0 10px var(--arnpx-glow-soft);
}

.arnpx-form__actions,
.arnpx-card__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--arnpx-sp-2);
	margin-top: var(--arnpx-sp-3);
}

.arnpx-field {
	margin: 0 0 var(--arnpx-sp-3);
}

.arnpx-hint,
.arnpx-muted {
	color: var(--arnpx-ink-faint);
	font-size: 13px;
}

/* ===================================================================== *
 * Notices (.arnpx-notice --ok/--warn/is-ok/is-error, panel notices).
 * ===================================================================== */
.arnpx-notice,
.arnpx-panel__notice,
.arnpx-usage__notice,
.arnpx-usage__degraded {
	padding: var(--arnpx-sp-3) var(--arnpx-sp-4);
	margin: 0 0 var(--arnpx-sp-4);
	border-radius: var(--arnpx-radius);
	border-left: 3px solid var(--arnpx-grid-2);
	background: var(--arnpx-panel-2);
	color: var(--arnpx-ink);
	font-size: 14px;
}

.arnpx-notice--ok,
.arnpx-notice.is-ok {
	border-left-color: var(--arnpx-green);
	background: rgba(63, 122, 74, .1);
}

.arnpx-notice--warn,
.arnpx-usage__degraded {
	border-left-color: var(--arnpx-amber);
	background: rgba(138, 90, 31, .1);
}

.arnpx-notice.is-error,
.arnpx-panel__notice--unavailable {
	border-left-color: var(--arnpx-error);
	background: rgba(154, 53, 53, .08);
}

/* ===================================================================== *
 * Balance & Usage panel.
 * ===================================================================== */
.arnpx-usage {
	display: block;
}

.arnpx-usage__headline {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--arnpx-sp-2);
	padding: var(--arnpx-sp-5);
	margin: 0 0 var(--arnpx-sp-5);
	background: var(--arnpx-panel);
	border: 1px solid var(--arnpx-grid);
	border-top: 2px solid var(--arnpx-blood);
	border-radius: var(--arnpx-radius);
}

.arnpx-usage__balance-label {
	flex: 1 0 100%;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--arnpx-ink-dim);
}

.arnpx-usage__balance-value {
	font-family: var(--arnpx-f-display);
	font-size: 56px;
	font-weight: 700;
	line-height: 1;
	color: var(--arnpx-red);
}

.arnpx-usage__balance-unit,
.arnpx-usage__balance-currency {
	font-family: var(--arnpx-f-mono);
	font-size: 14px;
	color: var(--arnpx-ink-faint);
}

/* Allocation meter / progress bar. */
.arnpx-usage__meter {
	margin: 0 0 var(--arnpx-sp-5);
}

.arnpx-usage__meter-head {
	display: flex;
	justify-content: space-between;
	gap: var(--arnpx-sp-2);
	margin-bottom: var(--arnpx-sp-2);
}

.arnpx-usage__meter-label {
	font-weight: 600;
	color: var(--arnpx-ink-dim);
	font-size: 13px;
}

.arnpx-usage__meter-readout {
	font-family: var(--arnpx-f-mono);
	font-size: 13px;
	color: var(--arnpx-ink);
}

.arnpx-usage__meter-track {
	height: 14px;
	background: var(--arnpx-well);
	border: 1px solid var(--arnpx-grid-2);
	border-radius: var(--arnpx-radius);
	overflow: hidden;
}

.arnpx-usage__meter-fill {
	height: 100%;
	min-width: 2px;
	background: linear-gradient(90deg, #8f222d, #b02a37);
	transition: width 280ms ease;
}

/* Usage history table. */
.arnpx-usage__history-title {
	margin: 0 0 var(--arnpx-sp-3);
}

.arnpx-usage__empty {
	color: var(--arnpx-ink-faint);
	font-style: italic;
}

.arnpx-usage__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.arnpx-usage__table th,
.arnpx-usage__table td {
	padding: var(--arnpx-sp-2) var(--arnpx-sp-3);
	text-align: left;
	border-bottom: 1px solid var(--arnpx-hair);
}

.arnpx-usage__table th {
	color: var(--arnpx-ink-dim);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .03em;
	text-transform: uppercase;
	border-bottom-color: var(--arnpx-grid);
}

.arnpx-usage__col-amount,
.arnpx-usage__cell-amount {
	text-align: right;
}

.arnpx-usage__cell-amount.num,
.arnpx-usage__cell-ref,
.arnpx-usage__cell-time {
	font-family: var(--arnpx-f-mono);
}

.arnpx-usage__cell-ref {
	color: var(--arnpx-ink-faint);
	font-size: 12px;
}

.arnpx-usage__row.is-credit .arnpx-usage__cell-amount {
	color: var(--arnpx-green);
}

.arnpx-usage__row.is-debit .arnpx-usage__cell-amount {
	color: var(--arnpx-red);
}

.arnpx-usage__row.is-zero .arnpx-usage__cell-amount {
	color: var(--arnpx-ink-faint);
}

/* ===================================================================== *
 * My Sites panel.
 * ===================================================================== */
.arnpx-sites__intro {
	color: var(--arnpx-ink-dim);
	margin: 0 0 var(--arnpx-sp-4);
}

.arnpx-sites__list {
	list-style: none;
	margin: 0 0 var(--arnpx-sp-5);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--arnpx-sp-4);
}

.arnpx-sites__list li {
	list-style: none;
}

/* Empty / error states. */
.arnpx-sites--empty .arnpx-sites__empty-title,
.arnpx-sites__empty-title {
	font-family: var(--arnpx-f-ui);
	font-weight: 700;
	color: var(--arnpx-ink);
	margin: 0 0 var(--arnpx-sp-2);
}

.arnpx-sites__empty-body {
	color: var(--arnpx-ink-faint);
}

/* Per-site card. */
.arnpx-site {
	background: var(--arnpx-panel);
	border: 1px solid var(--arnpx-grid);
	border-left: 3px solid var(--arnpx-grid-2);
	border-radius: var(--arnpx-radius);
	padding: var(--arnpx-sp-4);
}

.arnpx-site--healthy { border-left-color: var(--arnpx-green); }
.arnpx-site--syncing { border-left-color: var(--arnpx-amber); }
.arnpx-site--attention { border-left-color: var(--arnpx-error); }
.arnpx-site--unknown { border-left-color: var(--arnpx-grid-2); }

.arnpx-site__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--arnpx-sp-2);
	margin-bottom: var(--arnpx-sp-2);
}

.arnpx-site__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--arnpx-ink);
	word-break: break-word;
}

.arnpx-site__health {
	margin: 0 0 var(--arnpx-sp-3);
	font-size: 13px;
	color: var(--arnpx-ink-dim);
}

.arnpx-site__health--healthy { color: var(--arnpx-green); }
.arnpx-site__health--syncing { color: var(--arnpx-amber); }
.arnpx-site__health--attention { color: var(--arnpx-error); }

.arnpx-site__meta {
	margin: 0 0 var(--arnpx-sp-3);
	display: grid;
	gap: var(--arnpx-sp-1);
	font-size: 13px;
}

.arnpx-site__row {
	display: flex;
	justify-content: space-between;
	gap: var(--arnpx-sp-3);
}

.arnpx-site__row dt {
	color: var(--arnpx-ink-faint);
	margin: 0;
}

.arnpx-site__row dd {
	margin: 0;
	color: var(--arnpx-ink);
	font-family: var(--arnpx-f-mono);
	text-align: right;
}

.arnpx-site__row code {
	background: var(--arnpx-well);
	padding: 1px 5px;
	border-radius: var(--arnpx-radius);
	font-family: var(--arnpx-f-mono);
	font-size: 12px;
	color: var(--arnpx-ink-dim);
}

.arnpx-site__connect {
	margin: 0 0 var(--arnpx-sp-3);
	font-size: 13px;
	color: var(--arnpx-ink-faint);
}

.arnpx-site__connect--ok { color: var(--arnpx-green); }
.arnpx-site__connect--pending { color: var(--arnpx-amber); }

.arnpx-site__actions {
	margin: 0;
}

/* ===================================================================== *
 * State badges (.arnpx-badge --green/amber/red/grey).
 * ===================================================================== */
.arnpx-badge {
	display: inline-block;
	flex: none;
	padding: 2px var(--arnpx-sp-2);
	font-family: var(--arnpx-f-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-radius: var(--arnpx-radius);
	border: 1px solid currentColor;
	white-space: nowrap;
}

.arnpx-badge--green {
	color: var(--arnpx-green);
	background: rgba(63, 122, 74, .12);
}

.arnpx-badge--amber {
	color: var(--arnpx-amber);
	background: rgba(138, 90, 31, .12);
}

.arnpx-badge--red {
	color: var(--arnpx-error);
	background: rgba(154, 53, 53, .12);
}

.arnpx-badge--grey {
	color: var(--arnpx-ink-dim);
	background: var(--arnpx-panel-2);
}

/* ===================================================================== *
 * Buy Tokens panel.
 * ===================================================================== */
.arnpx-panel--buy__note {
	color: var(--arnpx-ink-faint);
	font-size: 13px;
	margin: var(--arnpx-sp-2) 0 var(--arnpx-sp-4);
}

.arnpx-card--package {
	display: flex;
	flex-direction: column;
}

.arnpx-card--package .arnpx-card__cta {
	margin-top: auto;
}

/* ===================================================================== *
 * Download Plugin panel (copyfield, creds, deflist, steps).
 * ===================================================================== */
.arnpx-copyfield {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--arnpx-sp-2);
	margin: var(--arnpx-sp-2) 0;
}

.arnpx-copyfield__value {
	flex: 1 1 200px;
	min-width: 0;
	padding: var(--arnpx-sp-2) var(--arnpx-sp-3);
	background: var(--arnpx-well);
	border: 1px solid var(--arnpx-grid-2);
	border-radius: var(--arnpx-radius);
	font-family: var(--arnpx-f-mono);
	font-size: 13px;
	color: var(--arnpx-ink);
	overflow-x: auto;
	white-space: nowrap;
}

.arnpx-creds,
.arnpx-deflist {
	margin: var(--arnpx-sp-3) 0;
}

.arnpx-deflist dt {
	color: var(--arnpx-ink-faint);
	font-size: 12px;
	letter-spacing: .03em;
	text-transform: uppercase;
	margin-top: var(--arnpx-sp-2);
}

.arnpx-deflist dd {
	margin: 0 0 var(--arnpx-sp-2);
	color: var(--arnpx-ink);
	font-family: var(--arnpx-f-mono);
	word-break: break-word;
}

.arnpx-steps {
	margin: var(--arnpx-sp-3) 0;
	padding-left: var(--arnpx-sp-5);
	color: var(--arnpx-ink-dim);
}

.arnpx-steps li {
	margin: var(--arnpx-sp-1) 0;
}

.arnpx-card--connect.arnpx-card--notlinked {
	border-color: var(--arnpx-amber);
}

/* ===================================================================== *
 * Onboarding panel.
 * ===================================================================== */
.arnpx-onboarding {
	background: var(--arnpx-panel);
	border: 1px solid var(--arnpx-grid);
	border-radius: var(--arnpx-radius);
	padding: var(--arnpx-sp-4);
	margin: 0 0 var(--arnpx-sp-4);
}

.arnpx-onboarding__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--arnpx-sp-3);
	margin-bottom: var(--arnpx-sp-3);
}

.arnpx-onboarding__title {
	margin: 0;
	font-family: var(--arnpx-f-ui);
	font-weight: 700;
	color: var(--arnpx-ink);
}

.arnpx-onboarding__label,
.arnpx-onboarding__note {
	color: var(--arnpx-ink-faint);
	font-size: 13px;
}

.arnpx-onboarding__progress {
	font-family: var(--arnpx-f-mono);
	color: var(--arnpx-red);
	font-weight: 700;
}

.arnpx-onboarding__steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.arnpx-onboarding__step {
	display: flex;
	align-items: center;
	gap: var(--arnpx-sp-3);
	padding: var(--arnpx-sp-2) 0;
	border-bottom: 1px solid var(--arnpx-hair);
	color: var(--arnpx-ink);
}

.arnpx-onboarding__step:last-child {
	border-bottom: none;
}

.arnpx-onboarding__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--arnpx-grid-2);
	font-size: 12px;
}

.arnpx-onboarding__step.is-done {
	color: var(--arnpx-ink-dim);
}

.arnpx-onboarding__step.is-done .arnpx-onboarding__mark {
	color: var(--arnpx-green);
	border-color: var(--arnpx-green);
	background: rgba(63, 122, 74, .1);
}

.arnpx-onboarding__step.is-todo .arnpx-onboarding__mark {
	color: var(--arnpx-amber);
	border-color: var(--arnpx-amber);
}

.arnpx-onboarding__allset {
	color: var(--arnpx-green);
	font-weight: 700;
}

/* ===================================================================== *
 * Profile panel.
 * ===================================================================== */
.arnpx-card--profile .arnpx-deflist,
.arnpx-card--profile-edit .arnpx-form {
	margin: 0;
}

/* ===================================================================== *
 * Auth UI (login / register cards, rendered outside the portal shell).
 * ===================================================================== */
.arnpx-auth {
	max-width: 460px;
	margin: var(--arnpx-sp-6) auto;
	padding: var(--arnpx-sp-5);
	color: var(--arnpx-ink);
	font-family: var(--arnpx-f-ui);
	background: var(--arnpx-panel);
	border: 1px solid var(--arnpx-grid);
	border-top: 2px solid var(--arnpx-blood);
	border-radius: var(--arnpx-radius);
}

.arnpx-auth__heading {
	margin: 0 0 var(--arnpx-sp-4);
	font-family: var(--arnpx-f-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--arnpx-ink);
}

.arnpx-auth__field {
	margin: 0 0 var(--arnpx-sp-3);
}

.arnpx-auth__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--arnpx-sp-3);
	margin-top: var(--arnpx-sp-4);
}

.arnpx-auth__note,
.arnpx-auth__login,
.arnpx-auth__register {
	font-size: 13px;
	color: var(--arnpx-ink-faint);
}

.arnpx-auth__error,
.arnpx-auth__errors {
	margin: 0 0 var(--arnpx-sp-3);
	padding: var(--arnpx-sp-2) var(--arnpx-sp-3);
	color: var(--arnpx-ink);
	background: rgba(154, 53, 53, .08);
	border-left: 3px solid var(--arnpx-error);
	border-radius: var(--arnpx-radius);
	font-size: 13px;
}

/* ===================================================================== *
 * Responsive: collapse to a single column on small screens (< 782px,
 * matching the WP mobile breakpoint).
 * ===================================================================== */
@media (max-width: 782px) {
	.arnpx-portal {
		grid-template-columns: 1fr;
		gap: var(--arnpx-sp-4);
	}

	.arnpx-portal__nav {
		position: static;
	}

	.arnpx-portal__nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--arnpx-sp-1);
	}

	.arnpx-portal__navlink {
		border-left: none;
		border-bottom: 3px solid transparent;
		border-radius: var(--arnpx-radius) var(--arnpx-radius) 0 0;
	}

	.arnpx-portal__navlink:hover,
	.arnpx-portal__navlink:focus-visible {
		border-left-color: transparent;
		border-bottom-color: var(--arnpx-blood);
	}

	.arnpx-portal__navlink.is-active {
		background: var(--arnpx-maroon);
		border-left-color: transparent;
		border-bottom-color: var(--arnpx-red);
	}

	.arnpx-add-site {
		grid-template-columns: 1fr;
	}

	.arnpx-usage__balance-value {
		font-size: 40px;
	}
}

/* ── #1195 — USD wallet surface (dollars are the customer-facing money unit) ── */

/* Primary wallet-balance card: brighter accent + larger metric than the
   secondary (token) card, so dollars read as the headline figure. */
.arnpx-card--usd.arnpx-card--primary {
	border-top: 3px solid var(--arnpx-red);
}
.arnpx-card--usd.arnpx-card--primary .arnpx-card__metric {
	font-size: 48px;
	color: var(--arnpx-red);
}

/* Secondary token card: dimmed, smaller metric — informational only. */
.arnpx-card--secondary {
	opacity: .82;
}
.arnpx-card--secondary .arnpx-card__metric {
	font-size: 26px;
	color: var(--arnpx-ink-dim);
	text-shadow: none;
}

/* USD usage table (dashboard + usage panel). */
.arnpx-card--usd-usage,
.arnpx-usage__history--usd {
	grid-column: 1 / -1;
}
.arnpx-usd-usage__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--arnpx-f-mono);
	font-size: 13px;
}
.arnpx-usd-usage__table th,
.arnpx-usd-usage__table td {
	padding: var(--arnpx-sp-2) var(--arnpx-sp-3);
	border-bottom: 1px solid var(--arnpx-hair);
	text-align: left;
}
.arnpx-usd-usage__table td.num,
.arnpx-usd-usage__table th.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.arnpx-usd-usage__table .is-debit td.arnpx-usage__cell-amount,
.arnpx-usd-usage__table .is-debit td:last-child.num {
	color: var(--arnpx-ink);
}

/* USD headline (usage panel) — the dollar balance above the token balance. */
.arnpx-usage__headline--usd .arnpx-usage__balance-value {
	color: var(--arnpx-red);
}
.arnpx-usage__headline--tokens .arnpx-usage__balance-value {
	color: var(--arnpx-ink-dim);
}

/* wp#31 — per-site delete/unlink danger zone. */
.arnpx-site__danger { margin-top: 1rem; border-top: 1px solid rgba(220, 53, 69, 0.25); padding-top: 0.5rem; }
.arnpx-site__danger-summary { color: #b02a37; cursor: pointer; font-size: 0.9em; }
.arnpx-site__danger-warning { color: #b02a37; font-size: 0.9em; }
.arnpx-delete-site { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.arnpx-delete-site label { flex-basis: 100%; font-size: 0.9em; }
.arnpx-btn--danger { background: #b02a37; border-color: #b02a37; color: #fff; }
.arnpx-btn--danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===================================================================== *
 * wp#33 — flattened My Account integration + base-site styling pass.
 * The portal now lives as individual WooCommerce my-account endpoints, so
 * these rules dress the whole /my-account/ surface in the arneiron-g look
 * and provide the in-row trash controls. Scoped under .woocommerce-account
 * so nothing leaks to the rest of the site.
 * ===================================================================== */

/* Base-site look on the my-account shell: inherit theme tokens, comfortable
 * rhythm, and the site font. */
.woocommerce-account .woocommerce {
	--arnpx-base:      var(--c-base, #ffffff);
	--arnpx-panel:     var(--c-panel, #f6f7f9);
	--arnpx-red:       #b02a37; /* pinned — --c-signal maps to the grey accent (wp#59) */
	--arnpx-ink:       var(--c-ink, #14181f);
	--arnpx-ink-dim:   var(--c-ink-dim, #4b5462);
	--arnpx-hair:      var(--c-hair, #d7dbe2);
	font-family: var(--font-ui, inherit);
	color: var(--arnpx-ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--arnpx-hair, #d7dbe2);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.7rem 0.9rem;
	color: var(--arnpx-ink-dim, #4b5462);
	text-decoration: none;
	font-size: 0.98rem;
	line-height: 1.3;
	transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--arnpx-panel, #f6f7f9);
	color: var(--arnpx-red, #b02a37);
}
.woocommerce-account .woocommerce-MyAccount-content {
	padding: 0.25rem 0 1rem;
}
/* Flattened single-panel wrapper (render_panel): no sidebar, just heading + body. */
.arnpx-portal--flat { max-width: 60rem; }
.arnpx-portal--flat .arnpx-portal__title {
	font-size: clamp(1.25rem, 2.6vw, 1.7rem);
	margin: 0 0 1rem;
}

/* ArneIron site field folded into edit-account. */
.arnpx-editaccount { border: 0; margin: 1.25rem 0 0; padding: 0; }
.arnpx-editaccount legend {
	font-weight: 600;
	color: var(--arnpx-red, #b02a37);
	padding: 0;
	margin: 0 0 0.5rem;
}

/* Red trash-icon buttons (in-row delete for sites + chats). */
.arnpx-btn--trash {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid var(--arnpx-red, #b02a37);
	border-radius: 6px;
	background: transparent;
	color: var(--arnpx-red, #b02a37);
	cursor: pointer;
	line-height: 0;
	transition: background 0.15s ease, color 0.15s ease;
}
.arnpx-btn--trash:hover,
.arnpx-btn--trash:focus-visible {
	background: var(--arnpx-red, #b02a37);
	color: #fff;
	outline: none;
}

/* Sites: trash sits in the card head row, pushed to the right. */
.arnpx-site__head { display: flex; align-items: center; gap: 0.5rem; }
.arnpx-site__title { flex: 1 1 auto; margin: 0; }
.arnpx-site__trash { flex: 0 0 auto; margin-left: auto; }
.arnpx-site__danger[hidden] { display: none; }

/* Chat history: each row is a flex line with the trash on the right. */
.arnpx-history__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--arnpx-hair, #d7dbe2);
}
.arnpx-history__link { flex: 1 1 auto; color: var(--arnpx-ink, #14181f); }
.arnpx-history__meta { flex: 0 0 auto; color: var(--arnpx-ink-dim, #4b5462); font-size: 0.85em; }
.arnpx-history__delete { flex: 0 0 auto; margin: 0; }

/* ---- Responsive: mobile-first, stack the my-account nav above content ---- */
@media (max-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: 100%;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem;
		border: 0;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li {
		border: 1px solid var(--arnpx-hair, #d7dbe2);
		border-radius: 6px;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li a { padding: 0.5rem 0.75rem; }
	.arnpx-history__item { flex-wrap: wrap; }
	.arnpx-history__meta { flex-basis: 100%; order: 3; }
	.arnpx-site__head { flex-wrap: wrap; }
}

/* ---- wp task 5: general download block folded into the My Sites panel ---- */
.arnpx-sites__download {
	margin-top: 1.5rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--arnpx-hair, #d7dbe2);
	border-radius: 8px;
	background: var(--arnpx-panel, #f6f7f9);
}
.arnpx-sites__download-title {
	font-weight: 600;
	font-size: 1.05rem;
	margin: 0 0 0.35rem;
	color: var(--arnpx-ink, #14181f);
}
.arnpx-sites__download-body {
	margin: 0 0 0.75rem;
	color: var(--arnpx-ink-dim, #4b5462);
}
.arnpx-sites__download-action { margin: 0; }

/* ---- wp task 4: usage view appended below the woo-wallet My Wallet tab ---- */
.arnpx-wallet-usage {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--arnpx-hair, #d7dbe2);
}
.arnpx-wallet-usage .arnpx-portal__title {
	font-size: 1.25rem;
	margin: 0 0 1rem;
}
.arnpx-wallet-usage .arnpx-usage__table { width: 100%; }
@media (max-width: 768px) {
	.arnpx-wallet-usage .arnpx-usage__table { display: block; overflow-x: auto; }
	.arnpx-sites__download { padding: 0.85rem 0.9rem; }
}

/* ---- wp task 6: pruned-menu polish (readability inside flat panels) ---- */
/* Flat single-panel headings were near-invisible (dim red on the dark panel). */
.arnpx-portal--flat .arnpx-portal__title,
.arnpx-sites__download-title {
	color: var(--arnpx-ink, #14181f);
}
/* Graceful-degradation notices (e.g. hub temporarily unreachable) must read. */
.arnpx-usage__notice {
	color: var(--arnpx-ink, #14181f);
	margin: 0;
	padding: 0.6rem 0.75rem;
}
/* Breathing room for the panels embedded in my-account / the wallet tab. */
.arnpx-wallet-usage .arnpx-portal--flat,
.woocommerce-account .arnpx-portal--flat {
	padding: 1rem 1.25rem;
	box-sizing: border-box;
}
/* -------------------------------------------------------------------------
 * "Connect your AI (MCP)" panel — epic #806 / U1 #807 / WS-09 #977.
 * ---------------------------------------------------------------------- */
.arnpx-mcp__intro p { margin: 6px 0 0; }
.arnpx-mcp__endpoint code,
.arnpx-mcp__token code {
	background: var(--arnpx-well);
	padding: 1px 6px;
	border-radius: var(--arnpx-radius);
	font-family: var(--arnpx-f-mono);
	font-size: 12px;
	color: var(--arnpx-ink-dim);
}
.arnpx-mcp__client p { margin: 0 0 var(--arnpx-sp-2); color: var(--arnpx-ink-dim); }
.arnpx-mcp__client .arnpx-copyfield__value { font-size: 12px; }
.arnpx-mcp__download.arnpx-card { border-top: 2px solid var(--arnpx-blood); }