/* CPTSD Companion Toolkit styles
   Palette and type pulled from the cptsd.ca brand guide:
   - Playfair Display for headings, Open Sans for body text
   - Vista White / Fair Pink as soft backgrounds, Geraldine as the
     primary accent (matches the site logo), black ink, Silver Chalice
     for muted/secondary text. Colours are used as specified in the
     brand guide, not altered. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap');

.cptsd-app {
	--cptsd-bg: #FCF8F7;          /* Vista White */
	--cptsd-surface: #FFFFFF;
	--cptsd-ink: #000000;
	--cptsd-muted: #8a8a8a;       /* darkened from Silver Chalice #A9A9A9 for AA text contrast */
	--cptsd-accent: #FF8F95;      /* Geraldine */
	--cptsd-accent-soft: #FEE9E9; /* Fair Pink */
	--cptsd-accent-ink: #000000;  /* text colour on top of accent buttons */
	--cptsd-warn: #E2646B;        /* darkened Geraldine, used only for the discomfort note accent */
	--cptsd-border: #EFE2E0;
	--cptsd-radius: 14px;
	--cptsd-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--cptsd-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	max-width: 640px;
	margin: 2rem auto;
	padding: 1.75rem;
	background: var(--cptsd-surface);
	border: 1px solid var(--cptsd-border);
	border-radius: var(--cptsd-radius);
	color: var(--cptsd-ink);
	font-family: var(--cptsd-font-body);
	font-size: 1rem;
	line-height: 1.6;
}

/* The main all-in-one app gets a wider canvas on desktop -- at least
   1000px as requested -- while staying fully fluid down to mobile. */
.cptsd-app-root {
	max-width: 1080px;
	width: 94%;
	background: var(--cptsd-bg, #FCF8F7);
	margin-bottom: 4.5rem; /* clearance for the fixed bottom SOS bar */
}

.cptsd-app h1, .cptsd-app h2, .cptsd-app h3, .cptsd-app h4 {
	font-family: var(--cptsd-font-display);
	font-weight: 700;
	color: var(--cptsd-ink);
}
.cptsd-app h2 { margin-top: 0; font-size: 2rem; line-height: 1.25; }
.cptsd-app h3 { font-size: 1.45rem; }
.cptsd-app h4 { font-size: 1.1rem; margin-bottom: 0.4rem; color: var(--cptsd-ink); font-weight: 700; }
.cptsd-muted { color: var(--cptsd-muted); font-size: 0.92rem; }

.cptsd-btn {
	display: inline-block;
	margin-top: 1.4rem;
	padding: 0.65rem 1.3rem;
	border-radius: 999px;
	border: 2px solid #FFA3A3;
	background-color: #F8D4D6;
	color: var(--cptsd-ink);
	cursor: pointer;
	font-family: var(--cptsd-font-body);
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
}
.cptsd-btn-primary {
	background-color: #F8D4D6;
	border-color: #FFA3A3;
	color: var(--cptsd-ink);
}
.cptsd-btn-primary:hover,
.cptsd-btn:hover { opacity: 0.85; }

/* Disclaimer modal */
.cptsd-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 1rem;
}
.cptsd-modal-inner {
	background: var(--cptsd-surface, #fff);
	max-width: 520px;
	padding: 2.2rem;
	border-radius: var(--cptsd-radius, 14px);
	font-family: var(--cptsd-font-body);
}
.cptsd-modal-inner h2 { font-family: var(--cptsd-font-display); }
body.cptsd-modal-open { overflow: hidden; }

/* Intro / orientation screen */
.cptsd-intro p { max-width: none; }
.cptsd-stage-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 1.5rem 0;
}
.cptsd-stage-card {
	background: var(--cptsd-accent-soft, #FEE9E9);
	border-radius: 12px;
	padding: 1.2rem;
}
.cptsd-stage-eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cptsd-ink);
	opacity: 0.6;
	margin-bottom: 0.4rem;
}
.cptsd-stage-card h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.cptsd-stage-card p { font-size: 0.9rem; margin: 0; line-height: 1.5; }
@media (max-width: 800px) {
	.cptsd-stage-cards { grid-template-columns: 1fr; }
}

