/*
 * Resume builder interface.
 *
 * Everything is scoped under .arb-app and every inherited property a theme could
 * override — font, size, line height, colour, margin, radius — is set explicitly.
 * A resume builder that looks different on every theme looks broken, so the app
 * deliberately does not inherit the surrounding design.
 */

.arb-app {
	/* Brand */
	--arb-brand: #4f46e5;
	--arb-brand-dark: #4338ca;
	--arb-brand-soft: #eef2ff;
	--arb-brand-ring: rgba( 79, 70, 229, 0.16 );

	/* Surfaces */
	--arb-bg: #f6f7fb;
	--arb-surface: #ffffff;
	--arb-surface-2: #fafbfd;
	--arb-line: #e5e7ef;
	--arb-line-strong: #d3d7e4;

	/* Text */
	--arb-ink: #101828;
	--arb-ink-2: #344054;
	--arb-muted: #667085;
	--arb-faint: #98a2b3;

	/* Status */
	--arb-ok: #067647;
	--arb-ok-soft: #ecfdf3;
	--arb-warn: #b54708;
	--arb-warn-soft: #fffaeb;
	--arb-danger: #b42318;
	--arb-danger-soft: #fef3f2;

	/* Shape */
	--arb-r-sm: 8px;
	--arb-r: 12px;
	--arb-r-lg: 16px;
	--arb-shadow-sm: 0 1px 2px rgba( 16, 24, 40, 0.06 );
	--arb-shadow: 0 1px 3px rgba( 16, 24, 40, 0.08 ), 0 12px 28px -18px rgba( 16, 24, 40, 0.35 );
	--arb-shadow-lg: 0 2px 6px rgba( 16, 24, 40, 0.06 ), 0 24px 48px -24px rgba( 16, 24, 40, 0.4 );

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: var( --arb-ink );
	text-align: left;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;

	/* The app supplies its own canvas. Without this the panels float on whatever
	   the theme's page background happens to be and the depth cues collapse. */
	background: var( --arb-bg );
	padding: 26px;
	border-radius: var( --arb-r-lg );
}

@media ( max-width: 600px ) {
	.arb-app {
		padding: 16px;
		border-radius: 0;
	}
}

.arb-app *,
.arb-app *::before,
.arb-app *::after {
	box-sizing: inherit;
}

/* Themes love to style bare elements. Neutralise inside the app. */
.arb-app h1,
.arb-app h2,
.arb-app h3,
.arb-app h4,
.arb-app p,
.arb-app ul,
.arb-app ol,
.arb-app li,
.arb-app figure {
	margin: 0;
	padding: 0;
	font-family: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.arb-app ul,
.arb-app ol {
	list-style: none;
}

.arb-app button,
.arb-app input,
.arb-app select,
.arb-app textarea {
	font-family: inherit;
	color: inherit;
}

.arb-app__loading {
	padding: 72px 0;
	text-align: center;
	color: var( --arb-muted );
	font-size: 15px;
}

/* ==================================================================
 * Loader
 * ================================================================== */

.arb-loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 56px 20px 60px;
	text-align: center;
}

.arb-loader__paper {
	position: relative;
	width: 150px;
	padding: 20px 18px 22px;
	background: #fff;
	border: 1px solid var( --arb-line );
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba( 16, 24, 40, 0.06 ), 0 26px 44px -26px rgba( 16, 24, 40, 0.5 );
	animation: arb-loader-float 3.4s ease-in-out infinite;
}

@keyframes arb-loader-float {
	0%, 100% { transform: translateY( 0 ) rotate( -1deg ); }
	50% { transform: translateY( -9px ) rotate( 1deg ); }
}

.arb-loader__paper > span {
	display: block;
	border-radius: 3px;
}

.arb-loader__name {
	height: 11px;
	width: 62%;
	background: var( --arb-brand );
	margin-bottom: 7px;
	transform-origin: left center;
	animation: arb-loader-write 2.2s ease-in-out infinite;
}

.arb-loader__rule {
	height: 2px;
	width: 100%;
	background: var( --arb-line-strong );
	margin-bottom: 12px;
}

/* Each line "writes" itself in turn, so the wait reads as work being done. */
.arb-loader__line {
	height: 6px;
	background: #e4e7f0;
	margin-bottom: 7px;
	transform: scaleX( 0.15 );
	transform-origin: left center;
	animation: arb-loader-write 2.2s ease-in-out infinite;
	animation-delay: calc( var( --i ) * 0.16s );
}

.arb-loader__line:nth-child( odd ) {
	width: 92%;
}

