/* Mammoth Health — C.H.I.E.F.S. Intake
   Scoped to .mci-intake / .mci-status so nothing leaks into the Elementor
   theme.

   Brand tokens below are the real values used elsewhere in this build,
   confirmed against chiefs-engine/templates/report.css (which documents
   they were themselves sourced by fetching mammothhealth.org's live
   stylesheet during Phase 5):
     deep blue    #1F4E79
     teal         #2E9CCA
     warm neutral #F7F4EF  (background)
     ink          #1A1A1A
     muted rule   #D8D2C8
   Typography: Inter for body text, Playfair Display for headings/wordmark —
   the site's own Google Fonts choices. This plugin does NOT enqueue those
   fonts itself: on the live site the Elementor theme already loads them
   sitewide, so these font-family stacks simply inherit them, falling back
   to system fonts anywhere that isn't true (e.g. previewing this file in
   isolation). See HANDOFF.md. */

.mci-intake,
.mci-status {
	--mci-deep: #1F4E79;
	--mci-teal: #2E9CCA;
	--mci-warm: #F7F4EF;
	--mci-ink: #1A1A1A;
	--mci-rule: #D8D2C8;
	--mci-muted: #6b6558;
	--mci-danger: #b42318;
	--mci-radius: 12px;
	--mci-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--mci-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	max-width: 760px;
	margin: 0 auto;
	/* Generous space between the form and the site header/footer. */
	padding: 96px 0 120px;
	color: var(--mci-ink);
	font-family: var(--mci-font-body);
	line-height: 1.55;
	text-align: left;
}

.mci-intake *,
.mci-intake *::before,
.mci-intake *::after,
.mci-status *,
.mci-status *::before,
.mci-status *::after {
	box-sizing: border-box;
}

/* The hidden attribute must win over any display rule below. */
.mci-intake [hidden],
.mci-status [hidden] {
	display: none !important;
}

/* ---- Progress indicator ---- */

.mci-progress {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
}

.mci-progress-step {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var(--mci-rule);
}

.mci-progress-step.is-done {
	background: var(--mci-teal);
}

.mci-progress-step.is-active {
	background: var(--mci-deep);
}

/* ---- Banners ---- */

.mci-resume-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
	padding: 12px 16px;
	background: var(--mci-warm);
	border: 1px solid var(--mci-rule);
	border-radius: 8px;
	font-size: 0.92rem;
}

.mci-resume-banner p {
	margin: 0;
	flex: 1 1 auto;
}

.mci-error-banner {
	margin-bottom: 18px;
	padding: 12px 14px;
	font-size: 0.9rem;
	color: var(--mci-danger);
	background: #fef3f2;
	border: 1px solid #fecdca;
	border-radius: 8px;
}

/* ---- Headings / panel ---- */

.mci-h {
	margin: 0 0 16px;
	font-family: var(--mci-font-heading);
	font-weight: 700;
	font-size: 1.7rem;
	line-height: 1.25;
	color: var(--mci-deep);
}

.mci-panel {
	background: #fff;
	border: 1px solid var(--mci-rule);
	border-radius: var(--mci-radius);
	padding: 32px;
	box-shadow: 0 1px 2px rgba(31, 78, 121, .04), 0 12px 32px rgba(31, 78, 121, .06);
}

.mci-panel p {
	margin: 0 0 14px;
}

.mci-panel p:last-child {
	margin-bottom: 0;
}

.mci-centered {
	text-align: center;
}

/* ---- Options ---- */

.mci-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 20px;
}

.mci-option-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
	padding: 20px;
	background: #fff;
	border: 1.5px solid var(--mci-rule);
	border-radius: var(--mci-radius);
	cursor: pointer;
	font: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.mci-option-card:hover,
.mci-option-card:focus-visible {
	border-color: var(--mci-teal);
	box-shadow: 0 0 0 3px rgba(46, 156, 202, .15);
	outline: none;
}

