/* Internmate Access — front end.
   Minimal and quiet: hairline borders, one near-black action, generous space.
   Everything is scoped to .im-* so Astra's own styles are untouched. */

.im-auth,
.im-plans,
.im-account,
.im-lock {
	--im-bg: #fff;
	--im-panel: #fafafa;
	--im-ink: #101114;
	--im-ink-2: #6b7280;
	--im-line: #e5e7eb;
	--im-action: #101114;
	--im-action-ink: #fff;
	--im-danger: #b42318;
	--im-radius: 12px;
	--im-panel-dark: #0b0d12;
	--im-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--im-ink);
	font-family: var(--im-font);
	line-height: 1.55;
}

/* Themes often set a serif on headings. These pages are UI, not article
   copy, so the sans stack is asserted rather than inherited. */
.im-auth h1,
.im-auth h2,
.im-auth h3,
.im-auth p,
.im-auth a,
.im-auth li,
.im-account h2,
.im-account h3,
.im-plans h2,
.im-plans h3,
.im-lock h3 {
	font-family: var(--im-font);
}

.im-auth *,
.im-plans *,
.im-account *,
.im-lock * {
	box-sizing: border-box;
}

/* No prefers-color-scheme switch here, deliberately.
 *
 * Earlier versions flipped these variables to a dark palette when the visitor's
 * phone was in dark mode. The theme kept painting the page white regardless, so
 * the result was near-white text and a near-white button on a white page —
 * invisible. The plugin cannot know whether the surrounding theme followed the
 * system preference, so it commits to the light palette and paints its own
 * backgrounds explicitly. The dark side panel gets its colours literally, below.
 */

/* ---------------------------------------------------------------- Button */

.im-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: .8em 1.25em;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

.im-btn:hover {
	text-decoration: none;
}

.im-btn:focus-visible {
	outline: 2px solid var(--im-ink);
	outline-offset: 2px;
}

.im-btn-block {
	width: 100%;
}

.im-btn-dark {
	background: var(--im-action);
	color: var(--im-action-ink);
}

.im-btn-dark:hover {
	color: var(--im-action-ink);
	opacity: .88;
}

.im-btn-outline {
	background: transparent;
	border-color: var(--im-line);
	color: var(--im-ink);
}

.im-btn-outline:hover {
	border-color: var(--im-ink);
	color: var(--im-ink);
}

.im-btn-quiet {
	background: var(--im-panel);
	border-color: var(--im-line);
	color: var(--im-ink-2);
	font-size: .875rem;
	padding: .55em 1em;
}

.im-gh-icon {
	flex: none;
}

/* ------------------------------------------------------------ Auth page */

.im-auth {
	display: flex;
	justify-content: center;
	padding: clamp(2rem, 8vh, 5rem) 1.25rem;
}

.im-auth-inner {
	width: 100%;
	max-width: 360px;
}

/* Full-bleed split layout ------------------------------------------------
   Breaks out of the theme's boxed container so the page runs edge to edge:
   the element is pulled back by half the difference between the viewport
   and its own centred container. */

.im-auth-split {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	align-items: stretch;
	padding: 0;
	min-height: min(720px, 80vh);
	background: #fff;
}

/* Edge-to-edge. The negative margins cancel the theme container's own
   centring, so this only lands correctly when that container really is
   centred. Width is deliberately left to the margins rather than set to
   100vw, because 100vw counts the scrollbar and scrolls the page sideways.
   Use [im_login bleed="no"] on themes where it lands wrong. */
.im-auth-bleed {
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow-x: clip;
}

/* Cover layout ------------------------------------------------------------
   The theme wraps page content in a boxed container with its own max-width,
   padding and card background. A shortcode renders inside that box and cannot
   escape it, which is where the white gutters and the gap under the header
   come from. The plugin adds .im-access-cover to <body> on the auth pages so
   those wrappers can be flattened from here.

   !important is unavoidable: these override theme rules of equal or higher
   specificity that load after this file. Scoped to the body class, so nothing
   outside the auth pages is touched. */