.arb-loader__line:nth-child( even ) {
	width: 74%;
}

@keyframes arb-loader-write {
	0% { transform: scaleX( 0.12 ); opacity: 0.45; }
	45% { transform: scaleX( 1 ); opacity: 1; }
	85% { transform: scaleX( 1 ); opacity: 1; }
	100% { transform: scaleX( 0.12 ); opacity: 0.45; }
}

.arb-loader__caption {
	font-size: 15px;
	font-weight: 620;
	color: var( --arb-ink-2 );
	transition: opacity 0.22s ease;
	min-height: 22px;
}

.arb-loader__dots {
	display: flex;
	gap: 7px;
}

.arb-loader__dots span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --arb-brand );
	animation: arb-loader-dot 1.3s ease-in-out infinite both;
}

.arb-loader__dots span:nth-child( 2 ) { animation-delay: 0.16s; }
.arb-loader__dots span:nth-child( 3 ) { animation-delay: 0.32s; }

@keyframes arb-loader-dot {
	0%, 80%, 100% { transform: scale( 0.55 ); opacity: 0.4; }
	40% { transform: scale( 1 ); opacity: 1; }
}

.arb-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 246, 247, 251, 0.86 );
	backdrop-filter: blur( 4px );
	animation: arb-fade 0.2s ease both;
}

/* ==================================================================
 * Typography
 * ================================================================== */

.arb-display {
	font-size: 30px;
	line-height: 1.2;
	font-weight: 750;
	letter-spacing: -0.6px;
	color: var( --arb-ink );
}

.arb-h2 {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.2px;
}

.arb-h3 {
	font-size: 15px;
	line-height: 1.4;
	font-weight: 650;
}

.arb-lede {
	font-size: 15px;
	color: var( --arb-muted );
	max-width: 62ch;
}

.arb-meta {
	font-size: 13px;
	line-height: 1.45;
	color: var( --arb-muted );
}

/* ==================================================================
 * Page chrome
 * ================================================================== */

.arb-topbar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 20px;
}

.arb-topbar__text {
	min-width: 0;
}

.arb-topbar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* Plan bar ---------------------------------------------------------- */

.arb-planbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding: 12px 16px;
	margin-bottom: 20px;
	background: var( --arb-surface );
	border: 1px solid var( --arb-line );
	border-radius: var( --arb-r );
	box-shadow: var( --arb-shadow-sm );
}

.arb-planbar__pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 650;
	padding: 5px 11px;
	border-radius: 999px;
	background: var( --arb-brand-soft );
	color: var( --arb-brand-dark );
}

.arb-planbar__summary {
	font-size: 13px;
	color: var( --arb-muted );
	flex: 1 1 auto;
	min-width: 160px;
}

.arb-planbar__toggle {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	background: none;
	border: 0;
	padding: 4px 2px;
	color: var( --arb-brand );
	cursor: pointer;
	border-radius: 4px;
}

.arb-planbar__toggle:hover {
	text-decoration: underline;
}

.arb-credits {
	display: none;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
	padding-top: 10px;
	margin-top: 2px;
	border-top: 1px solid var( --arb-line );
}

.arb-credits.is-open {
	display: flex;
}

.arb-credits__item {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-size: 12.5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var( --arb-surface-2 );
	border: 1px solid var( --arb-line );
	color: var( --arb-muted );
}

.arb-credits__item strong {
	font-weight: 700;
	color: var( --arb-ink );
	font-variant-numeric: tabular-nums;
}

.arb-credits__item--out strong {
	color: var( --arb-danger );
}

/* ==================================================================
 * Buttons
 * ================================================================== */

.arb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 10px 16px;
	border-radius: var( --arb-r-sm );
	border: 1px solid var( --arb-line-strong );
	background: var( --arb-surface );
	color: var( --arb-ink-2 );
	cursor: pointer;
	text-decoration: none;
	box-shadow: var( --arb-shadow-sm );
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.06s ease;
}

.arb-btn:hover:not( [disabled] ) {
	background: var( --arb-surface-2 );
	border-color: var( --arb-line-strong );
	color: var( --arb-ink );
}

.arb-btn:active:not( [disabled] ) {
	transform: translateY( 1px );
}

.arb-btn:focus-visible {
	outline: 3px solid var( --arb-brand-ring );
	outline-offset: 1px;
	border-color: var( --arb-brand );
}

.arb-btn[disabled],
.arb-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.arb-btn--primary {
	background: var( --arb-brand );
	border-color: var( --arb-brand );
	color: #fff;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.08 ), 0 8px 18px -10px var( --arb-brand );
}

