/* ============================================================================
   Forms 2.0 — Member-Facing Styles
   Mobile-first. All widths collapse to 100% below 768px.
   WCAG 2.1 AA: focus states, color contrast, readable sizes.
   ============================================================================ */


/* ---- layout scaffolding ---- */
.forms2-form {
	max-width: 960px;
	margin: 0 auto;
	padding: 1rem;
}

.forms2-header {
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #e5e5e5;
}

.forms2-title {
	margin: 0 0 0.5rem;
	line-height: 1.3;
}

/* The org component theme (mms_component_styles.css) sizes every heading
   with ID-based selectors, e.g. `#mheader_5_wrapper ... h2 { font-size: 30px }`.
   An ID selector outranks a plain `.forms2-title` class rule, so the title
   would render at the theme's large heading size instead of ours. Mirror the
   same wrapper IDs here so this rule wins on specificity and the title stays
   at its intended size. */
#mms-main .forms2-title,
#mheader_5_wrapper .forms2-title {
	font-size: 1.375rem;
}

/* Scope with .forms2-header so this beats an org theme's `header div`
   rule (e.g. `header div { text-align: right; }`), which would otherwise
   win on specificity and right-align the description. */
.forms2-header .forms2-description {
	color: #555;
	line-height: 1.5;
	text-align: left;
}

/* Let authored inline color survive the org site theme. Themes ship bare
   element rules (APAM's style.css has `em { color: #2C2C2D }`), and a rule
   matching the element beats a color inherited from an ancestor — so a
   description written as <span style="color:#0066ff"><em>text</em></span>
   rendered in the theme's color instead of the author's. Only tags the
   purifier never lets carry a style attribute are listed, so this can't
   clobber a real inline color (those live on p/div/span/img, all excluded).
   !important because a theme selector may outrank ours. Mirrored in
   forms2-admin.css and forms2-rte-contents.css so the admin preview, the
   editor and this render agree. :is() degrades to the old behavior on
   pre-2021 browsers. */
:is(.forms2-description, .forms2-label, .forms2-help) :is(b, strong, i, em, u, s, li, blockquote, h3, h4, h5, h6) {
	color: inherit !important;
}


/* ---- rows + columns: mobile-first (all full width) ---- */
.forms2-row {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.forms2-field {
	width: 100%;
	padding: 0;
}

.forms2-col-full,
.forms2-col-half,
.forms2-col-third,
.forms2-col-two-thirds {
	flex: 1 1 100%;
	max-width: 100%;
}

/* desktop: side-by-side */
@media (min-width: 768px) {
	.forms2-row {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
	}
	.forms2-col-full       { flex: 1 1 100%;     max-width: 100%; }
	.forms2-col-half       { flex: 0 1 calc(50% - 0.5rem);          max-width: calc(50% - 0.5rem); }
	.forms2-col-third      { flex: 0 1 calc(33.333% - 0.667rem);    max-width: calc(33.333% - 0.667rem); }
	.forms2-col-sixth      { flex: 0 1 calc(16.667% - 0.833rem);    max-width: calc(16.667% - 0.833rem); }
	.forms2-col-two-thirds { flex: 0 1 calc(66.666% - 0.333rem);    max-width: calc(66.666% - 0.333rem); }
}


/* ---- labels + help ---- */
/* Breathing room above each field's label so stacked fields aren't cramped.
   Targets field labels only (custom fields + the identity block's plain
   <label>s) — NOT .forms2-section-header, so section headers keep their own
   spacing and stay grouped with the fields below them. */
.forms2-label,
.forms2-identity .forms2-field > label {
	margin-top: 0.6rem;
}

.forms2-label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	color: #222;
	line-height: 1.4;
}

.forms2-required {
	color: #c00;
	margin-left: 0.2em;
}

.forms2-help {
	margin-bottom: 0.5rem;
	color: #666;
	font-size: 0.9rem;
	line-height: 1.45;
}

.forms2-sublabel {
	display: block;
	margin: 0.5rem 0 0.25rem;
	font-size: 0.9rem;
	color: #444;
}


