/* ══════════════════════════════════════════════════════════════════════════
 * THE PAGE FRAME — one width, one set of gutters, one title, on every member
 * screen (Kevin, 5 Oct 2026).
 *
 * Kevin: *"we have several pages on desktop that don't use all the center
 * space....example is Upcoming, newsletter requests, groups....we need to be
 * consistent with our desktop theme (and mobile) I also notice many of the
 * screens don't have the same size or maybe style font for the page name in the
 * center panel and that spacing is not consistent on top and sides for many of
 * these pages. why is this?"*
 *
 * WHY IT WAS SO. Every screen chose its own frame, one at a time. The bare
 * hubs capped every child of the main column at 640px (style.css, "a value to
 * revisit when there is a desktop board"), and Home, People, Apps and Your
 * bookmarks each opted out to 1128px in their own sheet; Upcoming, Groups,
 * Newsletter and a member's profile never did. The hubs took BuddyNext's 24px
 * side gutter and a 36px top; the vendor app screens took app.css's 28px and
 * whatever top each vendor's own container brought (0px on Jobs and Courses,
 * 57px on a listing); Settings and Notifications, which are not bare hubs, kept
 * BuddyNext's 12px on a phone. And every page name was whoever drew it: our
 * 30px desktop title, Eventonomy's, WP Career Board's and Learnomy's 22px/600,
 * Learnomy's account 30px/600, a listing's 32px, the index page's 30px on a
 * phone too, the media heading's 20px, the card screens' 24px/600.
 *
 * THE RULE, defined once here (tokens below) and applied in one place to every
 * centre panel, ours and the vendors':
 *
 *   panel     the whole width between the rail (and a right-hand sidebar, where
 *             a screen has one) and the window, inside the gutters, up to
 *             1128px. 1128 is the content width of Dana's desktop shell at
 *             1440 (`Main.dc.html`: 1440 - the 248px rail - 2 x 32px), the
 *             width Home, People, Apps and Bookmarks already take.
 *   gutters   desktop 32px each side and 28px under the desktop bar (her
 *             `<main>`, `padding: 28px 32px 40px`); 64px under the last thing,
 *             as built. Phone 22px 18px 110px (her `PeoplePhone` frame).
 *   title     ONE per screen, Outfit 700, 25px / 1.2 on a phone (every Key
 *             Flows phone heading: Family boards 1 and 6b, Apps boards 2 and 3)
 *             and 30px / 1.2, -0.01em on a desktop (her desktop title), in the
 *             ink, 12px / 20px above what follows.
 *   source    a screen of ours names itself in the shared top row (phone,
 *             `Chrome\TopRow`) and the desktop head (`Chrome\DeskBar::head`); a
 *             vendor's screen or a page keeps its own on-page <h1>, restyled
 *             here by class, never by a copied template. A back-arrow row is a
 *             sub-screen's row and keeps its smaller title, as drawn.
 *
 * Kept as drawn or ruled, and therefore NOT changed here: the Messages screen
 * (Better Messages takes the whole column, 2 Oct 2026), the three flow screens
 * (Start a group, What you're waiting on, Design your avatar: their own header,
 * ruled 5 Oct 2026), the card screens' 480px card (2 Oct 2026: "The card keeps
 * its own 480px column"), Home's 640px feed beside its sidebar (her `Main`),
 * and the sign-in door (signed out, no frame).
 *
 * Loaded on every page after the theme's own sheet (functions.php). Tokens and
 * geometry only: no colour is set here but the title's ink.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
	--ek-page-max:        1128px;
	--ek-page-pad-x:      18px;
	--ek-page-pad-top:    22px;
	--ek-page-pad-bottom: 110px;

	--ek-title-font:      var(--ek-font);
	--ek-title-size:      25px;
	--ek-title-weight:    700;
	--ek-title-line:      1.2;
	--ek-title-track:     0;
	--ek-title-gap:       12px;
	/* --ek-title-color is read as `var(--ek-title-color, var(--ds-ink))`, not
	   declared here: declared on :root it would freeze the root's ink, and a
	   scheme set lower down would not reach it. */

	/* An article's reading measure: about 70 characters a line of its body
	   (Inter at 1.125rem averages about 0.48em a character; measured 5 Oct). In
	   rem, so a member's text size moves the column with the type. */
	--ek-read-max:        34rem;
}

