/* CDA Portfolio Helper — candidate wizard */

.cdaph-app {
	--cdaph-ink: #17252c;
	--cdaph-muted: #5f7480;
	--cdaph-line: #dbe4e9;
	--cdaph-accent: #2c5f7c;
	--cdaph-accent-soft: #eaf2f6;
	--cdaph-good: #2e7d5b;
	--cdaph-warn: #a05a12;

	max-width: 1320px;
	margin: 0 auto;
	color: var(--cdaph-ink);
	font-size: 16px;
	line-height: 1.6;
}

/* Wizard on the left, a live page preview pinned on the right. Below the
   breakpoint the preview drops beneath the wizard instead of beside it. */
.cdaph-layout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.cdaph-main {
	flex: 1 1 620px;
	max-width: 820px;
	min-width: 0;
}

.cdaph-preview-panel {
	flex: 1 1 380px;
	max-width: 420px;
	min-width: 300px;
	position: sticky;
	top: 20px;
	border: 1px solid var(--cdaph-line);
	border-radius: 10px;
	background: #fff;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: calc(100vh - 40px);
}

.cdaph-preview-heading {
	margin: 0;
	font-size: 0.95rem;
	color: var(--cdaph-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cdaph-preview-caption {
	font-size: 0.92rem;
	font-weight: 600;
}

.cdaph-preview-frame {
	flex: 1;
	width: 100%;
	min-height: 420px;
	border: 1px solid var(--cdaph-line);
	border-radius: 6px;
	background: #f4f7f9;
}

.cdaph-preview-empty {
	color: var(--cdaph-muted);
	font-size: 0.9rem;
}

.cdaph-preview-open {
	align-self: flex-start;
}

@media (max-width: 980px) {
	.cdaph-layout {
		flex-direction: column;
	}

	.cdaph-preview-panel {
		position: static;
		width: 100%;
		max-width: none;
		max-height: none;
	}

	.cdaph-preview-frame {
		min-height: 60vh;
	}
}

.cdaph-header {
	border-bottom: 1px solid var(--cdaph-line);
	padding-bottom: 20px;
	margin-bottom: 24px;
}

.cdaph-header-top {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.cdaph-title {
	margin: 0;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
}

.cdaph-intro {
	margin: 8px 0 16px;
	color: var(--cdaph-muted);
}

.cdaph-lang {
	display: inline-flex;
	border: 1px solid var(--cdaph-line);
	border-radius: 999px;
	overflow: hidden;
}

.cdaph-lang-btn {
	background: none;
	border: 0;
	padding: 6px 16px;
	font-size: 0.85rem;
	cursor: pointer;
	color: var(--cdaph-muted);
}

.cdaph-lang-btn.is-active {
	background: var(--cdaph-accent);
	color: #fff;
}

/* The one-time "which language are you applying in?" screen. It carries both
   languages at once, because whoever is reading it has not chosen yet. */
.cdaph-lang-gate {
	max-width: 860px;
	margin: 0 auto;
	padding: 24px 4px;
}

.cdaph-lang-gate .cdaph-title {
	margin: 0 0 4px;
}

.cdaph-lang-gate-alt {
	color: var(--cdaph-muted);
	font-weight: 500;
	margin-bottom: 20px;
}

.cdaph-lang-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin-top: 20px;
}

.cdaph-lang-option {
	border: 1px solid var(--cdaph-line);
	border-radius: 10px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cdaph-lang-option h3 {
	margin: 0;
	font-size: 1.1rem;
}

.cdaph-lang-option p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
}

.cdaph-lang-option .cdaph-btn {
	align-self: flex-start;
}

.cdaph-progress-bar {
	height: 8px;
	background: var(--cdaph-accent-soft);
	border-radius: 999px;
	overflow: hidden;
}

.cdaph-progress-bar span {
	display: block;
	height: 100%;
	background: var(--cdaph-accent);
	transition: width 0.35s ease;
}

.cdaph-progress-label {
	margin-top: 6px;
	font-size: 0.82rem;
	color: var(--cdaph-muted);
}

.cdaph-directions {
	border: 1px solid var(--cdaph-line);
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 20px;
	background: var(--cdaph-accent-soft);
}

.cdaph-directions-text {
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
	margin: 10px 0;
	padding: 10px 12px;
	border: 1px solid var(--cdaph-line);
	border-radius: 8px;
	font: inherit;
}

.cdaph-writeall-status {
	margin-top: 10px;
	min-height: 1.1em;
}

.cdaph-sections {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.cdaph-section {
	border: 1px solid var(--cdaph-line);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

.cdaph-section.is-open {
	border-color: var(--cdaph-accent);
	box-shadow: 0 2px 14px rgba(44, 95, 124, 0.09);
}

.cdaph-section-head {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-size: 1rem;
	color: inherit;
}

.cdaph-badge {
	flex: 0 0 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--cdaph-accent-soft);
	color: var(--cdaph-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 600;
}

.cdaph-section-head.is-done .cdaph-badge {
	background: var(--cdaph-good);
	color: #fff;
}

.cdaph-section-title {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.cdaph-kind {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cdaph-muted);
	border: 1px solid var(--cdaph-line);
	border-radius: 999px;
	padding: 1px 8px;
	white-space: nowrap;
}

.cdaph-chevron {
	color: var(--cdaph-muted);
	font-size: 1.2rem;
}

.cdaph-section-body {
	padding: 4px 16px 20px;
	border-top: 1px solid var(--cdaph-line);
}

.cdaph-sub {
	margin: 18px 0 8px;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cdaph-muted);
}

.cdaph-instructions {
	background: var(--cdaph-accent-soft);
	border-left: 3px solid var(--cdaph-accent);
	padding: 10px 14px;
	margin: 14px 0;
	font-size: 0.92rem;
}

.cdaph-formnote {
	font-size: 0.85rem;
	color: var(--cdaph-warn);
	margin: 10px 0;
}

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

.cdaph-field label {
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
	margin-bottom: 5px;
}

.cdaph-field input,
.cdaph-field textarea,
.cdaph-draft-text {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--cdaph-line);
	border-radius: 7px;
	font: inherit;
	font-size: 0.95rem;
	background: #fcfdfe;
	box-sizing: border-box;
}

.cdaph-field textarea,
.cdaph-draft-text {
	resize: vertical;
	line-height: 1.6;
}

.cdaph-field input:focus,
.cdaph-field textarea:focus,
.cdaph-draft-text:focus {
	outline: 2px solid var(--cdaph-accent);
	outline-offset: 1px;
	border-color: transparent;
}

.cdaph-badge.is-tab {
	background: var(--cdaph-accent);
	color: #fff;
	font-size: 0.9rem;
}

.cdaph-list-input {
	font-variant-numeric: tabular-nums;
	line-height: 1.9;
}

.cdaph-attachments {
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px dashed var(--cdaph-line);
	border-radius: 9px;
	background: #fbfcfd;
}

.cdaph-attachments .cdaph-sub {
	margin-top: 0;
}

.cdaph-attachment-list {
	list-style: none;
	margin: 10px 0;
	padding: 0;
}

.cdaph-attachment-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid var(--cdaph-line);
	font-size: 0.92rem;
}

.cdaph-attachment-list li:last-child {
	border-bottom: 0;
}

.cdaph-attachment-name {
	flex: 1;
	word-break: break-word;
}

.cdaph-badge.is-pending {
	background: #fff3e2;
	color: var(--cdaph-warn);
	border: 1px solid #f0dcbb;
}

.cdaph-formedit-actions.is-top {
	margin: 0 0 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--cdaph-line, #dfe6ea);
}

.cdaph-doc-default {
	font-size: 0.88rem;
	color: var(--cdaph-accent);
	background: var(--cdaph-accent-soft);
	border-left: 3px solid var(--cdaph-accent);
	padding: 7px 10px;
	margin: 8px 0;
}

.cdaph-kind.is-done {
	color: var(--cdaph-good);
	font-weight: 600;
}

.cdaph-kind.is-pending {
	color: var(--cdaph-warn);
	border-color: #f0dcbb;
	background: #fff8ec;
}

.cdaph-pending-note {
	margin: 12px 0 0;
	padding: 9px 12px;
	border-radius: 7px;
	background: #fff8ec;
	border: 1px solid #f0dcbb;
	font-size: 0.86rem;
	color: #7a4b10;
}

.cdaph-slots {
	list-style: none;
	counter-reset: slot;
	margin: 12px 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.cdaph-slot {
	border: 1px solid var(--cdaph-line);
	border-radius: 8px;
	padding: 11px 14px;
	background: #fff;
}

.cdaph-slot.is-filled {
	border-color: #b5d6c4;
	background: #f6fbf8;
}

.cdaph-slot-head {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

.cdaph-slot-mark {
	flex: 0 0 18px;
	height: 18px;
	margin-top: 2px;
	border-radius: 4px;
	border: 1.5px solid var(--cdaph-line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	color: #fff;
}

.cdaph-slot-mark.is-filled {
	background: var(--cdaph-good);
	border-color: var(--cdaph-good);
}

.cdaph-slot-label {
	flex: 1;
	font-size: 0.93rem;
	font-weight: 600;
}

.cdaph-slot-hint {
	margin: 4px 0 0 27px;
	font-size: 0.83rem;
	color: var(--cdaph-muted);
}

.cdaph-slot-hours {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0 27px;
	font-size: 0.85rem;
	color: var(--cdaph-muted);
}

.cdaph-hours {
	width: 82px;
	padding: 5px 8px;
	border: 1px solid var(--cdaph-line);
	border-radius: 6px;
	font: inherit;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

.cdaph-slot-file {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0 27px;
	font-size: 0.88rem;
}

.cdaph-slot .cdaph-file {
	margin: 8px 0 0 27px;
}

.cdaph-tally {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--cdaph-accent-soft);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

.cdaph-tally.is-good {
	background: #e8f5ee;
	color: #1f5c40;
}

.cdaph-tally-warn {
	margin-top: 5px;
	font-size: 0.85rem;
	color: var(--cdaph-warn);
}

.cdaph-link-btn {
	background: none;
	border: 0;
	padding: 2px 4px;
	color: #9c2f16;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
	text-decoration: underline;
}

.cdaph-file {
	display: block;
	margin-top: 6px;
	font-size: 0.9rem;
}

/* A refused upload names the file and gives the candidate the fix — three
   lines they need to be able to read twice, so it stays on the page instead
   of passing by in a toast. */
.cdaph-upload-problem {
	margin: 8px 0 0;
	padding: 9px 11px;
	border-left: 3px solid #b3421a;
	background: #fdf3ef;
	color: #7a2f13;
	font-size: 0.9rem;
	line-height: 1.45;
	border-radius: 3px;
}

.cdaph-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cdaph-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--cdaph-line);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 0.88rem;
	color: var(--cdaph-ink);
	cursor: pointer;
}

.cdaph-chip:hover {
	border-color: var(--cdaph-accent);
}

.cdaph-chip.is-active {
	border-color: var(--cdaph-accent);
	background: var(--cdaph-accent-soft);
	font-weight: 600;
}

.cdaph-swatch {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.cdaph-preview-link {
	display: inline-flex;
}

.cdaph-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
	align-items: center;
}

.cdaph-btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 7px;
	border: 1px solid var(--cdaph-accent);
	background: var(--cdaph-accent);
	color: #fff;
	font: inherit;
	font-size: 0.92rem;
	cursor: pointer;
	text-decoration: none;
}

.cdaph-btn:hover:not(:disabled) {
	filter: brightness(1.08);
}

/* A secondary action that should not compete with the section's main button —
   used for the Council's blank forms, which are a step on the way rather than
   the thing being done here. */
.cdaph-btn.is-quiet {
	background: transparent;
	color: var(--cdaph-accent);
}

.cdaph-blankforms {
	border: 1px solid var(--cdaph-line);
	border-radius: 8px;
	padding: 14px 16px;
	margin: 14px 0;
}

.cdaph-blankforms .cdaph-sub {
	margin-top: 0;
}

.cdaph-blankform-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cdaph-blankform-list li {
	margin: 0;
}

.cdaph-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.cdaph-btn.is-ghost {
	background: #fff;
	color: var(--cdaph-accent);
}

.cdaph-btn.is-primary {
	padding: 13px 26px;
	font-size: 1rem;
}

.cdaph-followups {
	background: #fff8ec;
	border: 1px solid #f0dcbb;
	border-radius: 8px;
	padding: 4px 14px 12px;
	margin-top: 16px;
}

.cdaph-followup {
	margin: 6px 0;
	font-size: 0.93rem;
}

.cdaph-draft {
	margin-top: 8px;
}

.cdaph-muted {
	color: var(--cdaph-muted);
	font-size: 0.88rem;
}

.cdaph-footer {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--cdaph-line);
	text-align: center;
}

.cdaph-download {
	margin-top: 14px;
}

.cdaph-disclaimer {
	margin-top: 18px;
	font-size: 0.8rem;
	color: var(--cdaph-muted);
	max-width: 620px;
	margin-inline: auto;
}

.cdaph-notice {
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--cdaph-accent-soft);
	margin-bottom: 16px;
	font-size: 0.93rem;
}