/* Assessment */
.cptsd-question { margin-bottom: 1.4rem; }
.cptsd-likert { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.cptsd-likert label { display: flex; flex-direction: column; align-items: center; font-size: 0.8rem; gap: 0.2rem; }
.cptsd-likert-labels { display: flex; justify-content: space-between; width: 100%; font-size: 0.78rem; color: var(--cptsd-muted); margin-top: 0.2rem; }
.cptsd-result { margin-top: 1.5rem; padding: 1.2rem; background: var(--cptsd-accent-soft); border-radius: 12px; }

/* Single-page app shell */
.cptsd-app-root { position: relative; }
.cptsd-app-loading { color: var(--cptsd-muted, #8a8a8a); font-size: 0.9rem; }
.cptsd-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1.4rem;
	border-bottom: 1px solid var(--cptsd-border, #EFE2E0);
	padding-bottom: 0.8rem;
}
.cptsd-tab {
	background: none;
	border: none;
	padding: 0.45rem 0.8rem;
	border-radius: 999px;
	font-family: var(--cptsd-font-body);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	color: var(--cptsd-muted, #8a8a8a);
}
.cptsd-tab-active { background: var(--cptsd-accent-soft, #FEE9E9); color: var(--cptsd-ink); }
.cptsd-tab-restart { margin-left: auto; font-size: 0.8rem; text-decoration: underline; font-weight: 400; }

/* SOS bar -- full-width bar anchored to the bottom of the viewport,
   expanding upward on click (mirrors the bottom-bar / expand pattern
   used elsewhere on cptsd.ca, e.g. the consent bar) rather than a
   floating corner button. */
.cptsd-sos-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	max-width: none;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-family: var(--cptsd-font-body, sans-serif);
}
.cptsd-sos-toggle-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	background: var(--cptsd-accent-soft, #FEE9E9);
	border: none;
	border-top: 3px solid var(--cptsd-accent, #FF8F95);
	padding: 0.85rem 1rem;
	font-family: var(--cptsd-font-body);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--cptsd-ink);
	cursor: pointer;
	box-shadow: 0 -4px 14px rgba(0,0,0,0.08);
}
.cptsd-sos-toggle-icon {
	display: inline-block;
	font-size: 0.7rem;
	transition: transform 0.2s ease;
}
.cptsd-sos-bar[data-state="open"] .cptsd-sos-toggle-icon { transform: rotate(180deg); }

.cptsd-sos-panel {
	background: #fff;
	border-top: 1px solid var(--cptsd-border, #EFE2E0);
	box-shadow: 0 -10px 30px rgba(0,0,0,0.16);
	max-height: 70vh;
	overflow-y: auto;
	padding: 1.4rem 1.4rem 1.6rem;
}
.cptsd-sos-panel h3, .cptsd-sos-panel h4 { font-family: var(--cptsd-font-display); }
.cptsd-sos-section { margin-bottom: 1.1rem; max-width: 640px; margin-left: auto; margin-right: auto; }
.cptsd-sos-panel h3 { max-width: 640px; margin-left: auto; margin-right: auto; }
.cptsd-quickexit {
	display: block;
	margin-bottom: 0.9rem;
	background: var(--cptsd-bg, #FCF8F7);
	border: 1px solid var(--cptsd-border, #EFE2E0);
	border-radius: 999px;
	padding: 0.4rem 0.7rem;
	font-size: 0.8rem;
	cursor: pointer;
}
.cptsd-grounding-checklist { list-style: none; margin: 0; padding: 0; }
.cptsd-grounding-checklist li { margin-bottom: 0.35rem; }

.cptsd-breath-pacer { text-align: center; cursor: pointer; user-select: none; }
.cptsd-breath-circle {
	width: 90px;
	height: 90px;
	margin: 0.5rem auto;
	border-radius: 50%;
	background: var(--cptsd-accent-soft, #FEE9E9);
	border: 2px solid var(--cptsd-accent, #FF8F95);
	transition: transform 4s ease-in-out;
	transform: scale(0.7);
}
.cptsd-breath-in { transform: scale(1.1); transition-duration: 4s; }
.cptsd-breath-hold { transform: scale(1.1); transition-duration: 0s; }
.cptsd-breath-out { transform: scale(0.7); transition-duration: 6s; }
@media (prefers-reduced-motion: reduce) {
	.cptsd-breath-circle { transition: none; }
}

.cptsd-script-box {
	background: var(--cptsd-bg, #FCF8F7);
	border-radius: 10px;
	padding: 0.7rem;
	margin-bottom: 0.6rem;
	font-size: 0.9rem;
}
.cptsd-copy-btn {
	margin-top: 0.4rem;
	font-size: 0.78rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	border: 1px solid var(--cptsd-border, #EFE2E0);
	background: #fff;
	cursor: pointer;
}
.cptsd-crisis-section { border-top: 1px solid var(--cptsd-border, #EFE2E0); padding-top: 0.8rem; }

/* Day / process */
.cptsd-day-header { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--cptsd-muted); margin-bottom: 0.3rem; font-weight: 600; }
.cptsd-day-somatic, .cptsd-day-prompts { margin-top: 1.3rem; }
.cptsd-prompt { margin-bottom: 1rem; }
.cptsd-prompt label { display: block; margin-bottom: 0.35rem; font-size: 0.95rem; }
.cptsd-journal-textarea, #cptsd-prep-boundary, #cptsd-prep-somatic, #cptsd-prep-trigger, #cptsd-prep-question {
	width: 100%;
	border: 1px solid var(--cptsd-border, #EFE2E0);
	border-radius: 10px;
	padding: 0.6rem 0.8rem;
	font-family: var(--cptsd-font-body);
	font-size: 0.95rem;
	resize: vertical;
	background: var(--cptsd-bg, #FCF8F7);
}
.cptsd-day-discomfort-note {
	margin-top: 1rem;
	padding: 0.9rem 1rem;
	border-left: 3px solid var(--cptsd-warn, #E2646B);
	background: var(--cptsd-accent-soft, #FEE9E9);
	border-radius: 0 10px 10px 0;
	font-size: 0.92rem;
}
.cptsd-day-flag { margin-top: 1.2rem; font-size: 0.92rem; }
.cptsd-day-nav { display: flex; justify-content: space-between; margin-top: 1.6rem; font-size: 0.9rem; }
.cptsd-stub-notice {
	background: var(--cptsd-bg, #FCF8F7);
	border-radius: 10px;
	padding: 0.8rem 1rem;
	font-size: 0.9rem;
	color: var(--cptsd-muted);
}

/* Sources & research */
.cptsd-source-card {
	background: var(--cptsd-accent-soft, #FEE9E9);
	border-radius: 12px;
	padding: 1.3rem 1.4rem;
	margin-top: 1.1rem;
}
.cptsd-source-card h3 { font-size: 1.2rem; margin: 0 0 0.3rem; }
.cptsd-source-researchers {
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--cptsd-ink);
	opacity: 0.65;
	margin: 0 0 0.6rem;
}
.cptsd-source-card p { margin: 0 0 0.6rem; font-size: 0.95rem; line-height: 1.55; }
.cptsd-source-applies { font-size: 0.85rem; opacity: 0.85; margin-bottom: 0 !important; }

/* Discomfort scale */
.cptsd-discomfort-scale input[type="range"] { width: 100%; margin: 0.6rem 0; accent-color: var(--cptsd-accent, #FF8F95); }
.cptsd-discomfort-value { font-weight: 700; margin-bottom: 0.6rem; font-family: var(--cptsd-font-display); font-size: 1.3rem; }

/* Therapy prep */
.cptsd-flagged-days-list { margin-bottom: 1.3rem; }
.cptsd-flagged-list { list-style: none; padding: 0; }
.cptsd-flagged-list li { margin-bottom: 0.4rem; }

@media (max-width: 480px) {
	.cptsd-app { padding: 1.1rem; margin: 1rem auto; }
	.cptsd-app-root { width: 100%; border-radius: 0; }
	.cptsd-sos-toggle-label { font-size: 0.85rem; }
	.cptsd-app h2 { font-size: 1.5rem; }
}