@media (min-width: 768.02px) {
	:root {
		--ek-page-pad-x:      32px;
		--ek-page-pad-top:    28px;
		--ek-page-pad-bottom: 64px;

		--ek-title-size:      30px;
		--ek-title-track:     -0.01em;
		--ek-title-gap:       20px;
	}
}

/* ── 1. The shell is the window's width, not the viewport's ────────────────
 *
 * BuddyNext's hub shell bursts out of a theme's container with `width: 100vw;
 * margin-inline: -50vw; inset-inline: 50%` (bn-shell.css). This theme has no
 * container to escape, and `100vw` counts the scrollbar: on a desktop with a
 * classic scrollbar (Windows) every hub was 15px wider than the window, shifted
 * half of that off the left edge, its rail clipped and its right gutter under
 * the scrollbar. The app screens never did it, so the two kinds of screen sat
 * 8px apart at both edges. The window's own width, and nothing to escape.
 */
body .bn-app:not(.bn-app--embedded) {
	inset-inline: auto;
	margin-inline: 0;
	width: 100%;
	max-width: 100%;
}

/* ── 2. The centre panel ───────────────────────────────────────────────────
 *
 * Every BuddyNext hub but the three that are not pages of ours: Messages (the
 * messenger is the column), the vendor's own messages hub, and the sign-in
 * door. `:not()` carries the weight to outrank the hub sheets' own rules
 * (style.css `body.ek-bare .bn-app__main`, BuddyNext's 12px phone gutter) on
 * Settings and Notifications as well, which are hubs but not bare ones.
 *
 * Messages and Home are told by what is IN the column (`:has(> .ek-msgs)`,
 * `:has(> .ek-home)`), never by `#bn-app[data-bn-hub]`: that attribute is outside
 * BuddyNext's swap region and keeps the hub of the page the member LOADED, so
 * after a tap from Home to Messages the frame took the messenger for Home's, and
 * after a tap out of Messages it left the next screen unframed (found 5 Oct
 * 2026, Kevin: "Messages is special it needs to take up the whole center
 * column"). The vendor's messages hub and the sign-in door are never swapped to
 * or from (`Chrome\ClientNav::SWAP_HUBS`), so their attribute is safe. Same
 * weight as before (0,5,1 and 0,4,1).
 */
body .bn-app:not([data-bn-hub="messages"]):not([data-bn-hub="auth"]) .bn-app__main:not(:has(> .ek-msgs)) {
	padding: var(--ek-page-pad-top) var(--ek-page-pad-x) var(--ek-page-pad-bottom);
}

body .bn-app:not([data-bn-hub="messages"]):not([data-bn-hub="auth"]) .bn-app__main:not(:has(> .ek-msgs)) > * {
	max-width: var(--ek-page-max);
	margin-inline: auto;
}

/* Home's feed keeps her 640px column beside its sidebar (`Main.dc.html`); the
   block above it (`.ek-home`) takes the panel, as it already did. */
body .bn-app .bn-app__main:has(> .ek-home) > :not(.ek-home) {
	max-width: 640px;
}

/*
 * The app screens (Events, Directory, Jobs, Courses, Media, Articles) and the
 * card screens, in `Chrome\AppScreens`' and `eklektiv_frame_open()`'s shell.
 * The flow screens keep their own (app.css, `.ek-app--flow`).
 */
.ek-app:not(.ek-app--flow) > .ek-app__shell > .ek-app__main {
	padding-inline: var(--ek-page-pad-x);
}

.ek-app:not(.ek-app--flow) > .ek-app__shell > .ek-app__main > * {
	max-width: var(--ek-page-max);
	margin-inline: auto;
}