.cdaph-notice.is-warn {
	background: #fff5f2;
	border: 1px solid #f2cfc4;
	color: #8a3517;
}

/* A warning that runs to more than one sentence — the contact-details notice
   on the Resource Collection tab that names real agencies. */
.cdaph-notice-line {
	margin: 0;
	line-height: 1.5;
}

.cdaph-notice-line + .cdaph-notice-line {
	margin-top: 8px;
}

/* State and ZIP, asked for where the work is rather than four screens away on
   the Cover Page — an unset state is what makes the AI invent an agency. */
.cdaph-locality {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.cdaph-locality-input {
	box-sizing: border-box;
	padding: 7px 10px;
	border: 1px solid #e0bdb0;
	border-radius: 4px;
	font: inherit;
	background: #fff;
	color: var(--cdaph-ink);
	min-width: 160px;
	flex: 1 1 160px;
}

select.cdaph-locality-input {
	/* A select inherits none of the input styling above on Safari without an
	   explicit appearance reset. */
	-webkit-appearance: menulist;
	appearance: menulist;
	max-width: 260px;
}

.cdaph-locality-input.is-short {
	min-width: 110px;
	flex: 0 1 130px;
}

.cdaph-locality-note {
	font-size: 0.86rem;
	line-height: 1.4;
}

.cdaph-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	background: var(--cdaph-ink);
	color: #fff;
	padding: 11px 20px;
	border-radius: 999px;
	font-size: 0.9rem;
	z-index: 9999;
	transition: opacity 0.35s ease;
}

