/*
 * register.css — Plectra theme (05r-02)
 *
 * Front-end register styling for the *components* that 05r-01's shared chrome
 * does not itself style: the bespoke-page lists (/tree, /moderations, /waitlist),
 * the register button, and the header wordmark. Enqueued unconditionally on
 * wp_enqueue_scripts (these are not BuddyPress-component pages, so they are out
 * of quiet-bp.css's #buddypress scope), but the list rules are scoped to
 * body.plectra-bespoke-page — the body class set by plectra_theme_render_page()
 * (05r-01) — so they only touch the wrapped bespoke pages.
 *
 * Closes UI-REVIEW P1-4 (raw disc bullet lists), P1-3 (system 3D button on
 * /waitlist), P2-1 (raw site-title wordmark). Tokens are the theme.json presets,
 * loaded by wp_head on every front-end page.
 *
 * WCAG AA: ink-on-paper, paper-on-ink, terracotta-on-paper all exceed 4.5:1; mist
 * markers/meta are only used on paper at >=16px.
 *
 * @package plectra-theme
 */

/* ── Header wordmark (P2-1, UI-SPEC §2) ──────────────────────────────────────
 * Style the site-title block into a real wordmark — Hanken Grotesk 500, ink,
 * generous padding, no underline — instead of raw, plain-weight site-title text.
 * NOTE: the lowercase blogname text ("cooperators" -> "The Cooperators") is
 * identity/data and is owned by 05r-03; this rule is typography only. */
.wp-block-site-title {
	font-weight: 500;
}

.wp-block-site-title a {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--hanken-grotesk);
	font-weight: 500;
	font-size: 1.5rem;
	letter-spacing: -0.015em;
	line-height: 1.1;
	text-decoration: none;
	padding: 0.25rem 0;
	display: inline-block;
}

.wp-block-site-title a:hover,
.wp-block-site-title a:focus {
	color: var(--wp--preset--color--accent); /* terracotta */
	text-decoration: none;
}

/* Masthead size parity across wrappers (IA reorg, 2026-06-12). The wordmark renders
 * in THREE wrappers — block template, bespoke plectra_theme_render_page, and
 * BuddyPress theme-compat. The base `.wp-block-site-title a` rule above is a single
 * class selector that BuddyPress Nouveau's body-scoped typography can outweigh on BP
 * screens (/invitations, profile), and source order can flip on the bespoke wrapper —
 * so the masthead read at different sizes on /charter and /invitations. Re-state the
 * size scoped to the header band (present in ALL three wrappers) to raise specificity
 * (0,2,1) so the quiet wordmark wins everywhere. This is the masthead size — NOT the
 * --text-wordmark clamp (4–6rem), which is the hero size. */
.plectra-header-band .wp-block-site-title a {
	font-size: 1.5rem;
	line-height: 1.1;
}

/* ── Bespoke-page lists (P1-4, UI-SPEC §4) ───────────────────────────────────
 * Stop the /tree chain and /moderations log reading as raw browser `disc`
 * bullets at default indent. The tree is a nested hierarchy, so it KEEPS list
 * markers (they carry structure) but quiets them to mist with breathing room;
 * the flat entry lists drop markers entirely and rely on spacing-scale gaps. */

/* Tree chain — quiet nested markers + hanging rhythm. */
.plectra-bespoke-page ul {
	padding-left: 1.25rem;
}

.plectra-bespoke-page li {
	margin-block: 0.35rem;
}

.plectra-bespoke-page li::marker {
	color: var(--wp--preset--color--mist);
}

/* Flat entry lists — no markers; spacing-scale separation between entries. */
.plectra-bespoke-page .plectra-waitlist-entries,
.plectra-bespoke-page .plectra-moderation-log {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.plectra-bespoke-page .plectra-waitlist-entry,
.plectra-bespoke-page .plectra-moderation-entry {
	list-style: none;
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--sm, 1rem);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.plectra-bespoke-page .plectra-waitlist-entry::marker,
.plectra-bespoke-page .plectra-moderation-entry::marker {
	content: "";
}

/* Quiet meta + badge on the bespoke entry lists. */
.plectra-bespoke-page .plectra-moderation-meta,
.plectra-bespoke-page .plectra-waitlist-city,
.plectra-bespoke-page .plectra-waitlist-badge {
	color: var(--wp--preset--color--mist);
	font-size: 0.9375rem;
}

/* ── Register button (P1-3, UI-SPEC §4) ──────────────────────────────────────
 * The /waitlist "Invite this person." control renders as a grey 3D system
 * <button>. Give it (and a reusable .plectra-btn) the register treatment —
 * ink-filled, Hanken Grotesk 500, terracotta on hover — matching login.css and the
 * #buddypress button rule in quiet-bp.css so every button reads the same. */
.plectra-bespoke-page .plectra-waitlist-invite-btn,
.plectra-btn {
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	color: var(--wp--preset--color--paper);
	box-shadow: none;
	text-shadow: none;
	font-family: var(--wp--preset--font-family--hanken-grotesk);
	font-weight: 500;
	font-size: 1rem;
	padding: 0.6rem 1.25rem;
	cursor: pointer;
}

.plectra-bespoke-page .plectra-waitlist-invite-btn:hover,
.plectra-bespoke-page .plectra-waitlist-invite-btn:focus,
.plectra-btn:hover,
.plectra-btn:focus {
	background: var(--wp--preset--color--accent); /* terracotta */
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--paper);
}

