/* The Aligned Self — Assessment front-end styles */
:root {
	--tas-sage: #4A7C59;
	--tas-gold: #B8860B;
	--tas-teal: #1A6B6B;
	--tas-purple: #5B2C6F;
	--tas-dark: #2b2b2b;
	--tas-light-bg: #f7f6f3;
}

.tas-assessment {
	max-width: 640px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--tas-dark);
}

.tas-assessment h2 {
	color: var(--tas-teal);
	font-size: 1.6em;
	margin-bottom: 0.4em;
}

.tas-assessment .tas-btn {
	background: var(--tas-sage);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 14px 28px;
	font-size: 1em;
	cursor: pointer;
	transition: background 0.15s ease;
}

.tas-assessment .tas-btn:hover {
	background: var(--tas-teal);
}

.tas-assessment .tas-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.tas-question {
	border: none;
	border-top: 1px solid #e4e1da;
	padding: 24px 0;
}

.tas-question legend {
	color: var(--tas-gold);
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.tas-question-text {
	font-size: 1.1em;
	margin: 10px 0 16px;
}

.tas-scale {
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.tas-scale label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 0.85em;
	cursor: pointer;
}

.tas-scale input[type="radio"] {
	width: 22px;
	height: 22px;
	accent-color: var(--tas-sage);
}

.tas-scale-labels {
	display: flex;
	justify-content: space-between;
	font-size: 0.75em;
	color: #888;
	margin-top: 6px;
}

.tas-email-gate {
	background: var(--tas-light-bg);
	border-radius: 8px;
	padding: 24px;
	margin: 30px 0;
}

.tas-email-gate label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.tas-email-gate input {
	width: 100%;
	padding: 10px;
	margin-bottom: 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1em;
}

.tas-privacy-note {
	font-size: 0.8em;
	color: #777;
}

.tas-consent-row {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400 !important;
	font-size: 0.85em;
	color: #555;
	margin-top: 10px;
}

.tas-consent-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 2px;
	accent-color: var(--tas-sage);
}

.tas-consent-row a {
	color: var(--tas-teal);
}

/* Honeypot — hidden from sighted users and keyboard/tab order, but
   still present in the DOM (most simple bots fill in every field they
   find). Not display:none/visibility:hidden, since some bots skip
   fields hidden that way — off-screen positioning is more effective. */
.tas-hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tas-step-result h2 {
	color: var(--tas-purple);
}

.tas-dashboard-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 32px;
}

@media (max-width: 700px) {
	.tas-dashboard-grid {
		grid-template-columns: 1fr;
	}
}

.tas-dashboard-card {
	background: #fff;
	border: 1px solid var(--tas-warm-300, #E3DDD6);
	border-radius: 12px;
	padding: 24px;
}

.tas-dashboard-eyebrow {
	text-transform: uppercase;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--tas-teal);
	margin-bottom: 8px;
}

.tas-dashboard-latest .tas-dashboard-eyebrow {
	color: var(--tas-sage);
}

.tas-dashboard-score {
	font-family: 'DM Mono', monospace;
	font-size: 2em;
	font-weight: 700;
	margin: 0 0 4px;
}

.tas-dashboard-score span {
	font-size: 0.5em;
	font-weight: 400;
	color: #888;
}

.tas-dashboard-recommendation .tas-dashboard-eyebrow {
	color: var(--tas-gold);
}

.tas-dashboard-retake-btn {
	background: transparent;
	border: 2px solid var(--tas-sage);
	color: var(--tas-sage);
	display: inline-block;
	margin-top: 12px;
}

.tas-dashboard-recommendation .tas-btn {
	margin-top: 12px;
	display: inline-block;
}

.tas-dashboard-history-heading {
	margin-bottom: 16px;
}

