/**
 * Plectra "the room" — member home directory (Phase 05e Wave 1).
 *
 * Styles the standing line, quiet-liveness note, and the scannable member
 * directory rendered by member-home.php through plectra_theme_render_page()
 * (so it loads inside the 640px constrained group under body.plectra-bespoke-page).
 *
 * Register-continuous with register.css / nav.css: warm paper, warm ink, terracotta
 * accent, Hanken Grotesk, hairline rules — no cards, no white panels, no grid of
 * tiles. A room you scan, not a feed you scroll.
 */

.plectra-standing {
	color: var(--wp--preset--color--ink);
	opacity: 0.85;
	margin-top: var(--wp--preset--spacing--sm);
}

.plectra-liveness {
	color: var(--wp--preset--color--accent); /* terracotta — the one warm liveness signal */
	font-size: 0.95rem;
	margin-top: var(--wp--preset--spacing--xs);
	margin-bottom: var(--wp--preset--spacing--md);
}

/* Section headers ("Who is here", "What you can do") as quiet chapter titles
 * (Design Bible: "clear labels as chapter titles", typography hierarchy). The
 * stock <h2> renders large and bold — too loud for the room. Quiet it to a small,
 * medium-weight label with a hairline underline, so it reads as a divider that
 * speaks the same rule-language as the directory rows below. */
.plectra-bespoke-page h2.plectra-section {
	font-size: 1rem; /* 16px */
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin-top: var(--wp--preset--spacing--lg);
	margin-bottom: var(--wp--preset--spacing--sm);
	padding-bottom: var(--wp--preset--spacing--xs);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* The directory: a quiet list, hairline-separated. Not cards. */
.plectra-room {
	list-style: none;
	margin: var(--wp--preset--spacing--sm) 0 0;
	padding: 0;
}

.plectra-room__member {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	margin: 0;
	padding: var(--wp--preset--spacing--sm) 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.plectra-room__member:first-child {
	border-top: 1px solid var(--wp--preset--color--rule);
}

.plectra-room__avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.plectra-room__who {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.plectra-room__name {
	font-family: var(--wp--preset--font-family--hanken-grotesk);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.plectra-room__name:hover,
.plectra-room__name:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Founding / New marks: quiet weight, never a badge pill.
 * WCAG AA (Design Bible accessibility gate): terracotta on paper is ~6:1 at full
 * opacity but dips toward the 4.5:1 floor when faded, so small-text marks stay at
 * 14px / full opacity rather than 12.8px / 0.85 — legibility over decoration. */
.plectra-room__mark {
	font-size: 0.875rem; /* 14px — the system's small-text floor */
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent);
}

.plectra-room__sub {
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink);
	opacity: 0.7;
}

.plectra-room__sub a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.plectra-room__sub a:hover,
.plectra-room__sub a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* ── The Plectra-native member profile (Phase 05e Wave 2) ─────────────────────
 * member-profile.php renders through the same plectra_theme_render_page() chrome
 * (body.plectra-bespoke-page, 640px column). It reuses .plectra-section and the
 * .plectra-room* directory above for "who they've welcomed"; the rules below add
 * the profile header, the Portrait read/edit, and the quiet link affordances —
 * register-continuous, no cards, no Nouveau chrome. */

.plectra-profile__avatar {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: var(--wp--preset--spacing--sm);
}

.plectra-bespoke-page h1.plectra-profile__name {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--xs);
}

.plectra-profile__standing {
	color: var(--wp--preset--color--ink);
	opacity: 0.85;
	margin-top: 0;
}

.plectra-profile__standing a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.plectra-profile__standing a:hover,
.plectra-profile__standing a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Portrait (read) — prose fields, hairline-separated, never a card. The markup is
 * the canonical view-tab renderer: <header> (Updated …) + <section><h3>label</h3>
 * <p>value | <em>Not yet shared.</em></p>. */
.plectra-portrait header p {
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink);
	opacity: 0.6;
	margin: 0 0 var(--wp--preset--spacing--sm);
}

.plectra-portrait section {
	margin: 0;
	padding: var(--wp--preset--spacing--sm) 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.plectra-portrait section:first-of-type {
	border-top: 1px solid var(--wp--preset--color--rule);
}

.plectra-portrait section h3 {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	opacity: 0.75;
	margin: 0 0 var(--wp--preset--spacing--xs);
}

.plectra-portrait section p {
	margin: 0;
	color: var(--wp--preset--color--ink);
	line-height: 1.6;
}

.plectra-portrait section p em {
	opacity: 0.55;
}

/* Portrait (edit) — paper fields with a rule border + terracotta focus ring (the
 * register field treatment), ink-filled submit matching .plectra-btn. */
.plectra-portrait--edit p {
	margin: 0 0 var(--wp--preset--spacing--md);
}

.plectra-portrait--edit label {
	display: block;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin-bottom: var(--wp--preset--spacing--xs);
}

.plectra-portrait--edit textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--hanken-grotesk);
	font-size: 1rem;
	line-height: 1.6;
	padding: 0.6rem 0.75rem;
}

.plectra-portrait--edit textarea:focus {
	outline: 2px solid transparent;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 2px var(--wp--preset--color--paper), 0 0 0 4px var(--wp--preset--color--accent);
}

.plectra-portrait--edit input[type="submit"] {
	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-portrait--edit input[type="submit"]:hover,
.plectra-portrait--edit input[type="submit"]:focus {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--paper);
}

/* Quiet link affordances: edit your portrait, the chain link, the edit-mode back
 * link — meta weight, terracotta on hover, never buttons. */