.plectra-bespoke-page .plectra-waitlist-invite-btn:focus,
.plectra-btn:focus {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 2px var(--wp--preset--color--paper), 0 0 0 4px var(--wp--preset--color--accent);
}

/* The "inviting not available" note reads as quiet meta, not a disabled button. */
.plectra-bespoke-page .plectra-waitlist-invite-inactive {
	color: var(--wp--preset--color--mist);
	font-size: 0.9375rem;
}

/* ── Footer band (05e Wave 1 polish, UI-SPEC §2) ─────────────────────────────
 * The footer is its own full-width band that brackets the narrow content column
 * (parts/footer.html) — copyright "comment" left, the credit comment (Curated by ·
 * Created by Plectra · Terms · Privacy) right, with a hairline top rule. Brand
 * hierarchy inverted: the community is the brand, Plectra is a quiet credit.
 *
 * The shared render wrapper nests the footer template part INSIDE the 640px
 * constrained content group, so the global `.is-layout-constrained > *` rule
 * centers it at content width. Break it out to fill the row: `footer` is unique
 * to this part (the header band uses `header`), so this never touches the header.
 * margin-inline:0 + max-width:none escapes the constraint without a 100vw hack
 * (no scrollbar overflow). */
footer.wp-block-template-part {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Walk (2026-06-16): the footer read "too spacious" — the gap from content to the top
   rule (margin-top) and from the rule to the footer text (padding-top) were both `xl`
   (5rem). Tightened to `lg` (3rem) so the footer settles closer without crowding. */
.plectra-footer-band {
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	border-top: 1px solid var(--wp--preset--color--rule);
	margin-top: var(--wp--preset--spacing--lg);
}

/* One justified row (walk 2026-06-16; columns 2026-06-17): copyright LEFT ·
   color-mode toggle CENTER · credit comment RIGHT. Columns are `auto 1fr auto` — each
   TEXT zone sizes to its own content (the credit is longer than the copyright, so a
   symmetric `1fr auto 1fr` wrongly capped the credit at the copyright's width and
   squeezed "Privacy" onto a second line). The toggle floats in the flexible middle
   (justify-self:center), balanced between the two text blocks. Stacks below 1100px
   (where all three can't honestly share one line at the 15px mono caption). The block
   layout is `default`, so no generated flex container fights this. */
.plectra-footer__row {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}

.plectra-footer__copy {
	justify-self: start;
}

.plectra-footer__modes {
	justify-self: center;
}

/* Right zone (credits) — pinned to the right of the row (justify-self), a baseline flex
   row of whole clauses that wraps as a block, never mid-phrase. Walk (2026-06-16): the
   old rigid `max-width:60ch` + `text-align:right` paragraph broke "Curated by … • Terms •
   Privacy" across lines awkwardly ("weird formatting" on the phone). Now each clause is an
   unbreakable unit; the row right-aligns opposite the copyright on wide and collapses left
   when it wraps under it. The flex gap supplies the spacing the bullets used to pad. */
.plectra-footer__credits {
	justify-self: end;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: 0.2rem 0.4rem;
}

/* Each credit clause stays whole — no break inside "Curated by Dom Sagolla". */
.plectra-footer__clause {
	white-space: nowrap;
}

.plectra-footer__row > p {
	margin-block: 0;
}

/* The long credit line + a 3-way row can't honestly share one line until ~1100px at
   the 15px mono caption (below it the credit wrapped "Privacy" off the end). Below
   that, stack the three zones left-aligned: copyright, then the toggle, then the
   credits — the same clean column the phone gets. */
@media (max-width: 1100px) {
	.plectra-footer__row {
		grid-template-columns: 1fr;
		row-gap: var(--wp--preset--spacing--md);
	}
	.plectra-footer__copy,
	.plectra-footer__modes,
	.plectra-footer__credits {
		justify-self: start;
	}
	.plectra-footer__credits {
		justify-content: flex-start;
	}
}

/* Quiet bullet separators between the credit clauses. */
.plectra-footer__sep {
	color: var(--color-rule);
}

/* ── Codex colophon register (Phase B1 — apex Colophon parity) ────────────────
 * The apex landing's footer (app/components/Colophon.tsx) renders the colophon in
 * the MONO CAPTION voice — JetBrains Mono, caption size, mist — with moss-underlined
 * links. Bring the community footer to the same register now that B0 loaded the
 * Codex fonts/tokens (consumed here by their apex names via codex.css). The two
 * footers differ only in layout (community = substance-left / comment-right two-zone
 * split, a deliberate 05e decision; apex = centered) — the TYPE register is now
 * identical. mist mono on paper = 6.60:1 (AA normal); moss link on paper = 7.04:1. */
.plectra-footer__row > p {
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	line-height: var(--text-caption-line-height);
	color: var(--color-mist);
}

/* The curator mailto in the moss-underline link idiom (apex Colophon linkCls):
   moss text, 2px moss underline at 4px offset, settling to ink on hover/focus.
   Higher specificity than theme.json elements.link (terracotta) so it wins here only. */
.plectra-footer__row a {
	color: var(--color-moss);
	text-decoration: underline;
	text-decoration-color: var(--color-moss);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	transition: color 150ms var(--ease-out);
}

.plectra-footer__row a:hover,
.plectra-footer__row a:focus-visible {
	color: var(--color-ink);
}

.plectra-footer__row a:focus-visible {
	outline: 2px solid var(--color-moss);
	outline-offset: 2px;
}

/* ── Codex meta register (Phase B5 — apex mono parity) ────────────────────────
 * Bring the bespoke-list META on /tree, /moderations, /waitlist into the apex mono
 * voice, matching the footer/room/ask (B1–B3). Only meta moves: the moderation meta +
 * waitlist city → mono caption; the waitlist badge → a quiet mono status tag. Entry
 * prose, the tree chain, and member names stay warm. Size is unchanged (these were
 * already 0.9375rem = --text-caption), so the existing AA holds: mist on paper 6.60:1. */
.plectra-bespoke-page .plectra-moderation-meta,
.plectra-bespoke-page .plectra-waitlist-city,
.plectra-bespoke-page .plectra-waitlist-badge {
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	line-height: var(--text-caption-line-height);
}

/* The waitlist badge (the entry's standing/source) → a quiet mono status tag —
 * mist is kept (these lists read quiet by design); only family + casing change. */
.plectra-bespoke-page .plectra-waitlist-badge {
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ── Bespoke content rail (D3 walk finding #10) ───────────────────────────────
 * plectra_theme_render_page() drops plugin pages (/invite, /tree, /moderations,
 * profile, …) into a full-bleed paper band. Hang the content on the SAME left rail
 * as the masthead instead of centering it: a left-aligned readable measure whose
 * left padding (md, on .plectra-bespoke-main) equals .plectra-header-band's padding,
 * so the page content lines up under the wordmark. The wrapper now uses a default
 * (flow) layout, so this simply caps + left-aligns the content box.
 *
 * The horizontal padding is what does the rail alignment: the bespoke band starts at
 * x=0 (full-bleed at body root, same as the header band), and the masthead wordmark is
 * inset by the header band's `md` padding — so the content needs the SAME `md` left
 * inset to line up under it. margin-left:0 alone left the content flush at the band
 * edge, hanging left of the wordmark (caught on Dom's live walk 2026-06-16).
 * padding-right:md also keeps the measure off the right edge on phones. The max-width
 * is bumped by 2·md so the readable measure stays ~640px after the new padding.
 *
 * padding-top (walk Round 3, 2026-06-17): the page title sat too close to the header
 * band's bottom hairline rule. The top gap was authored INLINE on the bespoke-main group
 * (style.spacing.padding.top=lg) in functions.php, but do_blocks() STRIPS spacing supports
 * for hand-authored static groups → it rendered ~0 and the title hugged the rule. Set the
 * gap here in CSS so it actually lands. md = the header band's md bottom padding (nav→rule),
 * so the gap above the rule (nav→rule) and below it (rule→title) read EVEN. */
.plectra-bespoke-page .plectra-bespoke-main {
	max-width: calc(640px + 2 * var(--wp--preset--spacing--md));
	margin-left: 0;
	margin-right: auto;
	padding-top: var(--wp--preset--spacing--md);
	padding-left: var(--wp--preset--spacing--md);
	padding-right: var(--wp--preset--spacing--md);
}

/* ── Page-title hierarchy (D3 walk finding #11) ───────────────────────────────
 * The bespoke pages led with a same-weight heading (/invite's title was even an
 * <h2>), so title and section dividers read flat. Give the page H1 the D3 display
 * voice — Hanken, large, tight — a clear step above body and the quiet mono section
 * eyebrow (room.css h2.plectra-section). One H1 per page = the page title.
 * AA: ink on paper far exceeds 4.5:1 in both modes. */
.plectra-bespoke-page h1 {
	font-family: var(--wp--preset--font-family--hanken-grotesk);
	font-size: clamp(1.75rem, 1rem + 2vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--sm);
}

/* ── Title separator (walk 2026-06-16) ───────────────────────────────────────────
 * The <hr> beneath the page title ("Welcome, …" / page H1) is the "separator row".
 * With no theme rule it inherited an asymmetric gap — too far below the title, too
 * close to the content beneath. Give it EQUAL top/bottom margins so the title and the
 * content breathe evenly around it. 1.5rem dominates the adjacent title (margin-bottom
 * sm = 1rem) and standing line (margin-top sm = 1rem) via collapse, so both gaps land
 * at 1.5rem. Scoped to bespoke pages, so the anonymous front-page separator is untouched. */
.plectra-bespoke-page .wp-block-separator {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}