/* 7f136d06e8 */
/*
 * The same nine self-hosted skin fonts as the portal's
 * apps/core/app/assets/css/main.css, copied into fonts/ by
 * scripts/sync-fonts.sh so a shell never talks to Google's font servers at
 * request time. Latin subset only (unicode-range copied from Google's own
 * latin block, identical across every face here) -- a shell never renders
 * latin-ext text.
 *
 * Load this before tokens.css: tokens.css's --font-display/--font-body
 * name these families, so the @font-face rules need to exist first.
 */
@font-face {
	font-family: 'Cinzel';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/a/f/7f136d06e8-cinzel-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Cinzel';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/a/f/7f136d06e8-cinzel-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Spectral SC';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/a/f/7f136d06e8-spectral-sc-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Spectral SC';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/a/f/7f136d06e8-spectral-sc-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/a/f/7f136d06e8-roboto-condensed-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/a/f/7f136d06e8-roboto-condensed-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/a/f/7f136d06e8-source-sans-3-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/a/f/7f136d06e8-source-sans-3-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/a/f/7f136d06e8-source-sans-3-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * The five custom properties every shell-kit component and every shell's own
 * CSS is written against. These are the RiFT defaults, copied from the RiFT
 * brand palette so a shell looks right even before any brand-specific
 * override runs.
 *
 * A shell overrides them per its own brand two ways: statically, by
 * redeclaring the ones it wants under `:root` in its own stylesheet loaded
 * after this file; or at runtime, by shipping a local `brand.json` with a
 * `theme` object and calling `applyTheme(json)` from js/brand.js, which sets
 * these same properties on `document.documentElement.style`.
 *
 * --font-display and --font-body are the same idea, one level simpler: a
 * shell's own brand.json carries a `fonts` key and
 * apps/brand-rift/scripts/stamp-brand.mjs writes these two values in
 * straight from it, no runtime JS involved. The defaults below are RiFT's
 * own stacks (the portal's ember skin), same reasoning as the colors above:
 * a shell with no `fonts` key in its brand.json still renders with a real
 * typeface rather than a bare system fallback.
 */

:root {
	--portal-primary: #E68837;
	--portal-surface: #112622;
	--portal-text: #E7E4DD;
	--portal-muted: #A09A92;
	--portal-accent: #D9A441;
	/* Text on top of --portal-primary (buttons). Kept separate from
	   --portal-text and --portal-surface, which describe the page, not the
	   button: a dark page surface on a saturated red made the label unreadable. */
	--portal-on-primary: #112622;
	--font-display: "Spectral SC", Georgia, serif;
	--font-body: "Roboto Condensed", Arial, sans-serif;
}

/*
 * Base layout and components for a brand shell. Loaded after tokens.css.
 * Every color here is one of the five --portal-* variables -- nothing in
 * this file names a color directly, so a shell can restyle itself entirely
 * by overriding tokens.css.
 */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--portal-surface);
	color: var(--portal-text);
	font-family: var(--font-body);
	line-height: 1.5;
}

a {
	color: var(--portal-accent);
}

h1,
h2,
h3 {
	font-family: var(--font-display);
}

.b7f1-shell {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* Header nav */

/* The frame: header pinned at the top, footer at the bottom, and only the
   middle (banner plus content, or the centred auth card) scrolls. */
body {
	height: 100svh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

header,
footer {
	flex: none;
}

.b7f1-page-scroll,
.b7f1-auth-page .b7f1-auth-main {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

header {
	border-bottom: 1px solid color-mix(in oklch, var(--portal-text) 12%, transparent);
}

header .b7f1-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
}

header nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	width: 100%;
}

/* Links marked side: right in brand.json (Register, Sign in) sit at the far
   edge; the first of them takes the slack after the left group. */
header nav a.b7f1-nav-left + a.b7f1-nav-right {
	margin-left: auto;
}

header nav a {
	color: var(--portal-text);
	font-family: var(--font-display);
	text-decoration: none;
	opacity: 0.75;
}

header nav a:hover {
	opacity: 1;
}

header nav a[aria-current='page'] {
	opacity: 1;
	color: var(--portal-accent);
	font-weight: 600;
}

/* Buttons */

.b7f1-btn {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border-radius: 0.4rem;
	border: 1px solid color-mix(in oklch, var(--portal-text) 25%, transparent);
	color: var(--portal-text);
	font-family: var(--font-display);
	text-decoration: none;
	font-weight: 600;
}

.b7f1-btn-primary {
	background: var(--portal-primary);
	border-color: var(--portal-primary);
	color: var(--portal-on-primary);
}

/* Cards */

.b7f1-card {
	background: color-mix(in oklch, var(--portal-text) 6%, var(--portal-surface));
	border: 1px solid color-mix(in oklch, var(--portal-text) 12%, transparent);
	border-radius: 0.5rem;
	padding: 1.25rem;
}

/* Hero */

.b7f1-hero-image {
	min-height: 320px;
	padding: 0;
	background: var(--brand-hero, none) center / cover no-repeat;
	border-radius: 6px;
}

/* Image-only banner: no overlay at all. Written with both classes so it
   outranks .b7f1-hero::before below, which is declared later. */
.b7f1-hero.b7f1-hero-image::before {
	content: none;
}

.b7f1-hero {
	position: relative;
	overflow: hidden;
	background: var(--brand-hero, none) center / cover no-repeat;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.b7f1-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.6));
}

