/**
 * Imagination Network — front-end styles.
 * Ocean/coral palette to match the events site.
 */
.in-wrap {
	--in-ocean: #0E3149;
	--in-teal: #1A9C93;
	--in-coral: #E2673A;
	--in-gold: #EFAF2B;
	--in-shell: #F2F8F8;
	--in-ink: #13262F;
	--in-muted: #4F6572;
	--in-line: #D5E5E6;
	--in-paper: #fff;
	max-width: 1000px;
	margin: 0 auto;
	color: var(--in-ink);
	font-family: inherit;
}

.in-hero {
	background: linear-gradient(135deg, #E4F2F3, #CFE7E7);
	border-radius: 18px;
	padding: 36px 34px;
	margin-bottom: 24px;
}
.in-hero h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(1.6rem, 3.4vw, 2.3rem);
	color: var(--in-ocean);
	margin: 0 0 10px;
	font-weight: 900;
}
.in-hero p { color: #26424F; max-width: 62ch; margin: 0; font-size: 1.05rem; }

.in-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .in-cols { grid-template-columns: 1fr; } }

.in-card {
	background: var(--in-paper);
	border-radius: 14px;
	box-shadow: 0 4px 20px rgba(14, 49, 73, .09);
	padding: 26px;
	margin-bottom: 20px;
}
.in-card-alt { background: var(--in-shell); }
.in-card h3 {
	font-family: 'Fraunces', Georgia, serif;
	color: var(--in-ocean);
	margin: 0 0 16px;
	font-size: 1.3rem;
}

.in-wrap label { display: block; font-weight: 600; font-size: .9rem; color: var(--in-ocean); margin-bottom: 14px; }
.in-wrap input[type=text],
.in-wrap input[type=email],
.in-wrap input[type=url],
.in-wrap input[type=password],
.in-wrap select,
.in-wrap textarea {
	width: 100%;
	border: 1.6px solid var(--in-line);
	border-radius: 10px;
	padding: 11px 13px;
	font-family: inherit;
	font-size: .95rem;
	margin-top: 5px;
	background: var(--in-shell);
	color: var(--in-ink);
	box-sizing: border-box;
}
.in-wrap input:focus, .in-wrap select:focus, .in-wrap textarea:focus {
	outline: none; border-color: var(--in-teal); background: #fff;
}