@media (max-width: 768px) {
	/* The phone row sits 22px down, as on the hubs (app.css). */
	.ek-app:not(.ek-app--flow) > .ek-app__shell > .ek-app__main > .ek-top {
		padding-top: var(--ek-page-pad-top);
	}
}

@media (min-width: 768.02px) {
	.ek-app:not(.ek-app--flow) > .ek-app__shell > .ek-app__main {
		padding-top: var(--ek-page-pad-top);
		padding-bottom: var(--ek-page-pad-bottom);
	}
}

/*
 * The vendors' own top space, inside our column: each adds its own above its
 * heading (Eventonomy's page block, Learnomy's container, WP Career Board's
 * shell, Listora's detail page, WPMediaVerse's pages), which is why the first
 * line sat anywhere from 0 to 57px under the bar. The panel's top gutter is the
 * one top space; theirs goes to zero. Sides are already ours (app.css).
 */
.ek-app__main :is(.evnm-fullwidth, .evnm-page, .wcb-archive-shell, .wcb-archive-main, .wcb-page-article, .lrn-app, .lrn-container, .mvs-explore-page, .mvs-dashboard, .mvs-single-album, .mvs-single-collection, .ek-doc) {
	margin-block-start: 0;
	padding-block-start: 0;
}

/* The media screens' own header opens on the panel's line too (its 4px). */
.ek-app__main .ek-mm-head {
	margin-block-start: 0;
}

/*
 * A card screen: the card keeps its 480px column (2 Oct 2026), and the frame's
 * gutters are its gutters. Its own 16px a side stacked on ours (34px from the
 * edge of a phone) and its own top on the panel's (54px under the desktop bar).
 */
.ek-app--card > .ek-app__shell > .ek-app__main > .ek-pend > .ek-pend__main {
	padding-inline: 0;
	padding-top: 0;
}

@media (max-width: 768px) {
	.ek-app--card > .ek-app__shell > .ek-app__main {
		padding-top: var(--ek-page-pad-top);
	}
}

/*
 * An article reads in a column, not the panel: about 70 characters a line of
 * its body (Kevin, 5 Oct 2026: "the article page layout needs some help"). The
 * column is centred in the panel. Its own gutters and foot are the frame's.
 */
.ek-app:not(.ek-app--flow) > .ek-app__shell > .ek-app__main > .ek-article {
	max-width: var(--ek-read-max);
	padding: 0;
}

/* ── 3. The title ──────────────────────────────────────────────────────────
 *
 * Ours first, then each vendor's page heading by its own class. Only a page's
 * own heading is named: a card's or a list item's title in the same vendor
 * keeps its size, and so does a hero's (a course, a group, a profile), which
 * sits on its own picture.
 */
:is(
	.ek-deskhead--title .ek-deskhead__hello,
	.ek-top:not(.ek-top--back) .ek-top__title,
	.ek-doc__title,
	.ek-pend__big,
	.ek-mm-head__title,
	h1.evnm-search-filter__heading,
	h1.wcb-page-heading,
	h1.wcb-job-title,
	h1.lrn-archive-header__title,
	h1.lrn-page-header__title,
	h1.bn-settings__title,
	.bn-notifs-main > .bn-section-head h1.bn-section-head__title,
	h1.mvs-collection-card-title,
	h1.listora-detail__title,
	h1.ek-group__name
) {
	font-family: var(--ek-title-font);
	font-size: var(--ek-title-size);
	font-weight: var(--ek-title-weight);
	line-height: var(--ek-title-line);
	letter-spacing: var(--ek-title-track);
	color: var(--ek-title-color, var(--ds-ink));
}

/* The space under it, where the title is a block of its own on the page. A row
   title and a vendor heading inside a header row keep their row's spacing. */
:is(
	.ek-doc__title,
	.ek-pend__big,
	h1.wcb-page-heading,
	h1.lrn-archive-header__title,
	h1.bn-settings__title
) {
	margin-block: 0 var(--ek-title-gap);
}

.ek-deskhead--title {
	margin-block-end: var(--ek-title-gap);
}