.mci-option-card.is-selected {
	border-color: var(--mci-deep);
	box-shadow: 0 0 0 3px rgba(31, 78, 121, .18);
}

.mci-option-title {
	font-family: var(--mci-font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--mci-deep);
}

.mci-option-desc {
	font-size: 0.88rem;
	color: var(--mci-muted);
}

/* ---- Forms ---- */

.mci-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 18px;
}

.mci-field {
	min-width: 0;
	margin-bottom: 18px;
}

.mci-row .mci-field {
	margin-bottom: 0;
}

.mci-field-grow {
	flex: 1 1 auto;
}

.mci-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--mci-deep);
}

.mci-req {
	color: var(--mci-teal);
}

.mci-help {
	margin: 6px 0 0;
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--mci-muted);
}

.mci-field input[type="text"],
.mci-field input[type="email"],
.mci-field input[type="tel"],
.mci-field input[type="url"],
.mci-field input[type="date"],
.mci-field input[type="number"],
.mci-field select,
.mci-field textarea {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 1rem;
	color: var(--mci-ink);
	background: #fff;
	border: 1px solid var(--mci-rule);
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mci-field textarea {
	resize: vertical;
	min-height: 64px;
}

.mci-field input:focus,
.mci-field select:focus,
.mci-field textarea:focus {
	outline: none;
	border-color: var(--mci-teal);
	box-shadow: 0 0 0 3px rgba(46, 156, 202, .18);
}

.mci-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 14px;
	padding: 14px 16px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--mci-ink);
	background: #fff;
	border: 2px solid var(--mci-teal);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.mci-checkbox:hover {
	background: #f2f9fc;
}

/* Large, high-contrast tick boxes (Dan, 2026-10-11: "too small and easily missed"). */
.mci-checkbox input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	margin: 0;
	border: 2px solid var(--mci-deep);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	display: grid;
	place-content: center;
}

.mci-checkbox input[type="checkbox"]::after {
	content: "";
	width: 8px;
	height: 15px;
	margin-top: -3px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .12s;
}

.mci-checkbox input[type="checkbox"]:checked {
	background: var(--mci-deep);
	border-color: var(--mci-deep);
}

.mci-checkbox input[type="checkbox"]:checked::after {
	transform: rotate(45deg) scale(1);
}

.mci-checkbox input[type="checkbox"]:focus-visible {
	outline: 3px solid rgba(46, 156, 202, .45);
	outline-offset: 2px;
}

.mci-checkbox:has(input:checked) {
	border-color: var(--mci-deep);
	background: #eef5fb;
}

.mci-checkbox.is-missing {
	border-color: var(--mci-danger);
	box-shadow: 0 0 0 4px rgba(180, 35, 24, .15);
	animation: mci-nudge .4s ease-in-out 2;
}

@keyframes mci-nudge {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
	.mci-checkbox.is-missing { animation: none; }
}

.mci-agree-hint {
	margin: 8px 0 0;
	font-size: 0.9rem;
	color: var(--mci-danger);
	font-weight: 600;
}

/* ---- Honeypot ---- */

.mci-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Expected closing date: month / day / year (Dan, 2026-10-16) ---- */

.mci-date-parts {
	display: flex;
	gap: 10px;
}

.mci-date-parts select {
	flex: 1 1 0;
	min-width: 0;
}

/* The year matters most and reads better with a little more room. */
.mci-date-parts select[data-mci-date-part="month"] {
	flex: 1.4 1 0;
}

@media (max-width: 420px) {
	.mci-date-parts {
		flex-wrap: wrap;
	}

	.mci-date-parts select[data-mci-date-part="month"] {
		flex: 1 1 100%;
	}
}

/* ---- Buttons ---- */

.mci-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	/* Dan, 2026-10-16: white on the teal was hard to read (about 2.6:1).
	   Deep blue carries white text at roughly 8:1, and the hover goes a
	   shade darker still rather than back to the teal. */
	background: var(--mci-deep);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s ease, transform .05s ease;
}