.arb-btn--primary:hover:not( [disabled] ) {
	background: var( --arb-brand-dark );
	border-color: var( --arb-brand-dark );
	color: #fff;
}

.arb-btn--lg {
	font-size: 15px;
	padding: 12px 22px;
	border-radius: 10px;
}

.arb-btn--sm {
	font-size: 13px;
	padding: 7px 11px;
	gap: 5px;
}

.arb-btn--ghost {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	color: var( --arb-muted );
}

.arb-btn--ghost:hover:not( [disabled] ) {
	background: var( --arb-surface-2 );
	color: var( --arb-ink );
}

.arb-btn--danger {
	color: var( --arb-danger );
	border-color: #f4c4c0;
	background: var( --arb-surface );
}

.arb-btn--danger:hover:not( [disabled] ) {
	background: var( --arb-danger-soft );
}

.arb-btn__icon {
	font-size: 15px;
	line-height: 1;
}

/* ==================================================================
 * Dashboard
 * ================================================================== */

.arb-cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 18px;
}

.arb-card {
	display: flex;
	flex-direction: column;
	background: var( --arb-surface );
	border: 1px solid var( --arb-line );
	border-radius: var( --arb-r-lg );
	overflow: hidden;
	box-shadow: var( --arb-shadow-sm );
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.arb-card:hover {
	box-shadow: var( --arb-shadow );
	border-color: var( --arb-line-strong );
	transform: translateY( -2px );
}

/* The card preview is the real resume, rendered by the server and scaled down.
   The iframe is laid out at true A4 width and transformed, so text stays crisp
   instead of being resampled. */
/* Full A4 proportions, so the entire first page is visible rather than a crop. */
.arb-card__thumb {
	position: relative;
	aspect-ratio: 1 / 1.414;
	background: #fff;
	border-bottom: 1px solid var( --arb-line );
	overflow: hidden;

	/* Makes the card's own width available to its children as cqw units, so the
	   page can scale itself with no measurement and no script. */
	container-type: inline-size;
}

.arb-card__frame {
	display: block;
	width: 794px;
	height: 1123px;
	border: 0;
	background: #fff;
	transform-origin: top left;
	pointer-events: none;

	/* 794px is the A4 width the page is laid out at. Dividing the card's own width
	   by it gives the exact scale at any card size, with no hardcoded value that
	   can be right at one width and wrong at every other. */
	transform: scale( calc( 100cqw / 794 ) );
}

/* Fallback for browsers without container query units: scale from the viewport
   using the same grid maths the cards use, then let script refine it. */
@supports not ( width: 1cqw ) {
	.arb-card__frame {
		transform: scale( 0.44 );
	}
}

/* The whole page now fits, so only the very foot needs softening. */
.arb-card__thumb-veil {
	position: absolute;
	inset: auto 0 0 0;
	height: 26px;
	background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), #fff );
	pointer-events: none;
}

/* Skeleton shown while the preview renders, so a card is never blank. */
.arb-card__thumb::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient( 90deg, transparent 0%, rgba( 255, 255, 255, 0.75 ) 50%, transparent 100% ) 0 0 / 220% 100%,
		linear-gradient( #eef0f6, #eef0f6 );
	animation: arb-sweep 1.5s ease-in-out infinite;
	opacity: 1;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.arb-card__thumb.is-loaded::before {
	opacity: 0;
}

@keyframes arb-sweep {
	from { background-position: -120% 0, 0 0; }
	to { background-position: 220% 0, 0 0; }
}

.arb-card__thumb.is-empty {
	background: linear-gradient( 160deg, #eff1f7, #e7eaf3 );
}

.arb-card__thumb.is-empty .arb-card__frame {
	display: none;
}

.arb-card__body {
	padding: 14px 16px 0;
	flex: 1 1 auto;
	min-width: 0;
}

.arb-card__title {
	font-size: 15.5px;
	font-weight: 680;
	line-height: 1.35;
	overflow-wrap: anywhere;
	margin-bottom: 4px;
}

.arb-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 12.5px;
	color: var( --arb-muted );
}

.arb-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 14px 16px 16px;
}

.arb-card__actions .arb-btn {
	flex: 0 0 auto;
}

/* Empty state ------------------------------------------------------- */

.arb-empty {
	text-align: center;
	padding: 56px 24px 60px;
	background:
		radial-gradient( 900px 300px at 50% -10%, var( --arb-brand-soft ), transparent 70% ),
		var( --arb-surface );
	border: 1px solid var( --arb-line );
	border-radius: var( --arb-r-lg );
	box-shadow: var( --arb-shadow-sm );
}