.cdaph-toast.is-error {
	background: #9c2f16;
}

.cdaph-toast.is-out {
	opacity: 0;
}

@media (max-width: 640px) {
	.cdaph-section-head {
		padding: 12px;
	}
	.cdaph-section-body {
		padding: 4px 12px 16px;
	}
}

/* ---------------------------------------------------------------- */
/* Resource Collection documents                                     */
/* ---------------------------------------------------------------- */

.cdaph-documents { margin-top: 4px; }

.cdaph-doc {
	border: 1px solid #d9e2e8;
	border-left: 4px solid #b7c6cf;
	border-radius: 6px;
	padding: 16px 18px;
	margin-bottom: 18px;
	background: #fcfdfe;
}

.cdaph-doc.is-done { border-left-color: #2f7d4f; }

.cdaph-doc-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.cdaph-doc-code {
	font-weight: 700;
	color: #2c5f7c;
	letter-spacing: 0.3px;
	white-space: nowrap;
}

.cdaph-doc-label { font-weight: 600; }

.cdaph-doc-tick {
	color: #2f7d4f;
	font-weight: 700;
	margin-left: auto;
}

textarea.cdaph-doc-body {
	width: 100%;
	font-size: 14px;
	line-height: 1.5;
	padding: 10px 12px;
	border: 1px solid #cfd8dd;
	border-radius: 5px;
	box-sizing: border-box;
}

/* A grid document stores raw JSON — legible enough to check, clearly not
   the place to compose prose. */
textarea.cdaph-doc-body.is-grid {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	background: #f7f9fa;
	color: #3a4a52;
}

.cdaph-doc .cdaph-actions { margin-top: 10px; }
.cdaph-doc .cdaph-sub { margin-top: 16px; }

/* Editable Council grid — the same table the PDF prints, with a box per cell
   so a candidate never has to look at JSON. */
.cdaph-grid { margin: 6px 0 4px; }

.cdaph-grid-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px 16px;
	margin-bottom: 14px;
}