.b7f1-hero > * {
	position: relative;
}

/* Auth forms (login/register) */

/* A card that wraps a .b7f1-form caps at a comfortable reading width and centers
   in whatever wider column its page puts it in, rather than stretching to
   main.b7f1-shell's full width the way a plain .b7f1-card does. */
.b7f1-card:has(> .b7f1-form) {
	max-width: 28rem;
	margin-inline: auto;
}

/* An auth-only page (login, register): the body itself is the whole layout,
   set by templates/<template>/auth.html, no header/nav/hero/footer at all --
   just the one .b7f1-card, centred. */
.b7f1-auth-page .b7f1-auth-main {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.b7f1-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.b7f1-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.b7f1-field label {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.9rem;
}

.b7f1-field input,
.b7f1-field select {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border-radius: 0.4rem;
	border: 1px solid color-mix(in oklch, var(--portal-text) 25%, transparent);
	background: var(--portal-surface);
	color: var(--portal-text);
	font-family: var(--font-body);
	font-size: 1rem;
}

.b7f1-field input:focus,
.b7f1-field select:focus {
	outline: 2px solid var(--portal-accent);
	outline-offset: 1px;
}

.b7f1-form button[type='submit'] {
	width: 100%;
}

/* Error slots stay in the DOM empty (no `hidden`, so a screen reader's
   aria-describedby reference always resolves) until auth.js writes a
   message into their textContent; visibility here tracks :not(:empty)
   rather than an attribute auth.js would have to toggle. A fixed red, not
   one of the five --portal-* tokens: an error has to read as a problem
   regardless of a brand's own accent hue (the same reasoning as
   .b7f1-hero::before's fixed black overlay above). */
.b7f1-field .b7f1-error,
.b7f1-form .b7f1-error-form {
	display: none;
	margin: 0;
	color: oklch(0.65 0.2 25);
	font-size: 0.85rem;
}

.b7f1-field .b7f1-error:not(:empty),
.b7f1-form .b7f1-error-form:not(:empty) {
	display: block;
}

.b7f1-form .b7f1-error-form:not(:empty) {
	font-weight: 600;
}

/* Status */

.b7f1-status {
	color: var(--portal-muted);
}

.b7f1-status .b7f1-is-up {
	color: var(--portal-accent);
}

.b7f1-status .b7f1-is-down {
	color: var(--portal-muted);
	opacity: 0.7;
}

@media (max-width: 640px) {
	header .b7f1-shell {
		flex-direction: column;
		align-items: flex-start;
	}

	header nav {
		gap: 0.75rem;
	}

	.b7f1-hero {
		min-height: 220px;
	}
}

/*
 * split template: a scrolling content column on the left, the brand image
 * filling the right on every page. The kit's pinned header/footer frame is
 * replaced by the column's own scroll; on narrow screens the image becomes
 * a strip above the column.
 */
:root {
	--t-line: color-mix(in oklch, var(--portal-text) 12%, transparent);
	--t-muted: var(--portal-muted);
}
body.b7f1-t-split {
	display: block;
	height: 100svh;
	overflow: hidden;
}
.b7f1-split {
	display: grid;
	/* The text column is FIXED, not fluid. minmax(340px, 600px) let it grow and
	   shrink with the window, so every resize reflowed the prose and the art
	   jumped around with it. min() pins it at 720px on any window wide enough to
	   hold it, which is everything from 1310px up, and only starts yielding below
	   that so the art never collapses to a sliver before the 820px breakpoint
	   takes over and stacks them. */
	grid-template-columns: min(720px, 55vw) 1fr;
	height: 100svh;
}
.b7f1-split-panel {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	min-height: 0;
}
.b7f1-split-panel header .b7f1-shell {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}
.b7f1-split-brand {
	margin: 0;
	font-family: var(--font-display);
	font-size: 2rem;
	letter-spacing: 0.05em;
	color: var(--portal-primary);
}
.b7f1-split-intro {
	display: grid;
	gap: 1.25rem;
	padding-block: 1.75rem 0.5rem;
}
.b7f1-split-tag {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
}
.b7f1-split-intro .b7f1-rates {
	padding: 0.9rem 0;
	border-top: 1px solid var(--t-line);
	border-bottom: 1px solid var(--t-line);
}
.b7f1-split-intro .b7f1-rates b {
	color: var(--portal-primary);
}
.b7f1-t-split main.b7f1-shell {
	padding-block: 1.5rem 2rem;
}
.b7f1-t-split .b7f1-auth-main {
	flex: 1;
}
.b7f1-split-panel footer {
	margin-top: auto;
	padding-block: 1.25rem;
	color: var(--portal-muted);
	font-size: 0.85rem;
	border-top: 1px solid var(--t-line);
}
.b7f1-split-art {
	position: relative;
	background: var(--brand-hero, none) center / cover no-repeat, color-mix(in oklch, var(--portal-primary) 60%, black);
}
.b7f1-split-art::after {
	content: '';
	position: absolute;
	inset: 0;
	/* The seam between the panel and the art. A two-stop fade over 14% was
	   fine against a muted hero, but against a bright image it reads as a
	   hard edge: the alpha runs out while the picture is still at full
	   brightness. This runs it over 32% and eases it, because a straight
	   alpha ramp looks abrupt in the middle even when the endpoints match.
	   The extra stops ARE the easing; linear-gradient cannot curve. */
	background: linear-gradient(
		90deg,
		var(--portal-surface) 0%,
		color-mix(in srgb, var(--portal-surface), transparent 10%) 5%,
		color-mix(in srgb, var(--portal-surface), transparent 30%) 11%,
		color-mix(in srgb, var(--portal-surface), transparent 55%) 18%,
		color-mix(in srgb, var(--portal-surface), transparent 78%) 25%,
		transparent 32%
	);
}
@media (max-width: 820px) {
	body.b7f1-t-split {
		height: auto;
		overflow: auto;
	}
	.b7f1-split {
		grid-template-columns: 1fr;
		height: auto;
	}
	.b7f1-split-art {
		order: -1;
		min-height: 36vh;
	}
	.b7f1-split-art::after {
		/* Same easing stacked, since the art sits above the panel here. */
		background: linear-gradient(
			0deg,
			var(--portal-surface) 0%,
			color-mix(in srgb, var(--portal-surface), transparent 10%) 8%,
			color-mix(in srgb, var(--portal-surface), transparent 30%) 18%,
			color-mix(in srgb, var(--portal-surface), transparent 55%) 28%,
			color-mix(in srgb, var(--portal-surface), transparent 78%) 38%,
			transparent 48%
		);
	}
	.b7f1-split-panel {
		overflow: visible;
	}
}

/* ---- prose: shared by every page rendered from content/*.md ---- */
main.b7f1-shell h2 {
	margin: 1.75rem 0 0.5rem;
}
main.b7f1-shell table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin-block: 1rem;
}
main.b7f1-shell table th:first-child,
main.b7f1-shell table td:first-child {
	width: 30%;
}
main.b7f1-shell table thead {
	display: none;
}
main.b7f1-shell table th,
main.b7f1-shell table td {
	text-align: left;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--t-line);
}
main.b7f1-shell blockquote {
	margin: 2rem 0 0;
	padding: 0.85rem 1.25rem 0.95rem 1.1rem;
	border-left: 4px solid var(--portal-accent);
	border-radius: 0 0.4rem 0.4rem 0;
	background: color-mix(in oklch, var(--portal-accent) 12%, transparent);
	font-size: 0.95rem;
	line-height: 1.55;
}
main.b7f1-shell blockquote::before {
	content: "Note";
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--portal-accent);
}
main.b7f1-shell blockquote p {
	margin: 0;
}
.b7f1-btn-row {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}
/* Status lights: text colour comes from the kit (.b7f1-is-up accent, .b7f1-is-down muted); the dot borrows it. */
.b7f1-status-lights {
	display: inline-flex;
	gap: 1.2rem;
	flex-wrap: wrap;
	font-size: 0.9rem;
}
.b7f1-status-lights [data-status]::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
	margin-right: 0.35rem;
	vertical-align: middle;
}
.b7f1-rates {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}
.b7f1-rates b {
	display: block;
	font-family: var(--font-display);
	font-size: 1.6rem;
	line-height: 1.1;
}
.b7f1-rates small {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--t-muted);
}
/* Only the home page shows the brand intro inside the hero; other hero pages show their title. */
.b7f1-home-only {
	display: none;
}
.b7f1-page-home .b7f1-home-only {
	display: revert;
}
.b7f1-page-home .b7f1-not-home {
	display: none;
}