.arb-empty__art {
	width: 76px;
	height: 96px;
	margin: 0 auto 22px;
	border-radius: 6px;
	background: #fff;
	border: 1px solid var( --arb-line-strong );
	box-shadow: var( --arb-shadow );
	padding: 11px 10px;
	position: relative;
}

.arb-empty__art span {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: #e3e6ef;
	margin-bottom: 5px;
}

.arb-empty__art span:first-child {
	width: 60%;
	height: 7px;
	background: var( --arb-brand );
	margin-bottom: 9px;
}

.arb-empty__title {
	font-size: 22px;
	font-weight: 720;
	letter-spacing: -0.3px;
	margin-bottom: 8px;
}

.arb-empty__text {
	font-size: 15px;
	color: var( --arb-muted );
	max-width: 44ch;
	margin: 0 auto 22px;
}

/* ==================================================================
 * Editor shell
 * ================================================================== */

.arb-editor-bar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0 14px;
	margin-bottom: 18px;
	background: linear-gradient( to bottom, var( --arb-bg ) 70%, rgba( 246, 247, 251, 0 ) );
	border-bottom: 1px solid var( --arb-line );
}

.arb-editor-bar__group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	min-width: 0;
}

.arb-title-input {
	font: inherit;
	font-size: 17px;
	font-weight: 680;
	letter-spacing: -0.2px;
	border: 1px solid transparent;
	background: transparent;
	padding: 6px 10px;
	border-radius: var( --arb-r-sm );
	min-width: 200px;
	max-width: 46vw;
	color: var( --arb-ink );
}

.arb-title-input:hover {
	background: var( --arb-surface );
	border-color: var( --arb-line );
}

.arb-title-input:focus {
	background: #fff;
	border-color: var( --arb-brand );
	outline: 3px solid var( --arb-brand-ring );
	outline-offset: 0;
}

.arb-progress {
	height: 4px;
	border-radius: 999px;
	background: var( --arb-line );
	overflow: hidden;
	margin-bottom: 16px;
}

.arb-progress__fill {
	height: 100%;
	background: var( --arb-brand );
	border-radius: 999px;
	transition: width 0.25s ease;
}

/* The document is the point of the screen, so it gets the wider column. The form
   reads fine at 400px; a resume squeezed into 45% of the width does not. */
.arb-shell {
	display: grid;
	grid-template-columns: minmax( 340px, 0.78fr ) minmax( 0, 1.22fr );
	gap: 22px;
	align-items: start;
}

@media ( max-width: 1400px ) {
	.arb-shell {
		grid-template-columns: minmax( 320px, 0.85fr ) minmax( 0, 1.15fr );
	}
}

.arb-panel {
	background: var( --arb-surface );
	border: 1px solid var( --arb-line );
	border-radius: var( --arb-r-lg );
	padding: 22px;
	min-width: 0;
	box-shadow: var( --arb-shadow-sm );
}

/* Descendant, not child: the step panels wrap their content one level deeper,
   so a child selector silently fell through to the theme's heading styles. */
.arb-panel h2 {
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.2px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var( --arb-line );
}

.arb-panel h3 {
	font-size: 15px;
	line-height: 1.4;
	font-weight: 650;
	margin: 24px 0 10px;
}

.arb-panel .arb-entry-card h3 {
	margin: 0;
}

.arb-preview-wrap {
	position: sticky;
	top: 78px;
	max-height: calc( 100vh - 100px );
	overflow: auto;
	background: linear-gradient( 180deg, #edeff6, #e6e9f2 );
	border: 1px solid var( --arb-line );
	border-radius: var( --arb-r-lg );
	padding: 0 0 12px;
}

.arb-preview-toolbar {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	background: rgba( 255, 255, 255, 0.92 );
	backdrop-filter: blur( 6px );
	border-bottom: 1px solid var( --arb-line );
	border-radius: var( --arb-r-lg ) var( --arb-r-lg ) 0 0;
}

.arb-preview-toolbar__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var( --arb-muted );
}

.arb-zoom {
	display: flex;
	align-items: center;
	gap: 2px;
	background: var( --arb-surface-2 );
	border: 1px solid var( --arb-line );
	border-radius: 999px;
	padding: 2px;
}