table.cdaph-grid-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

table.cdaph-grid-table th,
table.cdaph-grid-table td {
	border: 1px solid #cfd8dd;
	padding: 5px;
	vertical-align: top;
}

table.cdaph-grid-table th {
	background: #eef3f6;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	padding: 7px 5px;
}

td.cdaph-grid-rowhead {
	width: 110px;
	background: #f7f9fa;
	font-size: 12px;
	line-height: 1.35;
	padding: 8px;
}

.cdaph-grid-note {
	display: block;
	font-size: 10px;
	color: #6b7a82;
	margin-top: 3px;
	text-transform: none;
}

table.cdaph-grid-table textarea {
	width: 100%;
	border: 0;
	background: transparent;
	font-size: 12.5px;
	line-height: 1.4;
	padding: 3px;
	resize: vertical;
	box-sizing: border-box;
	min-height: 58px;
}

table.cdaph-grid-table textarea:focus {
	outline: 2px solid #2c5f7c;
	outline-offset: -2px;
	background: #fff;
}

th.cdaph-grid-corner { width: 110px; background: #f7f9fa; }

@media (max-width: 760px) {
	table.cdaph-grid-table { display: block; overflow-x: auto; }
}

/* ------------------------------------------------------------------ */
/* Answering by speaking, and answering from shorthand                  */
/* ------------------------------------------------------------------ */

/* The microphone sits inside the field's top-right corner rather than
   after it, so a column of fields keeps one clean left edge. */
.cdaph-dictate-wrap {
	position: relative;
}

.cdaph-dictate-wrap > textarea,
.cdaph-dictate-wrap > input {
	padding-right: 40px;
}

.cdaph-dictate {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	padding: 0;
	line-height: 1;
	font-size: 14px;
	border: 1px solid var(--cdaph-line);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	opacity: 0.6;
}

.cdaph-dictate:hover {
	opacity: 1;
}

/* Live recording has to be unmistakable — someone who does not realise the
   microphone is still on is the failure case here. */
.cdaph-dictate.is-live {
	opacity: 1;
	background: #b3261e;
	border-color: #b3261e;
	animation: cdaph-pulse 1.2s ease-in-out infinite;
}

@keyframes cdaph-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.55); }
	50%      { box-shadow: 0 0 0 6px rgba(179, 38, 30, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.cdaph-dictate.is-live { animation: none; }
}



/* A quiet inline control that reads as a link — used for "see an example",
   which should not compete with the button that does the work. */
.cdaph-linkbtn {
	background: none;
	border: 0;
	padding: 0;
	margin-top: 8px;
	font: inherit;
	font-size: 0.85rem;
	color: var(--cdaph-accent);
	text-decoration: underline;
	cursor: pointer;
}



/* ------------------------------------------------------------------ */
/* The two buttons under every written answer                          */
/* ------------------------------------------------------------------ */

.cdaph-assist {
	margin-top: 6px;
}

.cdaph-assist-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Deliberately understated. These help with the answer; they are not the
   answer, and they must not out-shout the question above them. */
.cdaph-btn.is-small {
	padding: 5px 12px;
	font-size: 0.82rem;
}

/* The five tones, revealed by "Change the tone". Kept on one wrapping line
   under the buttons so the answer box stays the biggest thing on screen. */
.cdaph-assist-tones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	background: #f5f8fa;
}