/* ---- inputs ---- */
.forms2-field input[type="text"],
.forms2-field input[type="email"],
.forms2-field input[type="tel"],
.forms2-field input[type="number"],
.forms2-field input[type="date"],
.forms2-field input[type="time"],
.forms2-field input[type="file"],
.forms2-field select,
.forms2-field textarea {
	width: 100%;
	/* height:auto overrides Bootstrap's fixed .form-control height:34px (Bootstrap
	   is force-loaded on the admin preview page). Our larger padding + font need
	   more room than 34px, so without this the text clips at the bottom — most
	   visibly on <select>. No-op where Bootstrap isn't loaded. */
	height: auto;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #222;
	background-color: #fff;
	border: 1px solid #b5b5b5;
	border-radius: 4px;
	box-sizing: border-box;
}

.forms2-field input:focus,
.forms2-field select:focus,
.forms2-field textarea:focus {
	outline: none;
	border-color: #2684ff;
	box-shadow: 0 0 0 2px rgba(38, 132, 255, 0.25);
}

.forms2-field input[aria-invalid="true"],
.forms2-field select[aria-invalid="true"],
.forms2-field textarea[aria-invalid="true"] {
	border-color: #c00;
}

.forms2-field textarea {
	min-height: 6rem;
	resize: vertical;
}


/* ---- choice (radio / checkbox / dropdown) ---- */
.forms2-choice-group,
.forms2-yesno-group {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.forms2-choice-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.5rem;
	border-radius: 4px;
	cursor: pointer;
	line-height: 1.4;
}

.forms2-choice-item:hover {
	background-color: #f5f7fa;
}

.forms2-choice-item input {
	margin: 0;
	flex-shrink: 0;
}

/* ---- "Other" option (free-text capture next to a choice option) ----
   The wrapper holds the radio/checkbox + label as one row, with the
   free-text input flowing inline next to the label. Mobile collapse
   stacks the input below the label so it doesn't fight for width. */
.forms2-choice-item-other {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.forms2-choice-item-other .forms2-choice-item {
	margin: 0;
}

.forms2-other-input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.35rem 0.5rem;
	border: 0;
	border-bottom: 1px solid #c0c8d2;
	background: transparent;
	font: inherit;
	color: inherit;
}

.forms2-other-input:focus {
	outline: none;
	border-bottom-color: #3d6db5;
}

.forms2-other-input:disabled {
	color: #8a92a0;
	border-bottom-style: dashed;
}

.forms2-other-input[hidden] {
	display: none;
}

@media (max-width: 480px) {
	.forms2-choice-item-other {
		flex-direction: column;
		align-items: stretch;
	}

	.forms2-other-input {
		flex: 1 1 auto;
	}
}

.forms2-yesno-group {
	flex-direction: row;
	gap: 1rem;
}


/* ---- rating ---- */
.forms2-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.forms2-rating-label-low,
.forms2-rating-label-high {
	font-size: 0.85rem;
	color: #666;
	padding: 0 0.5rem;
}

.forms2-rating-item {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	background-color: #fafafa;
	line-height: 1;
}

.forms2-rating-item input:checked ~ span {
	font-weight: 700;
	color: #1557b2;
}

.forms2-rating-item:has(input:checked) {
	background-color: #e7f0fb;
	border-color: #2684ff;
}

.forms2-rating-na {
	margin-left: 0.75rem;
	opacity: 0.85;
}


/* ---- grid ---- */
.forms2-grid {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.forms2-grid th,
.forms2-grid td {
	padding: 0.5rem;
	border: 1px solid #e5e5e5;
	text-align: center;
	vertical-align: middle;
}

.forms2-grid thead th {
	background-color: #f5f7fa;
	font-weight: 600;
}

.forms2-grid tbody th {
	text-align: left;
	font-weight: 500;
	background-color: #fafafa;
}

.forms2-grid-cell {
	display: block;
	cursor: pointer;
}

/* mobile grid: stack rows */
@media (max-width: 767px) {
	.forms2-grid thead { display: none; }
	.forms2-grid tbody tr {
		display: block;
		margin-bottom: 1rem;
		border: 1px solid #e5e5e5;
	}
	.forms2-grid tbody th {
		display: block;
		text-align: left;
		padding: 0.5rem;
		border-bottom: 1px solid #e5e5e5;
	}
	.forms2-grid tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 0;
		border-bottom: 1px dotted #eee;
		text-align: left;
	}
	.forms2-grid tbody td::before {
		content: attr(data-col-label);
		color: #555;
	}
}