body.im-access-cover #content,
body.im-access-cover .site-content,
body.im-access-cover .ast-container,
body.im-access-cover #primary,
body.im-access-cover .site-main,
body.im-access-cover .ast-article-single,
body.im-access-cover .ast-article-post,
body.im-access-cover .entry-content,
body.im-access-cover .wp-site-blocks {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Sidebar, page title and the theme's post furniture have no place here. */
body.im-access-cover #secondary,
body.im-access-cover .widget-area,
body.im-access-cover .entry-header,
body.im-access-cover .entry-title,
body.im-access-cover .page-title,
body.im-access-cover .ast-single-post-order,
body.im-access-cover .post-navigation,
body.im-access-cover .ast-author-details {
	display: none !important;
}

/* The container is already full width in cover mode, so the negative-margin
   bleed would now overshoot by the scrollbar and scroll the page sideways. */
body.im-access-cover .im-auth-bleed {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.im-access-cover .im-auth-split {
	min-height: max(560px, calc(100vh - 6rem));
}

/* Pricing page ------------------------------------------------------------ */

.im-plans {
	max-width: 1080px;
	margin: 0 auto;
}

.im-plans-head {
	text-align: center;
	max-width: 620px;
	margin: 0 auto clamp(2rem, 5vw, 3rem);
}

.im-plans-title {
	margin: 0 0 .6rem;
	font-size: clamp(1.75rem, 4vw, 2.4rem);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.15;
}

.im-plans-intro {
	margin: 0;
	color: var(--im-ink-2);
	font-size: 1.02rem;
}

/* Section heading above each row of related plans. */
.im-group-title {
	margin: clamp(2rem, 4vw, 2.75rem) 0 1rem;
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--im-ink-2);
}

.im-group-title:first-child {
	margin-top: 0;
}

/* Full-width band. Reserved for the one plan that supersedes the others, so
   it reads as a conclusion to the page rather than a sixth option. */
.im-plan.is-wide {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	background: var(--im-panel-dark);
	border-color: transparent;
	color: #f4f5f7;
}

.im-plan.is-wide:hover {
	border-color: transparent;
}

.im-plan.is-wide .im-plan-name,
.im-plan.is-wide .im-plan-amount {
	color: #fff;
}

.im-plan.is-wide .im-plan-desc,
.im-plan.is-wide .im-plan-period,
.im-plan.is-wide .im-points li {
	color: rgba(244, 245, 247, .74);
}

.im-plan.is-wide .im-points {
	margin: 0;
}

.im-plan.is-wide .im-points svg {
	color: rgba(244, 245, 247, .5);
}

.im-plan.is-wide .im-btn {
	margin: 0;
	white-space: nowrap;
	background: #fff;
	color: var(--im-panel-dark);
	border-color: #fff;
}

.im-plan.is-wide .im-plan-copy > :last-child {
	margin-bottom: 0;
}

/* The badge is taken out of flow so it does not consume a grid cell. */
.im-plan.is-wide .im-plan-badge {
	position: absolute;
	top: -.7rem;
	left: 1.5rem;
}

.im-plan {
	position: relative;
}

@media (max-width: 780px) {
	.im-plan.is-wide {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.im-plan.is-wide .im-btn {
		width: 100%;
	}
}

/* Coming-soon plan: present on the page, clearly not for sale. */
.im-plan.is-soon {
	opacity: .82;
}

.im-plan-badge-soon {
	background: var(--im-panel);
	color: var(--im-ink-2);
	border: 1px solid var(--im-line);
}

.im-btn-soon {
	cursor: default;
	opacity: .75;
}

.im-credit-count {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* Boxed variant still needs to look finished. */
.im-auth-split:not(.im-auth-bleed) {
	border: 1px solid var(--im-line);
	border-radius: var(--im-radius);
	overflow: hidden;
}

.im-auth-main {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2rem, 5vw, 4rem) 1.5rem;
	background: #fff;
	color: var(--im-ink);
}

.im-aside {
	display: flex;
	flex-direction: column;
	padding: clamp(2rem, 4vw, 3.5rem);
	background: var(--im-panel-dark);
	color: #f4f5f7;
}

.im-aside-body {
	margin-top: auto;
	margin-bottom: auto;
	max-width: 420px;
}

.im-wordmark-light {
	color: rgba(244, 245, 247, .62);
	margin-bottom: 2.5rem;
}

.im-aside-head {
	margin: 0 0 2rem;
	font-size: clamp(1.6rem, 2.6vw, 2.15rem);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.2;
	color: #fff;
}

.im-aside-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .9rem;
}

.im-aside-points li {
	display: flex;
	align-items: flex-start;
	gap: .7em;
	font-size: .95rem;
	color: rgba(244, 245, 247, .74);
}

.im-aside-points svg {
	flex: none;
	margin-top: .32em;
	color: rgba(244, 245, 247, .5);
}

.im-aside-foot {
	display: flex;
	align-items: center;
	gap: .45em;
	margin: 2.5rem 0 0;
	font-size: .78rem;
	color: rgba(244, 245, 247, .45);
}

/* The aside always carries the wordmark, so the form's own copy is redundant
   inside the split layout. It still shows in layout="center". */
.im-auth-split .im-auth-inner > .im-wordmark {
	display: none;
}

/* Phone and small tablet -------------------------------------------------
   The dark panel becomes a short band across the top: enough brand presence
   to look deliberate, not enough to push the button below the fold. The
   bullet list and the GitHub footnote are dropped — on a 360px screen they
   cost a scroll and earn nothing. */

@media (max-width: 899px) {
	.im-auth-split,
	body.im-access-cover .im-auth-split {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.im-aside {
		padding: 1.75rem 1.5rem;
		padding-top: calc(1.75rem + env(safe-area-inset-top, 0px));
	}

	.im-aside-body {
		margin: 0;
		max-width: none;
	}

	.im-wordmark-light {
		margin-bottom: .85rem;
	}

	.im-aside-head {
		margin: 0;
		font-size: clamp(1.3rem, 5.6vw, 1.7rem);
	}

	.im-aside-points,
	.im-aside-foot {
		display: none;
	}

	.im-auth-main {
		align-items: flex-start;
		padding: 2.25rem 1.5rem calc(3rem + env(safe-area-inset-bottom, 0px));
	}

	.im-auth-inner {
		max-width: 420px;
	}

	.im-h1 {
		font-size: 1.5rem;
	}

	/* Comfortable thumb target: ~50px tall. */
	.im-btn {
		padding: 1em 1.4em;
		font-size: 1rem;
	}
}

@media (max-width: 400px) {
	.im-aside {
		padding: 1.5rem 1.25rem;
		padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
	}

	.im-auth-main {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

.im-auth-centered {
	text-align: center;
}

.im-wordmark {
	margin: 0 0 2.25rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--im-ink-2);
}

.im-h1 {
	margin: 0 0 .4rem;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.25;
}

.im-sub {
	margin: 0 0 1.75rem;
	font-size: .95rem;
	color: var(--im-ink-2);
}

.im-avatar {
	border-radius: 50%;
	display: block;
	margin: 0 auto 1rem;
}

.im-alert {
	margin: 0 0 1.25rem;
	padding: .7em .9em;
	border: 1px solid var(--im-line);
	border-left: 2px solid var(--im-danger);
	border-radius: 6px;
	background: var(--im-panel);
	font-size: .875rem;
	color: var(--im-danger);
}

.im-points {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: .55rem;
}

.im-points li {
	display: flex;
	align-items: flex-start;
	gap: .55em;
	font-size: .875rem;
	color: var(--im-ink-2);
}

.im-points svg,
.im-ent-name svg {
	flex: none;
	margin-top: .3em;
	color: var(--im-ink);
	opacity: .55;
}

.im-switch {
	margin: 1.75rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--im-line);
	font-size: .875rem;
	color: var(--im-ink-2);
}

.im-switch a {
	color: var(--im-ink);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.im-fine {
	margin: .9rem 0 0;
	font-size: .78rem;
	line-height: 1.5;
	color: var(--im-ink-2);
}

.im-fine a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------------------------------------------------------------- Plans */

.im-plans-title {
	margin: 0 0 2rem;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -.02em;
}

.im-plan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	align-items: stretch;
}

.im-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--im-bg);
	border: 1px solid var(--im-line);
	border-radius: var(--im-radius);
	padding: 1.5rem 1.25rem 1.25rem;
	transition: border-color .15s ease;
}