.arb-zoom__btn,
.arb-zoom__fit {
	font: inherit;
	font-size: 13px;
	font-weight: 650;
	line-height: 1;
	border: 0;
	background: transparent;
	color: var( --arb-ink-2 );
	cursor: pointer;
	border-radius: 999px;
	padding: 6px 10px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.arb-zoom__btn:hover,
.arb-zoom__fit:hover {
	background: var( --arb-brand-soft );
	color: var( --arb-brand-dark );
}

.arb-zoom__btn:focus-visible,
.arb-zoom__fit:focus-visible {
	outline: 3px solid var( --arb-brand-ring );
}

.arb-zoom__level {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var( --arb-muted );
	min-width: 40px;
	text-align: center;
}

/* The sheet is laid out at true page width and scaled, so wrapping and spacing
   match the PDF exactly instead of being squashed to the panel. */
.arb-preview-stage {
	padding: 14px 12px 0;
	overflow: hidden;
}

.arb-paper {
	transform-origin: top left;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba( 16, 24, 40, 0.14 ), 0 20px 40px -20px rgba( 16, 24, 40, 0.5 );
	transition: transform 0.18s ease;
}

.arb-preview-wrap .arb-page {
	width: 100%;
	padding: 46px 44px;
	box-shadow: none;
	border-radius: 0;
	background: transparent;
}

/* Step rail --------------------------------------------------------- */

.arb-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var( --arb-line );
}

.arb-steps__btn {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 13px;
	border: 1px solid var( --arb-line );
	border-radius: 999px;
	background: var( --arb-surface-2 );
	cursor: pointer;
	color: var( --arb-muted );
	transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.arb-steps__btn:hover {
	background: var( --arb-brand-soft );
	color: var( --arb-brand-dark );
	border-color: transparent;
}

.arb-steps__btn[aria-current="step"] {
	background: var( --arb-brand );
	border-color: var( --arb-brand );
	color: #fff;
}

.arb-steps__btn:focus-visible {
	outline: 3px solid var( --arb-brand-ring );
	outline-offset: 2px;
}

/* ==================================================================
 * Form controls
 * ================================================================== */

.arb-field {
	margin-bottom: 16px;
}

.arb-field__label {
	display: block;
	font-size: 13px;
	font-weight: 650;
	color: var( --arb-ink-2 );
	margin-bottom: 6px;
}

.arb-field__hint {
	display: block;
	font-size: 12.5px;
	color: var( --arb-faint );
	margin-top: 6px;
}

.arb-field__error {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --arb-danger );
	margin-top: 6px;
}

.arb-input,
.arb-textarea,
.arb-select {
	width: 100%;
	font: inherit;
	font-size: 14.5px;
	line-height: 1.5;
	padding: 10px 13px;
	border: 1px solid var( --arb-line-strong );
	border-radius: var( --arb-r-sm );
	background: #fff;
	color: var( --arb-ink );
	box-shadow: var( --arb-shadow-sm );
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.arb-input::placeholder,
.arb-textarea::placeholder {
	color: var( --arb-faint );
}

.arb-input:hover,
.arb-textarea:hover,
.arb-select:hover {
	border-color: #bcc2d4;
}

.arb-input:focus,
.arb-textarea:focus,
.arb-select:focus {
	border-color: var( --arb-brand );
	outline: none;
	box-shadow: 0 0 0 4px var( --arb-brand-ring );
}

.arb-input[aria-invalid="true"],
.arb-textarea[aria-invalid="true"] {
	border-color: #e6a29c;
	background: var( --arb-danger-soft );
}

.arb-textarea {
	min-height: 96px;
	resize: vertical;
}

.arb-select {
	appearance: none;
	background-image: linear-gradient( 45deg, transparent 50%, var( --arb-muted ) 50% ), linear-gradient( 135deg, var( --arb-muted ) 50%, transparent 50% );
	background-position: calc( 100% - 17px ) 50%, calc( 100% - 12px ) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 34px;
}

.arb-input[type="color"] {
	padding: 4px;
	height: 42px;
	cursor: pointer;
}

.arb-input[type="range"] {
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
	accent-color: var( --arb-brand );
}

.arb-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
}

.arb-checkbox {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	font-size: 14px;
	color: var( --arb-ink-2 );
	padding: 10px 0;
	cursor: pointer;
}

.arb-checkbox input {
	width: 17px;
	height: 17px;
	accent-color: var( --arb-brand );
	cursor: pointer;
}

/* ==================================================================
 * Repeatable entries
 * ================================================================== */

.arb-entries {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 14px;
}

.arb-entry-card {
	border: 1px solid var( --arb-line );
	border-radius: var( --arb-r );
	padding: 16px;
	background: var( --arb-surface-2 );
}