/* ---- file upload ---- */
.forms2-file {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}


/* ---- section header ---- */
.forms2-section-header {
	margin: 2.25rem 0 0;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--f2-section-color, #ccc);
	color: inherit;
	font-size: 1.25rem;
}

/* mms_component_styles.css resets heading margins via an ID selector
   (#mms-main / #mheader_5_wrapper :is(h1..h6) { margin: 0 }) that outranks the
   class rule above, zeroing the section header's top margin and leaving it
   cramped against the field above — on both the admin preview and the live
   form, which both render inside #mms-main. Re-assert the separation at
   matching specificity. The separation lives ABOVE the header; below it the
   header should hug the fields it introduces. */
#mms-main .forms2-section-header,
#mheader_5_wrapper .forms2-section-header {
	margin-top: 2.25rem;
	margin-bottom: 0;
}

/* The section field renders in its own row, whose normal inter-field bottom
   margin would otherwise stack beneath the header (header margin + row margin +
   next label margin = a big gap below). Drop the row's bottom margin so the
   only space under the header is the next field's normal label spacing. */
.forms2-row:has(.forms2-section-header) {
	margin-bottom: 0;
}

.forms2-section-desc {
	margin: 0 0 1rem;
	color: #555;
}


/* ---- progress bar ---- */
.forms2-progress {
	width: 100%;
	height: 6px;
	background-color: #eee;
	border-radius: 3px;
	overflow: hidden;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

.forms2-progress-bar {
	height: 100%;
	background-color: #2684ff;
	transition: width 0.2s ease;
}


/* ---- word counter ---- */
.forms2-word-counter {
	margin-top: 0.25rem;
	font-size: 0.85rem;
	color: #666;
	text-align: right;
}

.forms2-word-counter.is-invalid {
	color: #c00;
	font-weight: 600;
}


/* ---- e-signature pad ---- */
.forms2-esig {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid #e5e5e5;
}

.forms2-esig-canvas {
	display: block;
	width: 100%;
	max-width: 600px;
	height: 150px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	cursor: crosshair;
	touch-action: none;
}

.forms2-esig-canvas.has-error {
	border-color: #c00;
}

.forms2-esig-actions {
	margin-top: 0.4rem;
}

.forms2-esig-error {
	color: #c00;
	font-size: 0.875rem;
	margin-top: 0.35rem;
}

.forms2-esig-saved img {
	display: block;
	max-width: 300px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
}


/* ---- submit row ---- */
.forms2-submit-row {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid #e5e5e5;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-end;
}


/* ---- identity block ---- */
.forms2-identity {
	margin-bottom: 1rem;
}


/* ---- error + notice ---- */
.forms2-errors {
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	background-color: #fdecea;
	border-left: 4px solid #c00;
	color: #5a1515;
}

.forms2-errors ul {
	margin: 0;
	padding-left: 1.25rem;
}

.forms2-notice {
	padding: 1rem;
	background-color: #eef4fb;
	border-left: 4px solid #2684ff;
	color: #1557b2;
	margin: 1rem 0;
}


/* ---- confirmation page ---- */
.forms2-confirm {
	max-width: 800px;
	margin: 2rem auto;
	padding: 1.5rem;
	line-height: 1.5;
}

.forms2-payment-block {
	margin-top: 2rem;
	padding: 1rem;
	background-color: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
}

.forms2-return-link {
	margin-top: 1.5rem;
	text-align: center;
}


/* ---- visually hidden (screen reader only) ---- */
.forms2-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ---- condition-hidden fields ---- */
.forms2-field.is-hidden-by-condition {
	display: none;
}

/* Hide the row itself when every field in it is condition-hidden, so no gap is left behind */
.forms2-row:not(:has(.forms2-field:not(.is-hidden-by-condition))) {
	display: none;
}


/* ============================================================================
   ACCESS GATE (form_edit.php email + code prompt)
   ============================================================================ */
.forms2-access-gate {
	max-width: 480px;
	margin: 2rem auto;
	padding: 1.5rem;
	background-color: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
}
.forms2-access-gate h1 {
	margin: 0 0 0.75rem;
	font-size: 1.4rem;
}


/* ============================================================================
   PUBLIC RESPONSE LIST (form_list.php)
   ============================================================================ */
.forms2-list-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem;
}