.in-btn {
	display: inline-block;
	background: var(--in-coral);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 13px 26px;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	margin-top: 8px;
	transition: background .15s, transform .12s;
}
.in-btn:hover { background: #c7522a; transform: translateY(-1px); }

/* Quiet secondary action — used where a button repeats many times
   (match rows, express-interest) so the screen never fills with color. */
.in-btn-ghost {
	display: inline-block;
	background: transparent;
	color: var(--in-ocean);
	border: 1.5px solid #C4D3D6;
	border-radius: 999px;
	padding: 9px 18px;
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	text-decoration: none;
	transition: border-color .15s, background .15s, color .15s;
}
.in-btn-ghost:hover { background: var(--in-ocean); border-color: var(--in-ocean); color: #fff; }

.in-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .in-grid2 { grid-template-columns: 1fr; } }
.in-budget { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

.in-fieldset { border: 1.6px solid var(--in-line); border-radius: 12px; padding: 14px 16px; margin: 4px 0 16px; }
.in-fieldset legend { font-weight: 700; color: var(--in-ocean); padding: 0 8px; font-size: .9rem; }
.in-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (max-width: 620px) { .in-checks { grid-template-columns: 1fr 1fr; } }
.in-check { display: flex; align-items: center; gap: 6px; font-weight: 500; margin: 0; }
.in-check input { width: auto; margin: 0; }

.in-steps { margin: 0; padding-left: 20px; }
.in-steps li { margin-bottom: 10px; color: var(--in-muted); }
.in-steps strong { color: var(--in-ink); }

.in-muted { color: var(--in-muted); font-size: .9rem; }
.in-wrap a { color: var(--in-teal); }

.in-statusbar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--in-paper);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(14, 49, 73, .09);
	padding: 14px 18px;
	margin-bottom: 20px;
}
.in-role-pill {
	background: var(--in-ocean);
	color: #fff;
	border-radius: 999px;
	padding: 5px 14px;
	font-weight: 700;
	font-size: .82rem;
}
.in-badge { border-radius: 999px; padding: 5px 14px; font-weight: 600; font-size: .82rem; }
.in-badge-warn { background: #FFF3D6; color: #8A6100; }
.in-badge-good { background: #D9EEE4; color: #186B47; }
.in-badge-bad { background: #FBE3E3; color: #A8201C; }
.in-logout { margin-left: auto; font-size: .85rem; }

.in-alert { border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-weight: 600; }
.in-alert-good { background: #D9EEE4; color: #186B47; }
.in-alert-bad { background: #FBE3E3; color: #A8201C; }

.in-soon { opacity: .75; border: 1.5px dashed var(--in-line); box-shadow: none; }
.in-soon em { color: var(--in-coral); font-style: normal; font-weight: 600; }

/* ---------- Stage 2: board ---------- */
.in-details { border: 1.5px solid var(--in-line); border-radius: 12px; padding: 4px 16px; margin-bottom: 18px; }
.in-details summary { cursor: pointer; font-weight: 700; color: var(--in-coral); padding: 12px 0; }
.in-oppform { padding: 8px 0 16px; }
.in-subhead { font-family: 'Fraunces', Georgia, serif; color: var(--in-ocean); margin: 22px 0 12px; font-size: 1.05rem; }

.in-opp { border: 1.5px solid var(--in-line); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; background: #fff; }
.in-opp-head { display: flex; align-items: center; gap: 10px; }
.in-opp-head strong { font-family: 'Fraunces', Georgia, serif; color: var(--in-ocean); font-size: 1.08rem; flex: 1; }
.in-opp-status { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: 3px 10px; }
.in-status-open { background: #D9EEE4; color: #186B47; }
.in-status-closed { background: #E7EDF6; color: #55627A; }
.in-status-filled { background: #FFF3D6; color: #8A6100; }
.in-opp-by { color: var(--in-muted); font-size: .85rem; margin-top: 2px; }
.in-opp-brief { color: var(--in-ink); font-size: .93rem; margin: 8px 0; }
.in-opp-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 10px; }
.in-opp-meta span { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .74rem; color: var(--in-muted); }
.in-interest { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.in-interest input[type=text] { flex: 1; min-width: 200px; margin: 0; }
.in-btn-sm { padding: 9px 16px; font-size: .88rem; margin-top: 0; }
.in-link { color: var(--in-coral); font-weight: 600; font-size: .88rem; text-decoration: none; }

/* ---------- Stage 2: messaging ---------- */
.in-unread-count, .in-unread-dot { background: var(--in-coral); color: #fff; }
.in-unread-count { border-radius: 999px; padding: 1px 9px; font-size: .8rem; vertical-align: middle; }
.in-unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; }
.in-msg-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; min-height: 260px; }
@media (max-width: 680px) { .in-msg-layout { grid-template-columns: 1fr; } }
.in-thread-list { border-right: 1px solid var(--in-line); padding-right: 8px; }
@media (max-width: 680px) { .in-thread-list { border-right: none; border-bottom: 1px solid var(--in-line); padding-bottom: 8px; } }
.in-thread-item { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; margin-bottom: 4px; }
.in-thread-item:hover { background: var(--in-shell); }
.in-thread-active { background: var(--in-shell); }
.in-thread-org { display: block; font-weight: 700; color: var(--in-ocean); font-size: .92rem; }
.in-thread-role { display: block; font-size: .76rem; color: var(--in-muted); }
.in-messages { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; max-height: 340px; overflow-y: auto; padding: 4px; }
.in-msg { max-width: 78%; align-self: flex-start; }
.in-msg-body { background: var(--in-shell); border-radius: 12px; padding: 10px 14px; color: var(--in-ink); font-size: .93rem; }
.in-msg-date { font-size: .7rem; color: var(--in-muted); margin-top: 3px; }
.in-msg.in-mine { align-self: flex-end; }
.in-msg.in-mine .in-msg-body { background: var(--in-ocean); color: #fff; }
.in-msg.in-mine .in-msg-date { text-align: right; }
.in-reply { display: flex; gap: 8px; align-items: flex-end; }
.in-reply textarea { flex: 1; margin: 0; }

/* ---------- Stage 3: matches ---------- */
.in-opp-actions { display: flex; gap: 16px; margin-bottom: 10px; align-items: center; }
.in-link-muted { color: var(--in-muted); }
.in-match-hint { font-size: .86rem; margin: 6px 0 0; }
.in-matches { border-top: 1px solid var(--in-line); margin-top: 14px; padding-top: 4px; }
.in-matches-head { font-weight: 600; color: var(--in-muted); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; margin: 12px 0; display: flex; align-items: center; gap: 8px; }
.in-match-src { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .62rem; font-weight: 600; text-transform: uppercase; background: transparent; color: var(--in-muted); border: 1px solid var(--in-line); border-radius: 5px; padding: 2px 7px; letter-spacing: .04em; }
.in-match { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--in-shell); }
.in-match:last-child { border-bottom: none; }
.in-match-score { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.in-match-body strong { color: var(--in-ocean); font-family: 'Fraunces', Georgia, serif; font-size: 1.02rem; }
.in-match-role { font-size: .7rem; color: var(--in-muted); text-transform: uppercase; letter-spacing: .06em; margin-left: 4px; }
.in-match-reason { font-size: .875rem; color: var(--in-muted); margin: 4px 0 0; line-height: 1.45; }
.in-match-go { white-space: nowrap; }