.arb-entry-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var( --arb-line );
}

.arb-entry-card__title {
	font-size: 14.5px;
	font-weight: 680;
	overflow-wrap: anywhere;
}

.arb-entry-card__actions {
	display: flex;
	gap: 4px;
	flex: 0 0 auto;
}

.arb-bullet-row {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
	align-items: flex-start;
}

.arb-bullet-row .arb-textarea {
	min-height: 52px;
}

.arb-bullet-row .arb-btn {
	flex: 0 0 auto;
	margin-top: 3px;
}

/* Section order ----------------------------------------------------- */

.arb-order {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.arb-order__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var( --arb-line );
	border-radius: var( --arb-r-sm );
	background: var( --arb-surface );
	cursor: grab;
	font-size: 14px;
	box-shadow: var( --arb-shadow-sm );
}

.arb-order__item:focus-visible {
	outline: 3px solid var( --arb-brand-ring );
	border-color: var( --arb-brand );
}

.arb-order__item.is-dragging {
	opacity: 0.5;
	border-color: var( --arb-brand );
	border-style: dashed;
}

.arb-order__handle {
	color: var( --arb-faint );
	font-size: 15px;
	line-height: 1;
	cursor: grab;
}

/* ==================================================================
 * Templates
 * ================================================================== */

.arb-templates {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 152px, 1fr ) );
	gap: 12px;
	margin-bottom: 8px;
}

.arb-template {
	position: relative;
	display: block;
	width: 100%;
	text-align: left;
	font: inherit;
	border: 2px solid var( --arb-line );
	border-radius: var( --arb-r );
	padding: 12px;
	background: var( --arb-surface );
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.arb-template:hover:not( [disabled] ) {
	border-color: #b9bed2;
	transform: translateY( -2px );
	box-shadow: var( --arb-shadow );
}

.arb-template[aria-pressed="true"] {
	border-color: var( --arb-brand );
	box-shadow: 0 0 0 4px var( --arb-brand-ring );
}

.arb-template[aria-pressed="true"]::after {
	content: "\2713";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var( --arb-brand );
	color: #fff;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	font-weight: 700;
}

.arb-template[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.arb-template__swatch {
	display: block;
	height: 6px;
	border-radius: 3px;
	margin-bottom: 10px;
}

.arb-template__name {
	display: block;
	font-size: 14px;
	font-weight: 650;
	margin-bottom: 3px;
}

.arb-template__desc {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: var( --arb-muted );
}

/* ==================================================================
 * Status, badges, notices
 * ================================================================== */

.arb-status {
	font-size: 13px;
	color: var( --arb-muted );
	min-height: 20px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.arb-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: transparent;
}

.arb-status--saving {
	color: var( --arb-warn );
}

.arb-status--saving::before {
	background: var( --arb-warn );
}

.arb-status--saved {
	color: var( --arb-ok );
}

.arb-status--saved::before {
	background: var( --arb-ok );
}

.arb-status--error {
	color: var( --arb-danger );
	font-weight: 600;
}

.arb-status--error::before {
	background: var( --arb-danger );
}

.arb-badge {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 7px;
	border-radius: 4px;
	background: #eef0f6;
	color: var( --arb-muted );
	margin-top: 8px;
	margin-right: 4px;
}

.arb-badge--pro {
	background: var( --arb-brand-soft );
	color: var( --arb-brand-dark );
}

.arb-notice {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	border: 1px solid var( --arb-line );
	border-left: 4px solid var( --arb-brand );
	background: var( --arb-surface );
	padding: 13px 15px;
	border-radius: var( --arb-r-sm );
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 1.5;
	box-shadow: var( --arb-shadow-sm );
}

.arb-notice ul {
	margin-top: 6px;
	padding-left: 18px;
	list-style: disc;
}

.arb-notice li {
	margin-bottom: 3px;
}

.arb-notice--error {
	border-left-color: var( --arb-danger );
	background: var( --arb-danger-soft );
}

.arb-notice--warn {
	border-left-color: var( --arb-warn );
	background: var( --arb-warn-soft );
}

.arb-notice--ok {
	border-left-color: var( --arb-ok );
	background: var( --arb-ok-soft );
}

/* ==================================================================
 * Modal
 * ================================================================== */

.arb-modal {
	position: fixed;
	inset: 0;
	background: rgba( 16, 24, 40, 0.55 );
	backdrop-filter: blur( 2px );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100000;
}

.arb-modal__box {
	background: #fff;
	border-radius: var( --arb-r-lg );
	padding: 24px;
	max-width: 440px;
	width: 100%;
	max-height: 90vh;
	overflow: auto;
	box-shadow: var( --arb-shadow-lg );
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
	color: var( --arb-ink );
}

.arb-modal__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
	letter-spacing: -0.2px;
}

.arb-modal__box p {
	margin: 0;
	font-size: 14.5px;
	color: var( --arb-muted );
	line-height: 1.55;
}

.arb-modal__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 22px;
}