/* Dan, 2026-10-17 - the real cause of the unreadable label, and it was never
   the background. The site theme carries
   `button:where(...):hover, button:where(...):focus { color: var(--theme-color-title) }`
   and --theme-color-title is #1F4E79, the same deep blue as the button face.
   :where() adds no specificity, but the bare `button` plus `:hover`/`:focus`
   still outranks a lone `.mci-btn`, so the moment a button was hovered or
   focused its label took the theme's colour and disappeared into the button.
   Pinning the colour on the state selectors themselves (0,2,0) beats the
   theme's (0,1,1) without needing !important. */
.mci-btn,
.mci-btn:link,
.mci-btn:visited,
.mci-btn:hover,
.mci-btn:focus,
.mci-btn:focus-visible,
.mci-btn:active {
	color: #fff;
}

.mci-btn:hover:not(:disabled) {
	background: #17395a;
}

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

/* Legible while disabled too: dimming to .6 took the label with it. The theme
   sets `button[disabled] { background: var(--theme-color-meta); color:
   var(--theme-color-title) }` with !important on both, which put #1F4E79 text
   on a grey face at 1.8:1, so this one state does need !important back. */
.mci-btn:disabled {
	opacity: 1 !important;
	color: #fff !important;
	background: #5f6b76 !important; /* white on this is 5.4:1 (was 3.45:1 on #7d8c99) */
	cursor: progress;
}

/* Let a click on a disabled I AGREE fall through to its row, which then
   points at whatever is still unticked or blank. */
#mci-agree-submit:disabled {
	pointer-events: none;
	cursor: not-allowed;
}

.mci-btn-small {
	padding: 10px 16px;
	font-size: 0.9rem;
	align-self: flex-end;
}

.mci-link-btn {
	background: none;
	border: 0;
	padding: 8px 0;
	font: inherit;
	font-size: 0.9rem;
	color: var(--mci-teal);
	text-decoration: underline;
	cursor: pointer;
}

.mci-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 8px;
}

.mci-spinner {
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mci-spin .7s linear infinite;
}

.mci-spinner-lg {
	width: 32px;
	height: 32px;
	border-width: 3px;
	border-color: rgba(31, 78, 121, .2);
	border-top-color: var(--mci-deep);
	margin: 0 auto 16px;
	display: block;
}

@keyframes mci-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.mci-spinner, .mci-spinner-lg { animation-duration: 3s; }
}

/* ---- Errors ---- */

.mci-error {
	margin: 4px 0 14px;
	padding: 12px 14px;
	font-size: 0.9rem;
	color: var(--mci-danger);
	background: #fef3f2;
	border: 1px solid #fecdca;
	border-radius: 8px;
}

.mci-fine {
	font-size: 0.82rem;
	color: var(--mci-muted);
}

/* ---- Commitment step: the agreement and the Option B fee text ---- */

.mci-agreement-text {
	margin: 16px 0 0;
}

/* Set apart from the surrounding copy so it reads as the instrument it is,
   not as more page furniture. Verbatim attorney wording -- see
   includes/shortcode-intake.php. */
.mci-agreement-fee {
	margin: 16px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--mci-rule);
	border-left: 3px solid var(--mci-deep);
	border-radius: 6px;
	background: var(--mci-warm);
	font-size: 0.9rem;
	line-height: 1.55;
}

.mci-agreement-fee h3 {
	margin: 0 0 8px;
	font-family: var(--mci-font-heading);
	font-size: 1rem;
	color: var(--mci-deep);
}

.mci-agreement-fee p + p {
	margin-top: 10px;
}

.mci-agreement-fee[hidden] {
	display: none;
}

/* ---- Key/value summary (token, status) ---- */

.mci-kv {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 16px;
	margin: 0 0 20px;
}

.mci-kv dt {
	font-weight: 600;
	color: var(--mci-deep);
}