.cdaph-assist-tones-lead {
	font-size: 0.8rem;
	color: var(--cdaph-muted);
	margin-right: 2px;
}

.cdaph-tone-chip {
	padding: 4px 10px;
	font-size: 0.8rem;
}

/* So the button that opened the row reads as open rather than as one more
   thing that did nothing. */
.cdaph-btn.is-open {
	background: #eef3f6;
	border-color: var(--cdaph-muted);
}

/* Undo appears only after something has been rewritten, and reads as the way
   back rather than as one more thing to try. */
.cdaph-assist-undo {
	margin-left: auto;
	color: var(--cdaph-muted);
}

/* What the question still wants, after a correction. Warm rather than
   critical — it is a prompt for the next sentence, not a mark against the
   answer already there. */
.cdaph-assist-gaps {
	margin-top: 10px;
	border-left: 3px solid var(--cdaph-warn);
	background: #fdf8f1;
	border-radius: 0 6px 6px 0;
	padding: 10px 12px;
	font-size: 0.86rem;
}

.cdaph-assist-gaps-lead {
	margin: 0 0 6px;
	font-weight: 600;
}

.cdaph-assist-gaps ul {
	margin: 0;
	padding-left: 18px;
}

.cdaph-assist-gaps li {
	margin: 3px 0;
	line-height: 1.5;
}