.im-plan:hover {
	border-color: var(--im-ink-2);
}

.im-plan.is-featured {
	border-color: var(--im-ink);
}

.im-plan.is-owned {
	background: var(--im-panel);
}

.im-plan-badge {
	position: absolute;
	top: -.65rem;
	left: 1.25rem;
	background: var(--im-action);
	color: var(--im-action-ink);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .28em .6em;
	border-radius: 4px;
}

.im-plan-name {
	margin: 0 0 .65rem;
	font-size: 1rem;
	font-weight: 600;
}

.im-plan-price {
	margin: 0 0 .75rem;
	display: flex;
	align-items: baseline;
	gap: .35em;
}

.im-plan-amount {
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -.03em;
}

.im-plan-period {
	font-size: .8rem;
	color: var(--im-ink-2);
}

.im-plan-desc {
	margin: 0;
	font-size: .875rem;
	color: var(--im-ink-2);
}

.im-plan .im-points {
	margin: 1rem 0 1.5rem;
}

.im-plan .im-btn {
	margin-top: auto;
	width: 100%;
}

.im-plan .im-fine {
	text-align: center;
}

/* ------------------------------------------------------------- Account */

.im-account {
	max-width: 640px;
	margin: 0 auto;
}

.im-account-head {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding-bottom: 1.25rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--im-line);
}