.mci-kv dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.mci-token {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	word-break: break-all;
	background: var(--mci-warm);
	padding: 4px 8px;
	border-radius: 4px;
}

/* ---- Upload ---- */

.mci-upload-row {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.mci-upload-progress {
	margin-bottom: 16px;
}

.mci-upload-progress-bar {
	height: 8px;
	background: var(--mci-rule);
	border-radius: 4px;
	overflow: hidden;
}

.mci-upload-progress-bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--mci-teal);
	transition: width .15s ease;
}

.mci-file-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.mci-file-list li {
	padding: 8px 12px;
	background: var(--mci-warm);
	border: 1px solid var(--mci-rule);
	border-radius: 6px;
	margin-bottom: 6px;
	font-size: 0.88rem;
}

/* ---- Repeatable rows (patents / copyrights) ---- */

.mci-repeat-row {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 8px;
}

.mci-repeat-row input,
.mci-repeat-row select {
	padding: 8px 10px;
	border: 1px solid var(--mci-rule);
	border-radius: 6px;
	font: inherit;
}

/* ---- Result badges ---- */

.mci-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	font-size: 26px;
	font-weight: 700;
	color: #fff;
	border-radius: 50%;
	background: var(--mci-teal);
}

.mci-badge-ok {
	background: #12805c;
}

/* ---- Status app ---- */

.mci-status-result {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--mci-rule);
}

.mci-status-reports ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mci-status-reports li {
	margin-bottom: 6px;
}

.mci-status-reports a {
	color: var(--mci-teal);
	text-decoration: underline;
}

/* ---- Mobile ---- */

@media (max-width: 640px) {
	.mci-panel { padding: 22px 18px; }
	.mci-intake, .mci-status { padding: 56px 0 72px; }
	.mci-row { grid-template-columns: 1fr; gap: 16px; }
	.mci-options { grid-template-columns: 1fr; }
	.mci-h { font-size: 1.4rem; }
	.mci-actions { flex-direction: column-reverse; align-items: stretch; }
}

/* ---- Yes/No and single-choice questions ---- */

.mci-choice-group {
	border: 0;
	padding: 0;
	margin: 0 0 22px;
	min-width: 0;
}

.mci-choice-group legend {
	padding: 0;
	margin-bottom: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--mci-deep);
}

.mci-field .mci-choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 8px;
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--mci-ink);
	cursor: pointer;
}

.mci-choice input {
	margin-top: 4px;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	accent-color: var(--mci-deep);
}

/* ---- Upload intro ---- */

.mci-upload-intro {
	margin-bottom: 20px;
}

.mci-upload-intro p {
	margin: 0 0 8px;
}

/* ---- "More materials?" pop-up ---- */

.mci-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(26, 26, 26, .55);
}

.mci-modal[hidden] {
	display: none;
}

.mci-modal-box {
	width: 100%;
	max-width: 520px;
	padding: 28px 28px 22px;
	background: #fff;
	border-radius: var(--mci-radius);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.mci-modal-box h3 {
	margin: 0 0 12px;
	font-family: var(--mci-font-heading);
	font-size: 1.35rem;
	color: var(--mci-deep);
}

.mci-modal-box p {
	margin: 0 0 10px;
}

.mci-modal-box .mci-reminder-fine {
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid #E5E7EB;
	font-size: .82rem;
	line-height: 1.55;
	color: #4B5563;
}

.mci-modal {
	overflow-y: auto;
}

.mci-modal-box {
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

.mci-modal-box .mci-reminder-tier {
	margin: 0 0 6px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #1B6F99;
}

/* ---- Question group headings ---- */

.mci-subhead {
	margin: 32px 0 16px;
	padding-top: 20px;
	border-top: 1px solid var(--mci-rule);
	font-family: var(--mci-font-heading);
	font-size: 1.2rem;
	color: var(--mci-deep);
}

.mci-form .mci-subhead:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.mci-choice-group input[type="text"] {
	margin-top: 4px;
}

/* ---- Patent counts and numbers ---- */

.mci-patent-detail {
	margin: -6px 0 22px;
	padding: 18px 18px 4px;
	background: #fff;
	border: 1px solid var(--mci-rule);
	border-radius: 10px;
}

.mci-patent-numbers {
	margin: -8px 0 18px;
}

.mci-patent-numbers [data-mci-patent-boxes] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px;
	margin-top: 8px;
}

.mci-patent-numbers input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	border: 1px solid var(--mci-rule);
	border-radius: 8px;
}