/* A blank Council form that can be typed into rather than only printed. Green
   rather than grey: this is something the candidate gains, and it sits beside
   help text that tells them to print and hand-write. */
.cdaph-blankform-typeable {
	font-size: 0.8rem;
	color: #1c6b4a;
}

/* The Council's own page, on screen, with boxes on it.
   Everything inside is positioned as a percentage of the sheet, so the boxes
   stay on the printed lines at any width. */
.cdaph-formedit {
	margin-top: 12px;
}

.cdaph-formedit-body {
	margin-top: 10px;
}

.cdaph-formedit-help {
	font-size: 0.88rem;
	margin: 0 0 10px;
}

.cdaph-sheet {
	position: relative;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	border: 1px solid var(--cdaph-line);
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}

.cdaph-sheet-img {
	display: block;
	width: 100%;
	height: auto;
}

/* Tinted rather than outlined: the candidate needs to see at a glance which
   parts of the Council's page are theirs to fill, without the page looking
   like something other than the Council's page. */
.cdaph-sheet-box {
	position: absolute;
	box-sizing: border-box;
	border: 1px solid rgba(44, 95, 124, 0.45);
	border-radius: 2px;
	background: rgba(44, 95, 124, 0.07);
	padding: 0 4px;
	font: inherit;
	font-size: clamp(9px, 1.35vw, 14px);
	line-height: 1.1;
	color: var(--cdaph-ink);
}

/* A paragraph cell. It fills its box on the Council's page exactly like a
   one-line field does, but text starts at the top and wraps, and the browser
   is not allowed to resize it — dragging the corner would pull it off the
   printed lines it is sitting on. */
.cdaph-sheet-box.is-multiline {
	padding: 3px 4px;
	line-height: 1.25;
	resize: none;
	overflow: auto;
	white-space: pre-wrap;
}

.cdaph-sheet-box:focus {
	outline: 2px solid var(--cdaph-accent);
	outline-offset: 0;
	background: #fff;
}

/* The same Council boxes again, full size, under the picture of the page.
   The sheet above shows WHERE the text goes; this is where it gets written. */
.cdaph-sheet-fields {
	margin: 16px auto 0;
	max-width: 760px;
}

.cdaph-sheet-field {
	margin-top: 12px;
}

.cdaph-sheet-field-label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.35;
}

.cdaph-sheet-field-box {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--cdaph-line);
	border-radius: 4px;
	font: inherit;
	line-height: 1.45;
	resize: vertical;
	background: #fff;
	color: var(--cdaph-ink);
}

.cdaph-sheet-field-box:focus {
	outline: 2px solid var(--cdaph-accent);
	outline-offset: 1px;
}

/* How much of the Council's printed cell is used up. Ordinary counting is
   quiet; the two warnings are not, because a box that overflows on paper
   loses its last lines and nothing else on the page says so. */
.cdaph-sheet-field-count {
	margin: 4px 0 0;
	font-size: 0.82rem;
	color: var(--cdaph-muted);
	min-height: 1.1em;
}

.cdaph-sheet-field-count.is-tight {
	color: var(--cdaph-ink);
}

.cdaph-sheet-field-count.is-over {
	color: var(--cdaph-warn);
	font-weight: 600;
}

/* What is deliberately not the candidate's to fill on this particular form.
   Set off from the general help so it is read rather than skimmed past. */
.cdaph-formedit-note {
	margin: 0 0 12px;
	padding: 8px 10px;
	border-left: 3px solid var(--cdaph-accent);
	background: rgba(44, 95, 124, 0.06);
	border-radius: 0 4px 4px 0;
	font-size: 0.9rem;
	line-height: 1.45;
}

.cdaph-formedit-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

.cdaph-formedit-status {
	margin: 8px 0 0;
	color: var(--cdaph-warn);
	font-size: 0.88rem;
	min-height: 1.1em;
}