.im-account-head .im-avatar {
	margin: 0;
}

.im-account-id {
	min-width: 0;
}

.im-account-name {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: -.01em;
}

.im-account-meta {
	display: flex;
	align-items: center;
	gap: .35em;
	margin: .15rem 0 0;
	font-size: .85rem;
	color: var(--im-ink-2);
}

.im-account-out {
	margin-left: auto;
}

.im-eyebrow {
	margin: 0 0 .85rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--im-ink-2);
}

.im-ents {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--im-line);
	border-radius: var(--im-radius);
	overflow: hidden;
}

.im-ents li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .9rem 1.1rem;
	border-bottom: 1px solid var(--im-line);
}

.im-ents li:last-child {
	border-bottom: 0;
}

.im-ent-name {
	display: flex;
	align-items: center;
	gap: .55em;
	font-size: .95rem;
	font-weight: 500;
}

.im-ent-exp {
	font-size: .82rem;
	color: var(--im-ink-2);
}

.im-empty {
	text-align: center;
	border: 1px solid var(--im-line);
	border-radius: var(--im-radius);
	padding: 2.5rem 1.25rem;
	color: var(--im-ink-2);
}

.im-empty svg {
	opacity: .5;
}

.im-empty p {
	margin: .6rem 0 1.25rem;
	font-size: .95rem;
}

/* ---------------------------------------------------------- Lock notice */

.im-lock {
	text-align: center;
	background: var(--im-panel);
	border: 1px solid var(--im-line);
	border-radius: var(--im-radius);
	padding: 2.5rem 1.5rem;
	margin: 1.5rem 0;
}

.im-lock-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--im-line);
	border-radius: 50%;
	background: var(--im-bg);
	color: var(--im-ink-2);
	margin-bottom: .9rem;
}

.im-lock-title {
	margin: 0 0 .35rem;
	font-size: 1.05rem;
	font-weight: 600;
}

.im-lock-msg {
	margin: 0 0 1.35rem;
	font-size: .9rem;
	color: var(--im-ink-2);
}

@media (max-width: 480px) {
	.im-account-head {
		flex-wrap: wrap;
	}

	.im-account-out {
		margin-left: 0;
		width: 100%;
	}
}