.tas-dashboard-type-badge {
	display: inline-block;
	font-size: 0.7em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--tas-warm-200, #EDE8E2);
	color: var(--tas-warm-700, #5A5249);
	padding: 2px 8px;
	border-radius: 4px;
	margin-bottom: 6px;
}

.tas-dashboard-result {
	background: var(--tas-light-bg);
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 16px;
}

.tas-dashboard-result h4 {
	margin: 4px 0;
}

.tas-dashboard-result h3 {
	margin-bottom: 4px;
}

.tas-dashboard-login {
	max-width: 320px;
}

.tas-recommendation {
	background: #fff;
	border: 2px solid var(--tas-gold);
	border-radius: 8px;
	padding: 16px 20px;
	margin: 12px 0;
}

.tas-rec-primary {
	font-weight: 700;
	font-size: 1.1em;
	color: var(--tas-purple);
	margin-bottom: 6px;
}

.tas-rec-secondary {
	font-size: 0.85em;
	color: #666;
}

.tas-rec-buy-btn {
	display: inline-block;
	margin-top: 10px;
}

.tas-browse-all {
	font-size: 0.85em;
	margin-top: 4px;
}

.tas-browse-all a {
	color: var(--tas-teal);
}

.tas-breakdown-table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 20px;
}

.tas-breakdown-table td {
	padding: 8px 6px;
	border-bottom: 1px solid #e4e1da;
}

.tas-breakdown-table td:last-child {
	text-align: right;
	font-weight: 600;
	color: var(--tas-teal);
}

.tas-shadow-item {
	background: var(--tas-light-bg);
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 10px;
}

.tas-shadow-item strong {
	color: var(--tas-gold);
}

.tas-step-error p {
	color: #b00020;
}

/* Paid assessment wizard (dimension-by-dimension flow) */
.tas-wizard-progress {
	margin-bottom: 24px;
}

.tas-progress-bar {
	background: var(--tas-warm-200, #EDE8E2);
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
	margin-bottom: 8px;
}

.tas-progress-fill {
	background: var(--tas-sage);
	height: 100%;
	border-radius: 999px;
	width: 0%;
	transition: width 0.4s ease;
}

.tas-progress-label {
	font-size: 0.8em;
	color: #777;
	text-align: right;
	margin: 0;
}

.tas-dim-header {
	margin-bottom: 8px;
}

.tas-dim-description {
	font-size: 0.9em;
	color: #666;
	margin-bottom: 20px;
	line-height: 1.5;
}

.tas-wizard-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
}

.tas-wizard-nav .tas-back-btn {
	background: transparent;
	border: 2px solid var(--tas-sage);
	color: var(--tas-sage);
}

.tas-wizard-nav .tas-next-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.tas-transition-screen {
	text-align: center;
	padding: 48px 20px;
}

.tas-transition-screen h2 {
	color: var(--tas-sage);
}

.tas-final-back-btn {
	background: transparent;
	border: 2px solid var(--tas-sage);
	color: var(--tas-sage);
	margin-right: 12px;
}
/* Paid assessment / Stripe gate */
.tas-paid input[type="email"] {
	width: 100%;
	padding: 12px;
	font-size: 1em;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin: 16px 0;
}

.tas-resume-toggle {
	margin-top: 18px;
	font-size: 0.9em;
}

.tas-resume-toggle a {
	color: var(--tas-teal);
}

.tas-resume-box {
	background: var(--tas-light-bg);
	border-radius: 8px;
	padding: 18px;
	margin-top: 12px;
}

.tas-resume-note {
	font-size: 0.85em;
	color: #555;
	margin-top: 8px;
}

.tas-dimension-group summary {
	cursor: pointer;
	font-weight: 600;
	padding: 8px 0;
}

/* Practitioner portal */
.tas-portal-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 16px;
}

.tas-portal-table th, .tas-portal-table td {
	padding: 10px;
	border-bottom: 1px solid #e4e1da;
	text-align: left;
}

.tas-portal-table th {
	color: var(--tas-teal);
	font-size: 0.85em;
	text-transform: uppercase;
}

@media (max-width: 480px) {
	.tas-scale {
		gap: 4px;
	}
	.tas-scale label {
		font-size: 0.75em;
	}
	.tas-scale input[type="radio"] {
		width: 18px;
		height: 18px;
	}
}