/* The same line also reports a draft landing, which is not a warning — it is
   the one instruction that matters on this page: read it before you sign it. */
.cdaph-formedit-status.is-note {
	color: var(--cdaph-ink);
	line-height: 1.45;
}

/* -----------------------------------------------------------------------
   The Council checklist's tick column.

   The finished page is flattened into the binder, so no box in the PDF can
   be clicked — this panel is the only place a candidate can set one, and it
   has to read as the list they are about to sign under rather than as a
   settings screen.
   -------------------------------------------------------------------- */
.cdaph-checklist {
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px solid var(--cdaph-line);
	border-radius: 9px;
	background: #fbfcfd;
}

.cdaph-checklist .cdaph-sub {
	margin-top: 0;
}

.cdaph-checklist-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.cdaph-checklist-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 6px;
	line-height: 1.4;
}

.cdaph-checklist-row + .cdaph-checklist-row {
	border-top: 1px solid var(--cdaph-line);
}

.cdaph-checklist-row input[type="checkbox"] {
	margin: 2px 0 0;
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}

.cdaph-checklist-row label {
	cursor: pointer;
	font-size: 0.92rem;
}

/* A row the candidate set by hand no longer follows what is finished, so it
   is marked — otherwise a tick they made months ago is indistinguishable
   from one the plugin stands behind. */
.cdaph-checklist-row.is-manual {
	background: var(--cdaph-accent-soft);
}

.cdaph-checklist-status {
	font-size: 0.85rem;
	color: var(--cdaph-muted);
	min-height: 1.1em;
}

/* -----------------------------------------------------------------------
   Autosave, and the browser-side copy behind it.

   The status line sits in the button row and stays there. A toast would
   scroll away while she is still reading her own sentence, and the one
   state that matters — "the site could not be reached, your text is safe
   here" — is exactly the one she must not miss.
   -------------------------------------------------------------------- */
.cdaph-savestate {
	font-size: 0.85rem;
	color: var(--cdaph-muted);
	min-height: 1.1em;
}

.cdaph-savestate.is-warn {
	color: var(--cdaph-warn);
	font-weight: 600;
}

.cdaph-autosave-note {
	margin-top: -4px;
	font-size: 0.85rem;
}

/* Work this browser is holding that never reached the site. Deliberately
   loud: it is a decision she has to make, not a notice to skim past. */
.cdaph-restore {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 2px solid var(--cdaph-warn);
	border-radius: 9px;
	background: #fdf6ec;
}

.cdaph-restore .cdaph-sub {
	margin-top: 0;
	color: var(--cdaph-warn);
}

.cdaph-restore p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.45;
}

/* "Download everything" — her own copy, beside the button that builds the
   binder. Set apart so the two are never confused: one is what she hands to
   the Council, the other is what she keeps. */
.cdaph-export {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--cdaph-line);
}

.cdaph-export p {
	margin: 0 0 4px;
	font-size: 0.88rem;
	line-height: 1.5;
	max-width: 62ch;
}

/* The sales panel a non-buyer lands on, and the banner for a term that has
   ended. Both lead with what the candidate CAN do. */
