.ac {
	--ac-accent: #e06840;
	--ac-accent-dark: #c4532f;
	--ac-bg: #f9f7f5;
	--ac-card: #fff;
	--ac-text: #2b211c;
	--ac-muted: #6e615a;
	--ac-line: #e6dfd9;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ac-text);
	line-height: 1.45;
	container-type: inline-size;
	container-name: ac;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 32px;
}
body .ac * { font-family: inherit; }
.ac *, .ac *::before, .ac *::after { box-sizing: border-box; }

.ac .ac-h { font-size: 1.25rem; line-height: 1.25; margin: 0 0 14px; color: var(--ac-text); font-weight: 700; }
.ac .ac-name { font-size: 1.05rem; line-height: 1.3; margin: 0 0 12px; font-weight: 600; color: var(--ac-text); }

.ac-picker { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
.ac-controls, .ac-stage, .ac-nato, .ac-all {
	background: var(--ac-card);
	border: 1px solid var(--ac-line);
	border-radius: 16px;
	padding: 20px;
	min-width: 0;
}
.ac-nato { margin-top: 28px; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
.ac-nato--solo { margin-top: 0; }
.ac-nato-text p { margin: 0 0 10px; color: var(--ac-muted); font-size: .95rem; }
.ac-all { margin-top: 28px; }

/* Controls */
.ac fieldset.ac-group { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.ac fieldset.ac-group:last-child { margin-bottom: 0; }
.ac-group legend { padding: 0; margin: 0 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-muted); }
.ac-seg { display: flex; background: var(--ac-bg); border: 1px solid var(--ac-line); border-radius: 999px; padding: 3px; gap: 3px; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ac button.ac-opt, .ac button.ac-chip {
	appearance: none; cursor: pointer; margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.2;
	color: var(--ac-text); background: transparent; border: 1px solid transparent; border-radius: 999px;
	padding: 10px 14px; min-height: 44px; text-transform: none; letter-spacing: 0; box-shadow: none;
}
.ac button.ac-opt { flex: 1 1 0; }
.ac button.ac-chip { background: var(--ac-bg); border-color: var(--ac-line); flex: 0 0 auto; }
.ac button.ac-opt[aria-pressed="true"], .ac button.ac-chip[aria-pressed="true"] {
	background: var(--ac-accent); color: #fff; border-color: var(--ac-accent);
}
.ac button.ac-opt:hover:not([aria-pressed="true"]):not(:disabled), .ac button.ac-chip:hover:not([aria-pressed="true"]):not(:disabled) { background: #f1e9e3; }
.ac fieldset.is-disabled { opacity: .45; }
.ac button:disabled { cursor: not-allowed; }
.ac button:focus-visible, .ac a:focus-visible { outline: 3px solid #1b5fd1; outline-offset: 2px; }
.ac:not(.ac-js) .ac-controls { display: none; }
.ac:not(.ac-js) .ac-picker { grid-template-columns: minmax(0, 1fr); }

/* Preview */
.ac-viewer { max-width: 560px; margin: 0 auto; }
.ac-frame { aspect-ratio: 8.5 / 11; width: 100%; background: #fff; border: 1px solid var(--ac-line); border-radius: 10px; overflow: hidden; box-shadow: 0 6px 18px rgba(60, 35, 20, .1); }
.ac-frame img.ac-preview { display: block; width: 100%; height: 100%; object-fit: contain; max-width: 100%; margin: 0; }
.ac ul.ac-thumbs { list-style: none; display: flex; gap: 8px; margin: 12px 0 0; padding: 0; flex-wrap: wrap; }
.ac ul.ac-thumbs li { margin: 0; padding: 0; list-style: none; }
.ac button.ac-thumb { appearance: none; cursor: pointer; padding: 0; margin: 0; width: 56px; aspect-ratio: 8.5 / 11; border: 2px solid var(--ac-line); border-radius: 6px; background: #fff; overflow: hidden; display: block; min-height: 0; }
.ac button.ac-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.ac button.ac-thumb[aria-pressed="true"] { border-color: var(--ac-accent); }

.ac-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ac a.ac-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid var(--ac-accent); line-height: 1.2; }
.ac a.ac-btn--primary { background: var(--ac-accent); color: #fff; flex: 1 1 auto; }
.ac a.ac-btn--primary:hover { background: var(--ac-accent-dark); border-color: var(--ac-accent-dark); color: #fff; }
.ac a.ac-btn--secondary { background: #fff; color: var(--ac-accent-dark); }
.ac a.ac-btn--secondary:hover { background: #fdf0ea; }
.ac .ac-meta { margin: 10px 0 0; font-size: .875rem; color: var(--ac-muted); text-align: center; }

/* Table */
.ac-table-wrap { overflow-x: auto; }
.ac table.ac-table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 0; border: 0; }
.ac .ac-table th, .ac .ac-table td { text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--ac-line); background: transparent; vertical-align: top; }
.ac .ac-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ac-muted); }
.ac .ac-table tbody th { font-weight: 500; }
.ac .ac-table td { white-space: nowrap; }
.ac .ac-table a { color: var(--ac-accent-dark); font-weight: 700; }
.ac .ac-nato-text a { color: var(--ac-accent-dark); font-weight: 600; }

/* Narrow container (mobile or a slim theme column) */
@container ac (max-width: 760px) {
	.ac-picker, .ac-nato { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.ac-controls, .ac-stage, .ac-nato, .ac-all { padding: 16px; }
	.ac-viewer { max-width: 100%; }
}
@container ac (max-width: 480px) {
	.ac a.ac-btn { flex: 1 1 100%; }
	.ac .ac-table th, .ac .ac-table td { padding: 8px 6px; }
	.ac .ac-table { font-size: .875rem; }
	/* Name + PDF only; the name already says one page or 5 pages. */
	.ac .ac-table tr > :nth-child(2), .ac .ac-table tr > :nth-child(3) { display: none; }
	.ac .ac-table tr > :last-child { text-align: right; }
}

.ac .ac-preview{transition:opacity .15s ease}
.ac .ac-preview.is-loading{opacity:.35}

/* Tables in the page copy (gen_content.py adds .ac-words). Fixed layout so a long word
   wraps instead of widening the theme's content column past the viewport. */
table.ac-words { table-layout: fixed; width: 100%; max-width: 100%; border-collapse: collapse; }
table.ac-words th, table.ac-words td { padding: 8px 10px; overflow-wrap: anywhere; vertical-align: top; }
table.ac-words th:first-child, table.ac-words td:first-child { width: 4.2em; }
@media (max-width: 480px) {
	table.ac-words { font-size: .875rem; }
	table.ac-words th, table.ac-words td { padding: 6px 5px; }
	table.ac-words th:first-child, table.ac-words td:first-child { width: 3.4em; }
}

.ac .ac-crosslink { margin: 20px 0 0; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px dashed var(--ac-line); font-size: .95rem; }
.ac .ac-crosslink a { color: var(--ac-accent-dark); font-weight: 700; }