.forms2-list-header {
	margin-bottom: 1.5rem;
}
.forms2-list-header h1 {
	margin: 0 0 0.5rem;
	font-size: 1.75rem;
}
.forms2-list-description {
	color: #555;
	line-height: 1.5;
}

.forms2-list-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 600px) {
	.forms2-list-grid[data-cols="2"],
	.forms2-list-grid[data-cols="3"],
	.forms2-list-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.forms2-list-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
	.forms2-list-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}

.forms2-list-card {
	padding: 1rem 1.25rem;
	background-color: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.forms2-list-name {
	margin: 0 0 0.25rem;
	font-size: 1.1rem;
	color: #222;
}
.forms2-list-employer {
	margin-bottom: 0.25rem;
	font-size: 0.9rem;
	color: #555;
}
.forms2-list-address {
	margin-bottom: 0.5rem;
	font-size: 0.85rem;
	color: #777;
}
.forms2-list-values {
	margin: 0.5rem 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 0.75rem;
	font-size: 0.9rem;
}
.forms2-list-values dt { font-weight: 600; color: #555; }
.forms2-list-values dd { margin: 0; color: #222; }

.forms2-list-expand {
	margin-top: 1.25rem;
	text-align: right;
}


/* ============================================================================
   MEMBER SUBMISSIONS PAGE (form_submissions.php)
   ============================================================================ */
.forms2-submissions-page {
	max-width: 900px;
	margin: 0 auto;
	padding: 1rem;
}
.forms2-submissions-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}
.forms2-submissions-table th,
.forms2-submissions-table td {
	padding: 0.6rem;
	text-align: left;
	border-bottom: 1px solid #e5e5e5;
	vertical-align: top;
}
.forms2-submissions-table thead th {
	background-color: #f5f7fa;
	font-weight: 600;
}

/* ============================================================================
   Quiz score panel (form_confirm.php — quiz_mode_ind='X')
   Uses --mms-* color tokens from mms_component_styles.css (linked on that page).
   ============================================================================ */

.forms2-quiz-score {
	text-align: center;
	padding: 1.5rem 1rem;
	margin: 1.5rem 0;
	border-radius: 4px;
	background: var(--mms-success, #dcfce7);
	border: 1px solid var(--mms-success-dark, #166534);
}
.forms2-quiz-score-number {
	font-size: 2rem;
	font-weight: 700;
	color: var(--mms-success-dark, #166534);
	line-height: 1.2;
}
.forms2-quiz-score-label {
	margin-top: 0.25rem;
	font-size: 0.9rem;
	color: var(--mms-success-dark, #166534);
	opacity: 0.85;
}

.forms2-quiz-results {
	margin-top: 1.5rem;
}
.forms2-quiz-result-item {
	border: 1px solid var(--mms-secondary-light, #d1d5db);
	border-radius: 4px;
	margin-bottom: 0.75rem;
	overflow: hidden;
}
.forms2-quiz-result-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1rem;
}
.forms2-quiz-result-item.is-correct .forms2-quiz-result-header {
	background: var(--mms-success, #dcfce7);
	border-left: 4px solid var(--mms-success-dark, #166534);
}
.forms2-quiz-result-item.is-partial .forms2-quiz-result-header {
	background: var(--mms-warning, #fef3c7);
	border-left: 4px solid var(--mms-warning-dark, #92400e);
}
.forms2-quiz-result-item.is-incorrect .forms2-quiz-result-header {
	background: var(--mms-error, #fef2f2);
	border-left: 4px solid var(--mms-error-dark, #991b1b);
}
.forms2-quiz-result-icon {
	font-size: 1rem;
	flex-shrink: 0;
}
.forms2-quiz-result-item.is-correct  .forms2-quiz-result-icon { color: var(--mms-success-dark, #166534); }
.forms2-quiz-result-item.is-partial  .forms2-quiz-result-icon { color: var(--mms-warning-dark, #92400e); }
.forms2-quiz-result-item.is-incorrect .forms2-quiz-result-icon { color: var(--mms-error-dark, #991b1b); }
.forms2-quiz-result-name {
	flex: 1;
	font-weight: 500;
	font-size: 0.95rem;
}
.forms2-quiz-result-pts {
	font-size: 0.82rem;
	color: var(--mms-secondary, #6b7280);
	white-space: nowrap;
}
.forms2-quiz-result-detail {
	padding: 0.6rem 1rem;
	font-size: 0.88rem;
	border-top: 1px solid var(--mms-secondary-light, #d1d5db);
}
.forms2-quiz-result-detail p { margin: 0.2rem 0; }
.forms2-quiz-result-your-answer  { color: var(--mms-secondary-dark, #374151); }
.forms2-quiz-result-correct-answer { color: var(--mms-success-dark, #166534); font-weight: 500; }
.forms2-quiz-result-feedback {
	padding: 0.6rem 1rem;
	font-size: 0.88rem;
	font-style: italic;
	color: var(--mms-secondary-dark, #374151);
	border-top: 1px solid var(--mms-secondary-light, #d1d5db);
	background: var(--mms-light-gray, #f3f4f6);
}
.forms2-quiz-result-feedback p { margin: 0.2rem 0; }

/* Empty state shared across pages */
.forms2-empty-state {
	padding: 2rem;
	text-align: center;
	color: #777;
	background-color: #fafafa;
	border: 1px dashed #ccc;
	border-radius: 4px;
}


/* ---- ranking (drag-and-drop) field ---- */
.forms2-rank-hint {
	margin: 0 0 0.6rem;
	font-size: 0.85rem;
	color: #666;
}

.forms2-ranking {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.forms2-rank-col {
	flex: 1;
	min-width: 220px;
}

.forms2-rank-col-head {
	margin-bottom: 0.4rem;
	font-weight: 600;
	color: #222;
}

.forms2-rank-list {
	min-height: 48px;
	margin: 0;
	padding: 0.5rem;
	list-style-position: inside;
	border: 1px dashed #c0c8d2;
	border-radius: 4px;
}

.forms2-rank-ranked {
	background-color: #f5f9ff;
}

.forms2-rank-avail {
	list-style: none;
	background-color: #fafafa;
}

.forms2-rank-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.6rem;
	margin: 0.3rem 0;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: move;
	touch-action: none;
	-ms-touch-action: none;
	user-select: none;
	box-sizing: border-box;
}

.forms2-rank-item:focus {
	outline: 2px solid #2684ff;
	outline-offset: 1px;
}

.forms2-rank-item.is-dragging {
	opacity: 0.9;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.forms2-rank-grip {
	color: #999;
	letter-spacing: -2px;
	line-height: 1;
	cursor: move;
}

.forms2-rank-placeholder {
	margin: 0.3rem 0;
	list-style: none;
	border: 2px dashed #2684ff;
	border-radius: 4px;
	background-color: #e7f0fb;
	box-sizing: border-box;
}

.forms2-ranking[data-locked="1"] .forms2-rank-item {
	cursor: not-allowed;
	background-color: #f3f4f6;
}

@media (max-width: 768px) {
	.forms2-ranking {
		flex-direction: column;
		gap: 0.75rem;
	}
}