.cdaph-sales {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px 26px;
	border: 1px solid var(--cdaph-line, #dbe4e9);
	border-radius: 10px;
	background: #fff;
	text-align: left;
}

.cdaph-sales h2 {
	margin-top: 0;
	font-size: 1.35rem;
}

.cdaph-sales ul {
	margin: 14px 0 20px;
	padding-left: 20px;
	line-height: 1.6;
}

.cdaph-sales-actions {
	margin: 0 0 8px;
}

.cdaph-sales-login {
	margin: 0;
	font-size: 0.9rem;
	color: var(--cdaph-muted, #5f7480);
}

.cdaph-access {
	margin-bottom: 18px;
}

.cdaph-access h3 {
	margin: 0 0 6px;
	font-size: 1.05rem;
}

.cdaph-access p {
	margin: 0 0 10px;
	line-height: 1.5;
}

/* ------------------------------------------------------------------
   Her signature

   Two Council forms have a signature line and eight initials boxes. The
   overlay marks them on the picture of the Council's own page, so she can
   see the line she is signing and — before she builds anything — see that
   her signature has landed on it.
   ------------------------------------------------------------------ */

.cdaph-sheet-sign {
	position: absolute;
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 0 3px;
	cursor: pointer;
	/* Dashed rather than tinted like a typed box: this is not somewhere to
	   type, and it should not look like the boxes that are. */
	border: 1px dashed rgba(160, 90, 18, 0.65);
	border-radius: 2px;
	background: rgba(160, 90, 18, 0.06);
}

.cdaph-sheet-sign.is-initials {
	justify-content: center;
	align-items: center;
}

.cdaph-sheet-sign.is-signed {
	border-color: transparent;
	background: transparent;
	cursor: default;
}

.cdaph-sheet-sign-hint {
	font-size: clamp(8px, 1.1vw, 12px);
	line-height: 1;
	color: #a05a12;
	white-space: nowrap;
	overflow: hidden;
}

.cdaph-sheet-sign-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: left bottom;
}

.cdaph-sheet-sign-ink {
	font-size: clamp(9px, 1.4vw, 15px);
	line-height: 1;
	color: var(--cdaph-ink);
}

.cdaph-sign {
	margin: 18px auto 0;
	max-width: 760px;
	padding: 16px 18px;
	border: 1px solid var(--cdaph-line);
	border-radius: 6px;
	background: #fff;
}

.cdaph-sign-heading {
	margin: 0 0 4px;
	font-size: 16px;
}

/* The pad. `touch-action: none` is what stops a finger drawing a stroke from
   scrolling the page out from under it on a phone — without it the feature
   does not work at all on the device most of these candidates use. */
.cdaph-sign-canvas {
	display: block;
	width: 100%;
	height: 160px;
	margin: 8px 0 10px;
	border: 1px solid var(--cdaph-line);
	border-bottom: 2px solid var(--cdaph-ink);
	border-radius: 4px;
	background: #fcfdfd;
	touch-action: none;
	cursor: crosshair;
}

.cdaph-sign-field {
	margin: 10px 0;
}

.cdaph-sign-field label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 14px;
}

.cdaph-sign-field .cdaph-muted {
	margin: 4px 0 0;
	font-size: 13px;
}

.cdaph-sign-input {
	width: 100%;
	max-width: 420px;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--cdaph-line);
	border-radius: 4px;
	font: inherit;
	color: var(--cdaph-ink);
	background: #fff;
}

.cdaph-sign-input.is-short {
	max-width: 140px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.cdaph-sign-declare {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 14px 0;
	padding: 12px;
	border-radius: 4px;
	background: var(--cdaph-accent-soft);
	font-size: 15px;
	cursor: pointer;
}

.cdaph-sign-declare input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.cdaph-sign-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.cdaph-sign-status {
	margin: 8px 0 0;
	min-height: 1.2em;
	color: #a4361f;
	font-size: 14px;
}

.cdaph-sign-done {
	display: flex;
	gap: 16px;
	align-items: flex-end;
	flex-wrap: wrap;
	margin-top: 10px;
}

.cdaph-sign-done-img {
	display: block;
	max-width: 260px;
	max-height: 70px;
	object-fit: contain;
	object-position: left bottom;
	border-bottom: 2px solid var(--cdaph-ink);
	padding-bottom: 2px;
}

.cdaph-sign-done-meta p {
	margin: 0;
}

.cdaph-sign-done-name {
	font-weight: 600;
}

/* The signing panel on a Council-form tab: the page, then the pad. */
.cdaph-signpanel {
	margin-top: 14px;
}

.cdaph-signpanel .cdaph-sheet {
	margin-bottom: 0;
}

/* A box the plugin fills from her own answers — name, candidate id, date.
   Tinted like the typed boxes on a fillable form rather than dashed like a
   place she has to sign, because there is nothing for her to do here. */
.cdaph-sheet-sign.is-typed {
	align-items: center;
	border-style: solid;
	border-color: rgba(44, 95, 124, 0.35);
	background: rgba(44, 95, 124, 0.06);
	cursor: default;
}

.cdaph-sheet-sign.is-typed.is-signed {
	border-color: transparent;
	background: transparent;
}

.cdaph-sheet-sign.is-typed .cdaph-sheet-sign-hint {
	color: var(--cdaph-accent);
	opacity: 0.75;
}