/* OpenPress custom CSS
   Light: white + black.  Dark: soft navy (easy on the eyes) + off-white.
   Accent: emerald-500 #10b981 */
.font-display {
	font-family: "Plus Jakarta Sans", "Inter", sans-serif;
}

html {
	-webkit-text-size-adjust: 100%;
}

html.dark {
	color-scheme: dark;
}

/* Keep the header clear of phone notches / rounded corners (landscape) */
.op-safe-x {
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}

/* Smooth scrolling, but respect reduced-motion preferences */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
	.animate-ping { animation: none; }
}

::selection {
	background: #10b981;
	color: #0e1424;
}

/* ======================================================
   Auth pages (login / sign up / forgot password)
   ====================================================== */
.op-auth {
	min-height: calc(100vh - 4rem);
}
@supports (min-height: 100dvh) {
	.op-auth { min-height: calc(100dvh - 4rem); }
}

.op-dots {
	background-image: radial-gradient(rgba(232, 236, 244, 0.12) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* form bits */
.op-label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #404040;
}
html.dark .op-label { color: #d5dbe8; }

.op-field { position: relative; }
.op-icon {
	position: absolute;
	left: 0.95rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.15rem;
	height: 1.15rem;
	color: #a3a3a3;
	pointer-events: none;
	transition: color .2s;
}
.op-field:focus-within .op-icon { color: #10b981; }

.op-input {
	width: 100%;
	height: 3rem;
	padding: 0 1rem 0 2.8rem;
	border-radius: 0.75rem;
	border: 1px solid #e5e5e5;
	background: #fff;
	color: #171717;
	font-size: 0.9375rem;
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.op-input::placeholder { color: #a3a3a3; }
.op-input:hover { border-color: #d4d4d4; }
.op-input:focus {
	outline: none;
	border-color: #10b981;
	box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}
.op-input.pr-12 { padding-right: 3rem; }
.op-input:user-invalid { border-color: #f43f5e; }
.op-input[aria-invalid="true"] { border-color: #f43f5e; }
html.dark .op-input[aria-invalid="true"] { border-color: #fb7185; }
html.dark .op-input { background: #141b2d; border-color: #1d263b; color: #e8ecf4; }
html.dark .op-input::placeholder { color: #8793ae; }
html.dark .op-input:hover { border-color: #2a3550; }
html.dark .op-input:focus { border-color: #10b981; }

.op-check {
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 0.3rem;
	border: 1px solid #d4d4d4;
	accent-color: #10b981;
	cursor: pointer;
}

/* buttons */
.op-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	height: 3rem;
	border-radius: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s, transform .1s, box-shadow .2s;
}
.op-btn:active { transform: scale(0.99); }
.op-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3); }

.op-btn-primary { background: #171717; color: #fff; }
.op-btn-primary:hover { background: #10b981; color: #fff; }
html.dark .op-btn-primary { background: #e8ecf4; color: #0e1424; }
html.dark .op-btn-primary:hover { background: #34d399; color: #0e1424; }

.op-btn-google { background: #fff; color: #171717; border: 1px solid #e5e5e5; }
.op-btn-google:hover { background: #fafafa; border-color: #d4d4d4; }
html.dark .op-btn-google { background: #141b2d; color: #e8ecf4; border-color: #1d263b; }
html.dark .op-btn-google:hover { background: #1d263b; border-color: #2a3550; }

/* password strength */
.op-strength { background: #e5e5e5; transition: background .25s; }
html.dark .op-strength { background: #1d263b; }
.op-strength.is-weak   { background: #f43f5e; }
.op-strength.is-fair   { background: #f59e0b; }
.op-strength.is-good   { background: #84cc16; }
.op-strength.is-strong { background: #10b981; }

/* toast */
.op-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translate(-50%, 1rem);
	z-index: 100;
	max-width: calc(100vw - 2rem);
	padding: 0.8rem 1.1rem;
	border-radius: 0.8rem;
	font-size: 0.875rem;
	font-weight: 500;
	background: #171717;
	color: #fff;
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
	opacity: 0;
	transition: opacity .25s, transform .25s;
}
.op-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
html.dark .op-toast { background: #e8ecf4; color: #0e1424; }

/* floating chat bubbles */
@keyframes op-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}
@keyframes op-typing {
	0%, 60%, 100% { opacity: .35; transform: translateY(0); }
	30%           { opacity: 1;   transform: translateY(-3px); }
}
.op-float { animation: op-float 6s ease-in-out infinite; }
.op-delay-1 { animation-delay: -1.5s; }
.op-delay-2 { animation-delay: -3s; }
.op-delay-3 { animation-delay: -4.5s; }
.op-typing { animation: op-typing 1.2s ease-in-out infinite; }
.op-typing:nth-child(2) { animation-delay: .15s; }
.op-typing:nth-child(3) { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
	.op-float, .op-typing { animation: none; }
}

/* ======================================================
   Homepage
   ====================================================== */
.op-section { scroll-margin-top: 5rem; }

/* dotted background that works in light + dark */
.op-grid {
	background-image: radial-gradient(rgba(23, 23, 23, 0.09) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 70%);
	mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 70%);
}
html.dark .op-grid {
	background-image: radial-gradient(rgba(232, 236, 244, 0.08) 1px, transparent 1px);
}

/* hero buttons */
.op-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	height: 3.25rem;
	padding: 0 1.75rem;
	border-radius: 1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	transition: background .2s, color .2s, border-color .2s, transform .1s;
}
.op-hero-btn:active { transform: scale(0.98); }
.op-hero-primary { background: #171717; color: #fff; }
.op-hero-primary:hover { background: #10b981; color: #fff; }
html.dark .op-hero-primary { background: #e8ecf4; color: #0e1424; }
html.dark .op-hero-primary:hover { background: #34d399; color: #0e1424; }
.op-hero-secondary { border: 1px solid #d4d4d4; color: #171717; background: transparent; }
.op-hero-secondary:hover { border-color: #10b981; color: #059669; }
html.dark .op-hero-secondary { border-color: #2a3550; color: #e8ecf4; }
html.dark .op-hero-secondary:hover { border-color: #34d399; color: #34d399; }

/* story ring */
.op-ring { display: block; background: conic-gradient(from 200deg, #10b981, #38bdf8, #10b981); }

/* small section tag */
.op-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #059669;
	background: rgba(16, 185, 129, 0.1);
}
html.dark .op-tag { color: #34d399; }
.op-tag-dark { color: #34d399; background: rgba(16, 185, 129, 0.12); }

/* interest chips */
.op-chip {
	padding: 0.5rem 0.95rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	color: #d5dbe8;
	background: transparent;
	border: 1px solid #2a3550;
	cursor: pointer;
	transition: all .2s;
}
.op-chip:hover { border-color: #10b981; }
.op-chip.is-active { background: #10b981; border-color: #10b981; color: #0e1424; font-weight: 600; }

/* stranger chat bubbles */
@keyframes op-pop {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
.sc-msg { animation: op-pop .25s ease-out both; }
.sc-me, .sc-them { max-width: 82%; padding: 0.6rem 0.95rem; border-radius: 1.1rem; line-height: 1.4; word-wrap: break-word; }
.sc-me   { background: #10b981; color: #0e1424; font-weight: 500; border-bottom-right-radius: 0.3rem; }
.sc-them { background: #1d263b; color: #e8ecf4; border-bottom-left-radius: 0.3rem; }
.sc-sys  { text-align: center; font-size: 0.75rem; color: #8793ae; padding: 0.25rem 0; }

@keyframes op-spin { to { transform: rotate(360deg); } }
.sc-spinner {
	display: inline-block; width: 0.9rem; height: 0.9rem; margin-right: 0.5rem;
	border: 2px solid #2a3550; border-top-color: #10b981; border-radius: 50%;
	animation: op-spin .8s linear infinite; vertical-align: -2px;
}
@media (prefers-reduced-motion: reduce) {
	.sc-msg, .sc-spinner { animation: none; }
}

/* FAQ accordion (native <details>, no JS, fully crawlable) */
.op-faq summary::-webkit-details-marker { display: none; }
.op-faq[open] .op-chev { transform: rotate(180deg); color: #10b981; }
.op-faq[open] { border-color: rgba(16, 185, 129, 0.5); }

/* ======================================================
   Friends & Stories page
   ====================================================== */
.op-scroll {
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.op-scroll::-webkit-scrollbar { display: none; }

/* ======================================================
   Stranger Chat page: theme-aware stage (light + dark)
   ====================================================== */
.op-dots-t {
	background-image: radial-gradient(rgba(23, 23, 23, 0.09) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
html.dark .op-dots-t {
	background-image: radial-gradient(rgba(232, 236, 244, 0.12) 1px, transparent 1px);
}

.op-chip-t {
	padding: 0.5rem 0.95rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	color: #404040;
	background: #fff;
	border: 1px solid #d4d4d4;
	cursor: pointer;
	transition: all .2s;
}
.op-chip-t:hover { border-color: #10b981; color: #059669; }
html.dark .op-chip-t { color: #d5dbe8; background: transparent; border-color: #2a3550; }
html.dark .op-chip-t:hover { border-color: #10b981; color: #d5dbe8; }
.op-chip-t.is-active,
html.dark .op-chip-t.is-active {
	background: #10b981;
	border-color: #10b981;
	color: #0e1424;
	font-weight: 600;
}

/* ======================================================
   Legal pages (Terms, Privacy, Community Guidelines)
   ====================================================== */
.op-legal a:not(.group) {
	color: #059669;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(16, 185, 129, 0.4);
	transition: color .2s, text-decoration-color .2s;
}
.op-legal a:not(.group):hover {
	color: #10b981;
	text-decoration-color: currentColor;
}
html.dark .op-legal a:not(.group) { color: #34d399; }
html.dark .op-legal a:not(.group):hover { color: #6ee7b7; }
.op-legal strong { color: #171717; font-weight: 600; }
html.dark .op-legal strong { color: #e8ecf4; }

/* ======================================================
   About & Contact: textarea
   ====================================================== */
.op-textarea {
	height: auto;
	min-height: 9rem;
	padding: 0.85rem 1rem;
	line-height: 1.5;
	resize: vertical;
}