/* ==================================================================
 * ATS report
 * ================================================================== */

.arb-score {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px;
	background: var( --arb-surface-2 );
	border: 1px solid var( --arb-line );
	border-radius: var( --arb-r );
	margin-bottom: 14px;
}

.arb-score__value {
	font-size: 34px;
	font-weight: 780;
	line-height: 1;
	letter-spacing: -1px;
	font-variant-numeric: tabular-nums;
}

.arb-meter {
	height: 9px;
	background: var( --arb-line );
	border-radius: 999px;
	overflow: hidden;
	flex: 1 1 auto;
}

.arb-meter__fill {
	height: 100%;
	border-radius: 999px;
	background: var( --arb-ok );
	transition: width 0.4s ease;
}

.arb-checklist {
	display: flex;
	flex-direction: column;
	font-size: 14px;
	border: 1px solid var( --arb-line );
	border-radius: var( --arb-r );
	overflow: hidden;
	margin-bottom: 14px;
}

.arb-checklist li {
	padding: 11px 14px;
	border-bottom: 1px solid var( --arb-line );
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var( --arb-surface );
}

.arb-checklist li:last-child {
	border-bottom: 0;
}

.arb-check--pass {
	color: var( --arb-ok );
	font-weight: 700;
}

.arb-check--fail {
	color: var( --arb-danger );
	font-weight: 700;
}

/* ==================================================================
 * Sticky footer nav
 * ================================================================== */

.arb-sticky-save {
	display: flex;
	gap: 8px;
	justify-content: space-between;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var( --arb-line );
}

/* ==================================================================
 * Toasts
 * ================================================================== */

.arb-toasts {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min( 380px, calc( 100vw - 40px ) );
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
}

.arb-toast {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 13px 14px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid #e5e7ef;
	box-shadow: 0 4px 12px rgba( 16, 24, 40, 0.1 ), 0 20px 40px -20px rgba( 16, 24, 40, 0.45 );
	font-size: 14px;
	line-height: 1.45;
	color: #101828;
	animation: arb-toast-in 0.26s cubic-bezier( 0.2, 0.9, 0.3, 1 ) both;
}

.arb-toast.is-leaving {
	animation: arb-toast-out 0.28s ease both;
}

@keyframes arb-toast-in {
	from {
		opacity: 0;
		transform: translateX( 24px ) scale( 0.97 );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes arb-toast-out {
	to {
		opacity: 0;
		transform: translateX( 24px );
	}
}

.arb-toast__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	background: #667085;
}

.arb-toast--ok .arb-toast__icon {
	background: #067647;
	animation: arb-tick 0.4s cubic-bezier( 0.2, 1.4, 0.4, 1 ) both;
}

.arb-toast--error .arb-toast__icon {
	background: #b42318;
}

@keyframes arb-tick {
	from {
		transform: scale( 0.3 );
		opacity: 0;
	}

	to {
		transform: scale( 1 );
		opacity: 1;
	}
}

.arb-toast__text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.arb-toast__close {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	color: #98a2b3;
	cursor: pointer;
	padding: 0 2px;
}

.arb-toast__close:hover {
	color: #101828;
}

/* Allowance chips flash when a credit is spent, so the deduction is visible. */
.arb-credits.is-updated .arb-credits__item,
.arb-planbar__summary.is-updated {
	animation: arb-credit-flash 0.9s ease both;
}

@keyframes arb-credit-flash {
	0% {
		background: #ecfdf3;
		border-color: #6ce9a6;
	}

	100% {
		background: var( --arb-surface-2 );
		border-color: var( --arb-line );
	}
}

/* ==================================================================
 * Preview actions
 * ================================================================== */

.arb-preview-actions {
	position: sticky;
	bottom: 0;
	display: flex;
	gap: 8px;
	padding: 12px 14px;
	margin-top: 12px;
	background: rgba( 255, 255, 255, 0.94 );
	backdrop-filter: blur( 6px );
	border-top: 1px solid var( --arb-line );
	border-radius: 0 0 var( --arb-r-lg ) var( --arb-r-lg );
}

.arb-btn--block {
	flex: 1 1 auto;
}

/* ==================================================================
 * AI call to action
 * ================================================================== */

.arb-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: var( --arb-r );
	border: 1px solid #ddd8fb;
	background:
		radial-gradient( 600px 180px at 15% 0%, #f1eefe, transparent 70% ),
		linear-gradient( 135deg, #faf9ff, #f4f2ff );
}

.arb-cta__title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 4px;
	color: var( --arb-brand-dark );
}

.arb-cta__text {
	font-size: 13.5px;
	color: var( --arb-muted );
	max-width: 46ch;
}

.arb-cta__action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex: 0 0 auto;
}