.plectra-profile__edit,
.plectra-profile__chain,
.plectra-profile__back {
	margin-top: var(--wp--preset--spacing--md);
	font-size: 0.95rem;
}

.plectra-profile__edit a,
.plectra-profile__chain a,
.plectra-profile__back a {
	color: var(--wp--preset--color--ink);
	opacity: 0.85;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.plectra-profile__edit a:hover,
.plectra-profile__edit a:focus-visible,
.plectra-profile__chain a:hover,
.plectra-profile__chain a:focus-visible,
.plectra-profile__back a:hover,
.plectra-profile__back a:focus-visible {
	color: var(--wp--preset--color--accent);
	opacity: 1;
}

/* ── The standing offer (Phase 05e Wave 3) ────────────────────────────────────
 * The offer is foregrounded on the profile (above the Portrait) and surfaces as a
 * sub-line in the room — what each member brings, in their own words. It is the
 * substance, so it sits slightly MORE present than the portrait prose: full ink,
 * a touch larger. Register-continuous; tokens only; WCAG AA holds. */

/* Offer (read, profile) — the member's words, given room to breathe. */
.plectra-offer__text {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 1.05rem;
	line-height: 1.65;
}

/* Empty states. Own profile: a gentle "make it theirs" nudge (terracotta, inviting).
 * Another's: the quiet, contemplative "Not yet shared." (same register as the
 * Portrait empty state). */
.plectra-offer__nudge {
	margin: 0;
	font-size: 1.05rem;
}

.plectra-offer__nudge a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.plectra-offer__empty {
	margin: 0;
	color: var(--wp--preset--color--ink);
}

.plectra-offer__empty em {
	opacity: 0.55;
}

/* Offer (edit) — same paper/rule/terracotta field treatment as the Portrait edit, plus
 * a quiet help line under the textarea. */
.plectra-offer--edit p {
	margin: 0 0 var(--wp--preset--spacing--md);
}

.plectra-offer--edit label {
	display: block;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin-bottom: var(--wp--preset--spacing--xs);
}

.plectra-offer--edit textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--hanken-grotesk);
	font-size: 1rem;
	line-height: 1.6;
	padding: 0.6rem 0.75rem;
}

.plectra-offer--edit textarea:focus {
	outline: 2px solid transparent;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 2px var(--wp--preset--color--paper), 0 0 0 4px var(--wp--preset--color--accent);
}

.plectra-offer__help {
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink);
	opacity: 0.6;
	margin-top: calc(-1 * var(--wp--preset--spacing--xs));
}

.plectra-offer--edit input[type="submit"] {
	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-offer--edit input[type="submit"]:hover,
.plectra-offer--edit input[type="submit"]:focus {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--paper);
}

/* Offer sub-line in the room — what they bring, one line under their name. Quiet
 * but a shade more present than the "invited by" sub (it is the substance, not
 * provenance): full ink at 0.8, not the 0.7 of __sub. Truncated server-side. */
.plectra-room__offer {
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
	opacity: 0.8;
	line-height: 1.5;
}

/* The onboarding nudge in the room's "what you can do" block. */
.plectra-room__nudge {
	color: var(--wp--preset--color--ink);
}

.plectra-room__nudge a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* ── Codex meta register (Phase B2 — apex mono parity) ────────────────────────
 * The room/profile PROSE stays in the warm register above (no-card doctrine intact —
 * no ivory panels, no pillar borders here; this is a room you scan). What changes is
 * only the META text — the small labels and marks the apex landing renders in
 * JetBrains Mono (its section eyebrows + EvidenceCard meta). Bring them to that voice
 * so the member surfaces speak the same mono colophon language as the footer (B1) and
 * the apex. Tokens only (consumed by their apex names via codex.css). AA re-measured
 * on paper: mist mono 6.60:1, terracotta mono 5.64:1 — both clear the 4.5:1 normal floor. */

/* Section chapter-titles ("Who is here", "What you can do", "Portrait", …) → the apex
 * section EYEBROW: mono · uppercase · tracked · mist. The hairline underline (set
 * above) is kept, so it still reads as a labelled divider — just quieter and truer to
 * the contemplative register than the 16px ink heading it replaces. */
.plectra-bespoke-page h2.plectra-section {
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	font-weight: 400;
	line-height: var(--text-eyebrow-line-height);
	text-transform: uppercase;
	letter-spacing: var(--text-eyebrow-letter-spacing);
	/* Walk (2026-06-16): "differentiate the section titles with some color accent" —
	   the mist eyebrow was too quiet to read as a chapter marker. Color it terracotta
	   (the room's one warm signal). AA: terracotta mono on paper 5.64:1 (light) /
	   accent on the lightened dark paper 5.5:1 — both clear the 4.5:1 normal floor. */
	color: var(--color-accent);
}

/* Founding / New marks → a mono tag (the EvidenceCard eyebrow idiom). Terracotta stays —
 * it is the room's one warm signal — held at the 14px small-text floor / full opacity
 * the surrounding AA note requires (terracotta on paper 5.64:1); only the FAMILY + casing
 * change. */
.plectra-room__mark {
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Portrait "Updated …" timestamp → mono caption mist (metadata register), replacing
 * the ink@0.6 approximation with the AA-true mist token (6.60:1). */
.plectra-portrait header p {
	font-family: var(--font-mono);
	font-size: var(--text-caption);
	line-height: var(--text-caption-line-height);
	color: var(--color-mist);
	opacity: 1;
}