/* ---- Option B "STOP!" signature block ---- */

.mci-stop {
	margin: 20px 0;
	padding: 20px 20px 8px;
	border: 2px solid var(--mci-danger);
	border-radius: 10px;
	background: #fff7f6;
}

.mci-stop-title {
	margin: 0 0 6px;
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--mci-danger);
}

.mci-stop .mci-row {
	margin-bottom: 14px;
}

.mci-stop input[readonly] {
	background: #f3f1ec;
}

.mci-actions .mci-link-btn + .mci-btn {
	margin-left: auto;
}

/* ---- Key required field (company website) ---- */

.mci-field .mci-label-strong {
	font-size: 1rem;
	font-weight: 800;
	color: var(--mci-ink);
}

/* ---- A field the applicant must fix ---- */

.mci-needs-fix input,
.mci-needs-fix select,
.mci-needs-fix textarea {
	border-color: var(--mci-danger) !important;
	box-shadow: 0 0 0 3px rgba(180, 35, 24, .15) !important;
}

.mci-needs-fix legend,
.mci-needs-fix > label {
	color: var(--mci-danger) !important;
}

/* Optional-field marker and the row-level help line (v1.6.0). */
.mci-optional {
	font-weight: 400;
	color: var(--mci-muted);
	font-size: 0.85em;
}

.mci-help-row {
	margin: -6px 0 16px;
}

.mci-field textarea#mci-additional {
	min-height: 120px;
}

/* ---- v1.6.3 (Dan, 2026-10-17) ---- */

/* "Print your answers" sits beside the main button as an outline button.
   Colour pinned on every state for the same theme reason as .mci-btn. */
.mci-btn.mci-btn-secondary,
.mci-btn.mci-btn-secondary:link,
.mci-btn.mci-btn-secondary:visited,
.mci-btn.mci-btn-secondary:hover,
.mci-btn.mci-btn-secondary:focus,
.mci-btn.mci-btn-secondary:focus-visible,
.mci-btn.mci-btn-secondary:active {
	color: var(--mci-deep);
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--mci-deep);
}

.mci-btn.mci-btn-secondary:hover:not(:disabled) {
	background: #eef3f8;
}

.mci-actions .mci-link-btn + .mci-btn-secondary + .mci-btn {
	margin-left: 0;
}

/* Notice on the final page: the evaluation reports on what was submitted. */
.mci-notice {
	margin: 18px 0;
	padding: 14px 16px;
	border-left: 4px solid var(--mci-deep);
	background: #eef3f8;
	border-radius: 6px;
	font-weight: 600;
	color: var(--mci-ink);
}

/* Printed answer sheet: built on demand, only ever visible on paper. */
.mci-print-sheet {
	display: none;
}

@media print {
	body.mci-printing > *:not(.mci-print-sheet) {
		display: none !important;
	}
	body.mci-printing .mci-print-sheet {
		display: block;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11pt;
		color: #000;
	}
	.mci-print-sheet h1 {
		font-size: 16pt;
		margin: 0 0 4pt;
	}
	.mci-print-sheet dl {
		margin: 12pt 0 0;
	}
	.mci-print-sheet dt {
		font-weight: 700;
		margin-top: 8pt;
		page-break-after: avoid;
	}
	.mci-print-sheet dd {
		margin: 2pt 0 0;
		white-space: pre-wrap;
	}
}