.arb-cta__meta {
	font-size: 12px;
	color: var( --arb-muted );
}

@media ( max-width: 700px ) {
	.arb-cta__action {
		align-items: stretch;
		width: 100%;
	}
}

/* Cards need to be wide enough for the preview to be legible. */
.arb-cards {
	grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
}

.arb-card__thumb {
	height: 250px;
}

/* ==================================================================
 * Motion
 *
 * Short, purposeful, and entirely disabled under prefers-reduced-motion.
 * ================================================================== */

@keyframes arb-rise {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes arb-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes arb-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.45;
	}
}

.arb-panel,
.arb-empty {
	animation: arb-rise 0.28s ease both;
}

/* Cards arrive in sequence so the grid reads as a list, not a flash. */
.arb-cards > li {
	animation: arb-rise 0.32s ease both;
}

.arb-cards > li:nth-child( 1 ) { animation-delay: 0.02s; }
.arb-cards > li:nth-child( 2 ) { animation-delay: 0.06s; }
.arb-cards > li:nth-child( 3 ) { animation-delay: 0.1s; }
.arb-cards > li:nth-child( 4 ) { animation-delay: 0.14s; }
.arb-cards > li:nth-child( 5 ) { animation-delay: 0.18s; }
.arb-cards > li:nth-child( n + 6 ) { animation-delay: 0.22s; }

.arb-step-body {
	animation: arb-fade 0.22s ease both;
}

.arb-entry-card {
	animation: arb-rise 0.24s ease both;
}

.arb-notice {
	animation: arb-rise 0.2s ease both;
}

.arb-status--saving {
	animation: arb-pulse 1.1s ease-in-out infinite;
}

.arb-modal {
	animation: arb-fade 0.16s ease both;
}

.arb-modal__box {
	animation: arb-rise 0.22s cubic-bezier( 0.2, 0.9, 0.3, 1 ) both;
}

/* ==================================================================
 * Accessibility
 * ================================================================== */

.arb-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* ==================================================================
 * Responsive
 * ================================================================== */

.arb-tabs {
	display: none;
	gap: 4px;
	padding: 4px;
	background: #e9ebf3;
	border-radius: 10px;
	margin-bottom: 16px;
}

.arb-tabs__btn {
	flex: 1 1 0;
	font: inherit;
	font-size: 13.5px;
	font-weight: 650;
	padding: 9px 12px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var( --arb-muted );
	cursor: pointer;
}

.arb-tabs__btn[aria-selected="true"] {
	background: #fff;
	color: var( --arb-ink );
	box-shadow: var( --arb-shadow-sm );
}

@media ( max-width: 980px ) {
	.arb-shell {
		grid-template-columns: 1fr;
	}

	.arb-tabs {
		display: flex;
	}

	.arb-shell[data-mobile-view="editor"] .arb-preview-wrap,
	.arb-shell[data-mobile-view="preview"] .arb-editor-wrap {
		display: none;
	}

	.arb-preview-wrap {
		position: static;
		max-height: none;
	}

	.arb-title-input {
		max-width: 100%;
	}
}

@media ( max-width: 600px ) {
	.arb-app {
		font-size: 15px;
	}

	.arb-display {
		font-size: 24px;
	}

	.arb-panel {
		padding: 16px;
		border-radius: var( --arb-r );
	}

	.arb-grid-2 {
		grid-template-columns: 1fr;
	}

	.arb-cards {
		grid-template-columns: 1fr;
	}

	.arb-topbar__actions .arb-btn {
		flex: 1 1 auto;
	}

	.arb-sticky-save {
		position: sticky;
		bottom: 0;
		background: var( --arb-bg );
		padding: 12px 0;
		margin-top: 16px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.arb-app *,
	.arb-app *::before,
	.arb-app *::after {
		transition: none !important;
		animation: none !important;
	}
}