/**
 * lore-portal-theme — assets/css/auth.css
 *
 * Version: 1.13.1
 *
 * Changelog:
 *   v1.13.1 — Charcoal-flash fix on the inline-edit controls (ADR-079 / GP
 *            global button:hover/:focus rule). (a) Pencil edit-button: added
 *            an explicit :focus resting restatement + :focus:hover, so the
 *            programmatic focus account-sub.js applies after Cancel no longer
 *            paints GP charcoal. (b) Cancel text-link: the interactive-state
 *            rule now restates background:transparent + border:0 across
 *            :hover/:focus/:focus-visible/:active, killing the GP charcoal
 *            box. (c) Save button: added :focus (resting cabernet) + :focus:
 *            hover, closing the same latent :focus gap defensively.
 *   v1.13.0 — Role feature. <select> styling for two surfaces: (a) auth forms
 *            (register page + modal) — select.lore-auth__input gets a custom
 *            caret + right padding since the base rule sets appearance:none;
 *            (b) the inline-edit row on /account/personal-info —
 *            .lore-account-inline-edit__field select mirrors the text-input
 *            rule with its own caret + focus ring.
 *   v1.12.0 — SCOPE-7.7 per-session list on /account/sessions. Fills the
 *            previously-reserved Q2 namespace (.lore-account-sessions__list*)
 *            with actual rules. New rule set for the list-section wrapper,
 *            list <ul>, per-session <li>, meta-column layout (device + when
 *            + ip stacked), current-session badge, and the right-aligned
 *            "Sign out" revoke button. Mobile (<960px): per-session item
 *            stacks meta-block above revoke-button vertically. Desktop
 *            (>=960px): meta-block left, revoke-button right-aligned. The
 *            already-shipped .lore-account-sessions__intro-copy and
 *            __signout-all rules from v1.6.0 are unchanged.
 *
 *            No new design tokens. All sizing + spacing reuses existing
 *            --space-* and --color-* custom properties. Pattern parallels
 *            the .lore-account-activity__list shapes (vertical-list with
 *            per-item meta on the left, action on the right) — same
 *            structural shape as the audit-history list visually.
 *
 *   v1.11.1 — SCOPE-7.6 polish round 1. Single-rule fix to Section K
 *            (inline-edit pattern). v1.11.0 shipped with a defensive
 *            `display: block` rule on .lore-account-inline-edit__form
 *            that, by author-stylesheet specificity, overrode the
 *            browser's user-agent `hidden { display: none; }` and
 *            rendered the edit-state form visible by default —
 *            defeating the entire point of the pencil-click reveal.
 *
 *            Browser-verify caught it at test 3 of the SCOPE-7.6 main
 *            ship (v2.18.0). Pre-ship simulation could not have caught
 *            this — the form content was textually correct and all 30
 *            positive assertions passed; only rendered surface inspection
 *            surfaced the visual bug. Reinforces SCOPE-7.5's "rendered-
 *            surface as lock-stress-tester" pattern at the inline-edit
 *            scale.
 *
 *            Fix: scope display:none to the [hidden] attribute selector
 *            (`.lore-account-inline-edit__form[hidden] { display: none; }`)
 *            and drop the unnecessary `display: block` from the bare
 *            class rule. The [hidden] attribute selector has higher
 *            specificity than the bare class, so the hide-by-default
 *            wins when the attribute is present. JS removes the
 *            attribute → bare class rule takes over (no display
 *            property = browser default `display: block` for <form>).
 *            Clean state machine.
 *
 *            One file touched: this file. lore-portal.php also bumped
 *            for /health version coherence (per established convention).
 *            No PHP changes, no JS changes, no template changes.
 *
 *   v1.11.0 — SCOPE-7.6 inline-edit pattern (new Section K).
 *
 *            New BEM block .lore-account-inline-edit* styles the Name-row
 *            inline-edit shell on /account/personal-info. Pencil icon
 *            (always visible, right of value), edit-state form (hidden by
 *            default via [hidden] attribute), responsive side-by-side
 *            First/Last inputs at min-width: 960px (stacked below),
 *            right-aligned action row (Save right, Cancel text-link left
 *            — establishes the inline-edit two-button convention for the
 *            auth surface going forward).
 *
 *            Pattern parallels: button-reset matches existing pill-button
 *            shapes (Section H neighborhood); Save button reuses
 *            .lore-account-sub__save existing styling unchanged via
 *            template class assignment (no new submit styles authored);
 *            min-width: 960px breakpoint matches Section E sidebar reveal.
 *
 *            No changes to existing rules. Pure additive section appended
 *            at end of file.
 *
 *   v1.10.0 — SCOPE-7.5.4 polish round 4: identity block card wrapper.
 *
 *            Single targeted change to the mobile hub identity block.
 *            User feedback: the avatar + name region sat directly on
 *            the Linen page background while every other content region
 *            on the page (Personal info card, Notifications card, group
 *            clusters, etc.) sits in its own Paper-colored card. The
 *            inconsistency made the identity region read as floating
 *            text in dead space.
 *
 *            v1.10.0 wraps the mobile identity block in the same card
 *            treatment used by every other content region: Paper
 *            background, soft border, rounded corners, internal padding.
 *            Visual rhythm now consistent across the entire hub view.
 *
 *            The v1.6.0 border-bottom-only treatment is replaced by a
 *            full border (the card has its own outline; no need for a
 *            separator underline since the surrounding Linen page
 *            background provides the gap to the next region).
 *
 *            Desktop sidebar identity block unchanged — different
 *            context (sits inside the sidebar shell, not as a peer to
 *            cards). v1.10.0 only affects the mobile hub's
 *            --mobile-only identity variant.
 *
 *   v1.9.0 — SCOPE-7.5.3 polish round 3 + dead-rule sweep.
 *
 *            Mobile spacing tightens:
 *            - Hub h1 → identity block gap reduced (was ~60-70px in
 *              browser-rendered state; tightened to ~24px). Mobile
 *              real-estate is precious; removing the dead vertical
 *              space between "Account" and the user identity gives
 *              the cards above-the-fold visibility.
 *            - Identity block internal padding reduced.
 *            - Section eyebrow → group-card gap reduced.
 *
 *            Sidebar tinted-circle icons (matches mobile-hub palette):
 *            - 26px tinted circle behind each sidebar nav-icon SVG
 *              (was no background in v1.8.0).
 *            - Per-group coloring parallels the hub cards' SD10
 *              scheme exactly:
 *                  Personal cluster → Cabernet stroke / Linen bg
 *                  Security cluster → Harbor Blue stroke / Bay Mist bg
 *                  Activity cluster → Cabernet stroke / Sand bg
 *              The tinted circle gives each item visual weight against
 *              the Paper-colored group-card background.
 *
 *            Sidebar name line-clamp (long-name handling):
 *            - Up to 2 lines, then ellipsis on overflow. Replaces
 *              v1.8.0's single-line truncation which was too
 *              aggressive for typical 2-word names.
 *            - Uses -webkit-line-clamp (Baseline 2023 — universally
 *              supported despite the vendor prefix; the unprefixed
 *              `line-clamp` is going through standardization).
 *
 *            Dead-rule sweep (deferred from v1.8.0):
 *            - .lore-account-sidebar__identity-email rules removed —
 *              markup dropped in v2.17.2; no DOM target.
 *            - .lore-account-sidebar__identity-meta rules removed —
 *              ditto.
 *            - .lore-account-hub__identity-email rules removed —
 *              markup dropped in v2.17.3 (mobile identity trim).
 *            - .lore-account-hub__identity-meta rules removed — ditto.
 *            - .lore-account-hub__subtitle rules removed — markup
 *              dropped in v2.17.1 (subtitle paragraph trim).
 *
 *            None of the removed rules had any DOM target after their
 *            corresponding markup deletion ships, so removal cannot
 *            visually regress anything.
 *
 *   v1.8.0 — SCOPE-7.5.2 sidebar redesign + polish.
 *
 *            Hub h1 brand period removed — was a SCOPE-7.4 "Sign in."
 *            pattern carried forward into hub h1 in v1.6.0; user feedback
 *            confirms the period reads as unnecessary for the broader
 *            "Account" headline (not a one-word brand statement the way
 *            "Sign in." was). The ::after pseudo-element rule is deleted
 *            outright.
 *
 *            Subtitle-conditional intro spacing via :has() — sub-pages
 *            that don't render a subtitle paragraph (.lore-account-sub__
 *            subtitle) get tightened intro spacing; those that do keep
 *            the generous spacing. Baseline 2023 support; Chrome 105+,
 *            Safari 15.4+, Firefox 121+ all honor the selector.
 *
 *            Sidebar redesign (substantial change from v1.7.0):
 *            - Width 280px → 256px (tighter, more right-pane room).
 *            - Identity block trimmed: avatar (48 → 40px) + display name
 *              only. No email line, no member-since line. The markup
 *              dropped these in v2.17.2; the CSS rules for the removed
 *              classes (.lore-account-sidebar__identity-email, __identity-
 *              meta) are no longer emitted from the partial but remain in
 *              this file as dead rules for one beat — deletion is
 *              candidate for a v1.9.0 cleanup sweep.
 *            - Nav items restructured as icon + label inline (flex row).
 *              Each item carries an inline SVG matching the hub card
 *              icon and a data-card attribute that parallels the hub's
 *              SD10 group coloring (Personal=Cabernet stroke, Security=
 *              Harbor Blue stroke, Activity=Cabernet stroke). No tinted
 *              icon backgrounds in the sidebar — the icons are smaller
 *              (20px) and the visual weight of a backgrounded circle
 *              would crowd the row.
 *            - Group-card aesthetic: each group cluster (Personal,
 *              Security, Activity) wraps in a rounded Paper-colored
 *              container with the group label outside above. Echoes
 *              the hub's group-card structure — "kind of an account
 *              hub within an account hub" per user feedback.
 *            - "Account hub" nav item removed (the hub itself is its
 *              own context; users return to the hub via global site
 *              nav per Google's pattern).
 *
 *            Defensive note on the dead-rule sweep: when v1.9.0 lands,
 *            grep auth.css for any rule whose selector doesn't match a
 *            class actually emitted by any template under theme/. Strong
 *            candidates: .lore-account-sidebar__identity-email, .lore-
 *            account-sidebar__identity-meta, .lore-account-hub__subtitle
 *            (v1.6.0 rule still present though markup dropped in v2.17.1).
 *
 *   v1.7.0 — SCOPE-7.5.1 polish + desktop two-pane layout.
 *
 *            Polish (mobile + desktop):
 *            - Hub subtitle paragraph removed from page-account.php; CSS for
 *              .lore-account-hub__subtitle remains in place (defensive — if
 *              the paragraph ever returns it'll render correctly) but no
 *              markup currently emits it.
 *            - Tightened mobile spacing across hub (intro → identity →
 *              groups) and sub-pages (intro block → first section) per
 *              browser-test feedback from SCOPE-7.5 v1.0.0 ship.
 *            - Sub-page h1 no longer carries the brand-period accent
 *              (was never added in v1.6.0 — confirmed absence; this entry
 *              documents the intentional asymmetry: period lives only on
 *              the hub h1 as a one-word brand statement).
 *
 *            SD10 — Three-bucket icon coloring (locks SD2 expansion):
 *            Adopts Harbor Blue + Bay Mist for the Security group's icon
 *            treatment; Sand for Activity. Per-card target via the
 *            existing data-card attribute on each .lore-account-card
 *            anchor (no new modifier classes needed).
 *
 *              Personal cluster (personal-info + notifications):
 *                  stroke = Cabernet  / background = Linen      (unchanged)
 *              Security cluster (security + sessions):
 *                  stroke = Harbor Blue / background = Bay Mist
 *              Activity cluster (activity):
 *                  stroke = Cabernet  / background = Sand
 *
 *            Brand guidelines page-22 Color Combinations explicitly sanctions
 *            Harbor-Blue-on-Bay-Mist as a high-contrast pairing; Cabernet-on-
 *            Sand likewise. SD2's earlier "Cabernet/Linen universal" lock is
 *            replaced with this per-group palette assignment.
 *
 *            Desktop two-pane layout (Path B — multi-page, not SPA):
 *            - New .lore-account-shell flex container wraps the existing
 *              <main> and pairs it with the sidebar partial. Mobile:
 *              shell is display:block, sidebar is display:none; everything
 *              flows single-column as before. Desktop (≥ 960px breakpoint):
 *              shell becomes display:flex row, sidebar gets fixed width
 *              280px + position:sticky for long sub-pages.
 *            - New .lore-account-sidebar family — identity block (avatar +
 *              name + email + member-since), group labels, nav items.
 *              Active item gets [aria-current="page"] for Linen-tint
 *              background + Cabernet text accent.
 *            - .lore-account-hub__identity--mobile-only modifier hides the
 *              hub-content identity block on desktop (where the sidebar
 *              renders it instead).
 *            - .lore-account-sub__back hidden on desktop (the sidebar is
 *              the navigation source of truth above 960px).
 *
 *            Cross-document view transitions (progressive enhancement):
 *            - @view-transition { navigation: auto } on every account page
 *              (hub + 5 sub-pages share the same .lore-account-shell
 *              container so the browser opts them all in via this single
 *              auth.css rule). Gated behind prefers-reduced-motion:
 *              no-preference so users with motion sensitivity get the
 *              normal full-page reload.
 *            - 180ms cross-fade — slow enough to read as intentional
 *              polish, fast enough to never feel sluggish.
 *            - Chrome 126+ / Safari 18.2+ get the fade. Firefox falls
 *              through to standard full-page navigation. Nothing breaks
 *              on unsupported browsers.
 *            - Sidebar markup is byte-identical across all six pages
 *              by design (the partial renders the same bytes regardless
 *              of $current; only aria-current differs, which doesn't
 *              affect layout). Browser cross-fades only the right pane
 *              visibly; sidebar stays perfectly still.
 *
 *   v1.6.0 — SCOPE-7.5 (account-hub redesign). Major extension covering
 *            the five new sub-page templates (page-account-personal-info,
 *            page-account-notifications, page-account-security, page-
 *            account-sessions, page-account-activity) plus the rewritten
 *            page-account.php hub. Five new selector families:
 *
 *            (1) .lore-account-hub family — the five-card navigation hub
 *                with three group clusters per SD5 grouped-card structure.
 *                Outer rounded card wraps 1-2 row entries; rows separated
 *                by hairline dividers via adjacent-sibling top-border
 *                (.lore-account-card + .lore-account-card). Hover shifts
 *                title to Cabernet + chevron slides right + row background
 *                tints to Linen. NO hub-level signout — the page ends
 *                below the last group card per SD6.
 *
 *            (2) .lore-account-sub family — shared shell for the five
 *                sub-page templates: back-link, intro block, sections,
 *                forms, fields, labels, inputs, save buttons, view-only
 *                header blocks, audit-history lists, notice surfaces.
 *                Single-column layout, generous whitespace per scope §6.5.
 *
 *            (3) .lore-account-activity family — filter pill row (All /
 *                Email / Phone / Password per Q5 lock) + the audit-history
 *                entry list. [data-hidden] attribute toggled by account-
 *                sub.js controls per-entry visibility based on the
 *                selected pill.
 *
 *            (4) .lore-account-sessions family — sign-out-everywhere
 *                section plus the reserved CSS namespace for the per-
 *                session list deferred to a near-go-live beat per Q2
 *                (the namespace placeholder is here so the future
 *                addition slots in without CSS restructuring).
 *
 *            (5) .lore-account-cancel family — cancel-only render mode
 *                styling for page-account.php's cancel-token bypass
 *                branch. Replaces the prior .lore-account-section--danger
 *                cancel-widget styling, scoped to its own namespace.
 *
 *            Two .lore-auth-modal additions for the SD8 confirmation
 *            modal (sign-out-everywhere ceremony on /account/sessions):
 *            .__body (confirm-question paragraph) and .__actions (Cancel
 *            + Confirm button-pair container). Modal.css's existing
 *            .lore-auth-modal* shell classes are reused verbatim for the
 *            new dialog — visual consistency with the login modal is
 *            preserved by design per SD8.
 *
 *            ADR-048 cage-breakout selector list extended with five new
 *            #page selectors covering the new sub-page body classes
 *            (page-template-page-account-personal-info, -notifications,
 *            -security, -sessions, -activity). The .lore-auth-page half
 *            of the list is NOT extended — the new templates use
 *            <main class="lore-account-hub"> and <main class="lore-
 *            account-sub"> as their containers, not .lore-auth-page.
 *
 *            Brand-faithful tokens per scope §6: universal Cabernet/Linen
 *            palette across all five cards (SD2 — Harbor Blue and Bay
 *            Mist are NOT used in v1); Scarlet reserved for the pending-
 *            change badge text accent; Larken display on hub h1 / sub-
 *            page h1 / card titles / identity name; Articulat CF body
 *            font everywhere else with the All-Caps tracking-100 eyebrow
 *            + group-label treatment from page-22 of the brand guidelines.
 *            Each var(--token, fallback) declaration carries a hardcoded
 *            hex fallback matching the mockup v1.1.2 values so the
 *            visual fidelity holds even when tokens.css isn't yet
 *            extended with the few mockup-introduced tokens (--color-
 *            paper, --color-linen-deep, etc.).
 *
 *   v1.5.0 — SCOPE-7.3 Phase 7 (/account + /email-change-confirm).
 *            Extends the ADR-048 body-class GP-cage breakout selector list
 *            to cover the two new auth templates (fifth extension of the
 *            same block since v1.4.0). Adds a new family of .lore-account-*
 *            selectors for the /account sectioned-forms layout:
 *            lore-account__container (max-width container), lore-account-
 *            section (card per surface), lore-account-section__heading (h2),
 *            lore-account-section__description (intro paragraph), lore-
 *            account-info-block (view-only header dl), lore-account-info-
 *            block__list, lore-account-info-block__row, lore-account-
 *            history-list (recent changes ul), lore-account-history-
 *            list__ip (forensic detail subtle text), lore-account-section
 *            --danger modifier (cancel widgets + sign-out-all section),
 *            and lore-auth__submit--danger modifier on submit buttons
 *            (red-accent for destructive actions).
 *
 *            Single-column on both mobile and desktop per scope §3.4.
 *            /account is information-dense — multi-column scanning in a
 *            security-sensitive context would be a UX risk.
 *
 *   v1.4.4 — SCOPE-7.3 Phase 6 (/password-forgot + /password-reset pages).
 *            Extends the ADR-048 body-class GP-cage breakout selector list
 *            to cover both new templates. Fourth extension of the same
 *            block since v1.4.0 — pattern is well-established.
 *
 *   v1.4.3 — SCOPE-7.3 Phase 5 (/welcome page). Extends the ADR-048
 *            body-class GP-cage breakout selector list to also cover
 *            the new /welcome page template — without this,
 *            page-template-page-welcome would inherit the same #page
 *            min-content cage GP imposes on /login, /register, and
 *            /verify-phone, rendering the consent form at ~294px.
 *            Pattern is now established (third extension of the same
 *            block since v1.4.0): each new auth page adds a body-
 *            class selector to both halves of the list (#page AND
 *            .lore-auth-page) for the breakout to work end-to-end.
 *
 *   v1.4.2 — SCOPE-7.3 Phase 4. Extends the body-class GP-cage
 *            breakout selector list (ADR-048) to also cover the
 *            new /verify-phone page template — without this,
 *            page-template-page-verify-phone would inherit the
 *            same #page min-content cage GP imposes on /login
 *            and /register and render the form at ~294px. Same
 *            specificity (1,2,1) wins cleanly against
 *            .grid-container.container. Also adds
 *            .lore-auth__resend-link styling — the resend button
 *            on /verify-phone is a <button> inside the alt-action
 *            paragraph styled as a textual link to match the
 *            "Already have an account? Sign in" pattern.
 *
 *   v1.4.1 — SCOPE-7.4 Phase 3 Deploy 2.4 (follow-on to 2.3). v1.4.0
 *            broke <body> out of the #page cage but <main class="lore-auth-
 *            page"> inside #page was still rendering at min-content width
 *            (~294px). Result: #page stretched edge-to-edge but <main> sat
 *            left-aligned inside it as a narrow column. Extends the body-
 *            class scoped rule to also target .lore-auth-page (the <main>
 *            element) so both #page AND <main> claim full width. Form
 *            centering still handled by .lore-auth__container's `margin:
 *            0 auto` + max-width: 480px.
 *
 *   v1.4.0 — SCOPE-7.4 Phase 3 Deploy 2.3. #page cage breakout via body-
 *            class scoping. See full root-cause explanation below.
 *
 *            ACTUAL ROOT CAUSE (uncovered via Box Model inspection in Phase 3
 *            Deploy 2.2 post-verification): GeneratePress renders <body> as
 *            display: flex; flex-direction: column. Its child #page carries
 *            class="grid-container" which has max-width: 1200px and
 *            margin: 0 auto. In a flex column container, a child with
 *            max-width but no explicit width takes min-content width by
 *            default — NOT the parent's available width. On /login the
 *            min-content of #page is driven by the narrowest unbreakable
 *            content inside <main>, which works out to ~294px. The huge
 *            413px+ margins on each side are what flex's `margin: auto`
 *            does to center an under-sized item. Submit an error notice
 *            and the wider text inside #page pushes min-content wider,
 *            and the rendered width shifts — exactly the "narrows / gets
 *            wider" symptom.
 *
 *            FIX: target #page directly on auth pages via the WordPress
 *            body-class system. `body.page-template-page-login #page` and
 *            `body.page-template-page-register #page` are selectors that
 *            land on the actual cage. We declare `width: 100%`, `max-width:
 *            none`, and `margin: 0` to make #page claim the full width of
 *            its parent (<body>) instead of taking min-content. Specificity
 *            (1,2,1) wins cleanly against GP's `.grid-container.container`
 *            (0,2,0). No !important needed.
 *
 *            v1.3.0's width: 100% on .lore-auth__container is preserved —
 *            it's harmless and serves as belt-and-suspenders for any future
 *            page that doesn't add itself to lore_is_auth_page() but lands
 *            in #page-based layout. v1.3.1's chained-class .lore-auth-page
 *            rule is REVERTED — it was specificity theater (won the
 *            specificity battle but the constraint wasn't on <main>).
 *
 *            Cross-references: ADR-042 (GP form-styling override pattern)
 *            and convention #48 (3-class scoping inside <dialog>) document
 *            related GP-cascade issues; the body-class scoping approach
 *            here mirrors the pattern but at the layout level rather than
 *            form-element level.
 *
 *   v1.3.0 — SCOPE-7.4 Phase 3 Deploy 2.1 (follow-on). .lore-auth__container
 *            gets explicit `width: 100%` paired with existing `max-width:
 *            480px`. Defensive — also see v1.4.0 for the actual layout fix.
 *
 *   v1.3.1 — REVERTED via rollback to v1.3.0 baseline 2026-05-23, then
 *            superseded by v1.4.0 with the actual fix. v1.3.1 had attempted
 *            chained-class specificity on .lore-auth-page to override GP's
 *            .separate-containers .site-main margin, but the constraint
 *            wasn't on <main> — it was on #page. Historical note only;
 *            the chained-class rule is NOT in v1.4.0.
 *
 *   v1.2.1 — SCOPE-7.4 Phase 1 — Three new form classes for the login
 *            form: .lore-auth__field--row (horizontal split between
 *            checkbox and link), .lore-auth__checkbox (label-wrapping
 *            checkbox composite), .lore-auth__help-link (standalone
 *            help-style link). All ancestor-scoped under .lore-auth__form
 *            per ADR-042. Used by the auth modal's login form (Phase 1
 *            this beat) and the /login page template (Phase 3, future).
 *
 *   v1.2.0 — Specificity bump on every form-descendant selector. GeneratePress
 *            injects inline <style> CSS targeting input[type="..."] et al.
 *            via attribute selectors (specificity 0,1,0), which beat single-
 *            class selectors (also 0,1,0) on source order — GP's inline
 *            block loads after our linked stylesheet, so equal-specificity
 *            ties go to GP. Fix: scope every form rule with the form parent
 *            class (e.g., .lore-auth__form .lore-auth__input → 0,2,0), which
 *            wins on specificity instead of source order. Pattern applies
 *            to every future auth page; see DECISIONS.md ADR-042.
 *
 *   v1.1.0 — Token-name alignment with tokens.css v1.1.0 + radius shift.
 *            Inputs, notice banner, and submit button move from
 *            --radius-md (10px) to --radius-lg (12px) for cohesion with
 *            the listing-page inquiry modal's input register. Color
 *            tokens corrected (--color-ink → --color-text, etc.); font
 *            and spacing tokens snapped to the real scale. Fallback
 *            values updated to match real token values.
 *
 * Stylesheet for auth-flow page templates: /register (this beat),
 * /verify-phone, /welcome, /login, /forgot-password, /reset-password,
 * /account (subsequent beats).
 *
 * Visual register: extends the single-listing template's refined-restrained
 * direction onto the auth surface. Hairline borders (1px --color-border-soft),
 * --radius-md corners, generous --space-* whitespace, Larken display for
 * page titles, body font for everything else. No gradients, no shadows
 * (matches the listing template's flat-on-linen treatment).
 *
 * Token dependency: this file consumes tokens.css v1.1.0 (registered as
 * 'lore-tokens' in the enqueue dep chain, convention #11). It does not
 * define any tokens of its own.
 *
 * Mobile-first per ADR-014, convention #18. Single breakpoint at 768px
 * (tablet+) — auth forms don't have content that needs a desktop-specific
 * layout beyond the split first/last row.
 */

/* -----------------------------------------------------------------------
 * #page cage breakout for auth pages (v1.4.0)
 *
 * GeneratePress wraps every page in <div id="page" class="site grid-container
 * container hfeed">, which by default applies max-width: 1200px + margin: auto
 * to center page content within a fixed width. Because GP renders <body> as
 * display: flex; flex-direction: column, the flex children with max-width
 * but no explicit width take min-content width — not the parent's available
 * width. On auth pages this produced a ~294px-wide #page with huge left/right
 * margins, which made the form and its notice render in a narrow column.
 *
 * Fix: when the body has a page-template class for an auth page, override
 * #page's width and margin so it claims the full body width. Specificity is
 * `(1,1,1)` — body.class + #id + element — beating GP's `.grid-container`
 * `(0,1,0)` cleanly without !important.
 *
 * Add new body.page-template-page-<slug> selectors here as new auth pages
 * land. Currently covers /login, /register, /verify-phone, /welcome,
 * /password-forgot, /password-reset. Future /account will need a line when
 * it lands. (The body class is automatically added by WordPress based on
 * the page template assigned to the WP Page; the template filename without
 * extension becomes the class name with hyphens.)
 * ----------------------------------------------------------------------- */

body.page-template-page-login #page,
body.page-template-page-register #page,
body.page-template-page-verify-phone #page,
body.page-template-page-welcome #page,
body.page-template-page-password-forgot #page,
body.page-template-page-password-reset #page,
body.page-template-page-account #page,
body.page-template-page-account-personal-info #page,
body.page-template-page-account-notifications #page,
body.page-template-page-account-security #page,
body.page-template-page-account-sessions #page,
body.page-template-page-account-activity #page,
body.page-template-page-email-change-confirm #page,
body.page-template-page-login .lore-auth-page,
body.page-template-page-register .lore-auth-page,
body.page-template-page-verify-phone .lore-auth-page,
body.page-template-page-welcome .lore-auth-page,
body.page-template-page-password-forgot .lore-auth-page,
body.page-template-page-password-reset .lore-auth-page,
body.page-template-page-account .lore-auth-page,
body.page-template-page-email-change-confirm .lore-auth-page {
	width: 100%;
	max-width: none;
	margin: 0;
}

/* -----------------------------------------------------------------------
 * Page shell
 *
 * The auth page is a single-column form on a linen-tinted page background,
 * with a max-width container that centers on tablet+. The page deliberately
 * gives the form room to breathe — auth is a chore, generous space reduces
 * the friction.
 * ----------------------------------------------------------------------- */

.lore-auth-page {
	background-color: var(--color-linen, #efefe6);
	padding: var(--space-8, 32px) var(--space-4, 16px);
	min-height: 70vh;
}

.lore-auth__container {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.lore-auth-page {
		padding: var(--space-10, 40px) var(--space-6, 24px);
	}
}

/* -----------------------------------------------------------------------
 * Intro (title + subtitle)
 *
 * Title uses the display register (Larken via --font-display token).
 * Subtitle in body register, muted, lh: relaxed for readability.
 * ----------------------------------------------------------------------- */

.lore-auth__intro {
	text-align: center;
	margin-bottom: var(--space-8, 32px);
}

.lore-auth__title {
	font-family: var(--font-display, Larken, Georgia, serif);
	font-size: var(--fs-3xl, 32px);
	font-weight: 400;
	color: var(--color-text, #282828);
	margin: 0 0 var(--space-3, 12px) 0;
	line-height: 1.15;
}

.lore-auth__subtitle {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-base, 16px);
	color: var(--color-text-muted, #696969);
	line-height: 1.55;
	margin: 0;
}

@media (min-width: 768px) {
	.lore-auth__title {
		font-size: 40px;
	}
}

/* -----------------------------------------------------------------------
 * Notice banner
 *
 * Renders the ?notice=<code> mapped message. Hairline border + tinted
 * background matched to kind (error → soft red, success → soft green).
 * Auth-page-specific — the listing template has no equivalent surface.
 * ----------------------------------------------------------------------- */

.lore-auth__notice {
	border: 1px solid var(--color-border-soft, #ececec);
	border-radius: var(--radius-lg, 12px);
	padding: var(--space-3, 12px) var(--space-4, 16px);
	margin-bottom: var(--space-5, 20px);
	font-size: var(--fs-sm, 14px);
	line-height: 1.5;
}

.lore-auth__notice--error {
	background-color: #fcf3f3;
	border-color: #e6c8c8;
	color: #6b1a1a;
}

.lore-auth__notice--success {
	background-color: #f3f8f3;
	border-color: #c8dec8;
	color: #1a4a1a;
}

.lore-auth__notice:focus {
	outline: 2px solid var(--color-cabernet, #500000);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * Form
 *
 * Stacked single-column fields. Split row (first/last names) collapses
 * to single-column on mobile, becomes 2-column on tablet+.
 * ----------------------------------------------------------------------- */

.lore-auth__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5, 20px);
}

.lore-auth__form .lore-auth__row--split {
	display: flex;
	flex-direction: column;
	gap: var(--space-5, 20px);
}

@media (min-width: 768px) {
	.lore-auth__row--split {
		flex-direction: row;
	}
	.lore-auth__row--split > .lore-auth__field {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* -----------------------------------------------------------------------
 * Field (label + input + help text)
 * ----------------------------------------------------------------------- */

.lore-auth__form .lore-auth__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 8px);
}

.lore-auth__form .lore-auth__label {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-sm, 14px);
	font-weight: 500;
	color: var(--color-text, #282828);
	letter-spacing: 0.01em;
}

.lore-auth__form .lore-auth__input {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-base, 16px);
	color: var(--color-text, #282828);
	background-color: #fff;
	border: 1px solid var(--color-border-soft, #ececec);
	border-radius: var(--radius-lg, 12px);
	padding: var(--space-3, 12px) var(--space-4, 16px);
	line-height: 1.4;
	min-height: 44px; /* convention #18 — touch target floor */
	width: 100%;
	box-sizing: border-box;
	transition: border-color 120ms ease, box-shadow 120ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.lore-auth__form .lore-auth__input:focus {
	outline: none;
	border-color: var(--color-cabernet, #500000);
	box-shadow: 0 0 0 3px rgba(80, 0, 0, 0.12);
}

.lore-auth__form .lore-auth__input:invalid:not(:placeholder-shown):not(:focus) {
	border-color: #b85c5c;
}

/* v1.13.0 — Role <select>. Base .lore-auth__input rule sets appearance:none
   (kills the native arrow), so selects need a custom caret + room for it. */
.lore-auth__form select.lore-auth__input {
	cursor: pointer;
	padding-right: var(--space-8, 40px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23696969' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-4, 16px) center;
	background-size: 16px 16px;
}

.lore-auth__form .lore-auth__help {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-xs, 12px);
	color: var(--color-text-muted, #696969);
	line-height: 1.5;
	margin: 0;
}

.lore-auth__form .lore-auth__help a {
	color: var(--color-cabernet, #500000);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lore-auth__form .lore-auth__help a:hover {
	text-decoration-thickness: 2px;
}

/* -----------------------------------------------------------------------
 * Honeypot
 *
 * Visually hidden but submitted with the form. The hidden treatment must
 * keep the field interactable to bots (which read the DOM, not the
 * stylesheet) while keeping it invisible to humans. Standard a11y
 * visually-hidden pattern with `position: absolute` so it occupies no
 * layout space at all.
 * ----------------------------------------------------------------------- */

.lore-auth__form .lore-auth__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -----------------------------------------------------------------------
 * Turnstile container
 * ----------------------------------------------------------------------- */

.lore-auth__form .lore-auth__turnstile {
	display: flex;
	justify-content: center;
	min-height: 65px; /* Turnstile widget renders ~65px tall — reserve space */
}

/* -----------------------------------------------------------------------
 * Submit button
 *
 * Refined-restrained register: solid cabernet fill, white text, soft 12px
 * radius matching the input fields (form reads as one cohesive unit).
 * Brand precedent uses pill shape for compact CTAs (header Login) but
 * --radius-lg for primary full-width actions per Apple HIG convention.
 * Slight scale-down on :active for the touch-feedback affordance.
 * ----------------------------------------------------------------------- */

.lore-auth__form .lore-auth__submit {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-base, 16px);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: #fff;
	background-color: var(--color-cabernet, #500000);
	border: 1px solid var(--color-cabernet, #500000);
	border-radius: var(--radius-lg, 12px);
	padding: var(--space-3, 12px) var(--space-5, 20px);
	min-height: 48px;
	cursor: pointer;
	transition: background-color 120ms ease, transform 80ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.lore-auth__form .lore-auth__submit:hover {
	background-color: #3a0000;
}

.lore-auth__form .lore-auth__submit:active {
	transform: scale(0.98);
}

.lore-auth__form .lore-auth__submit:focus-visible {
	outline: 2px solid var(--color-cabernet, #500000);
	outline-offset: 2px;
}

.lore-auth__form .lore-auth__submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* -----------------------------------------------------------------------
 * Alternate-action line (e.g. "Already have an account? Sign in")
 * ----------------------------------------------------------------------- */

.lore-auth__form .lore-auth__alt {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-sm, 14px);
	color: var(--color-text-muted, #696969);
	text-align: center;
	margin: 0;
}

.lore-auth__form .lore-auth__alt a {
	color: var(--color-cabernet, #500000);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lore-auth__form .lore-auth__alt a:hover {
	text-decoration-thickness: 2px;
}

/* -----------------------------------------------------------------------
 * Field — row modifier (added v1.2.1)
 *
 * Horizontal split layout for a row that combines two controls — e.g.
 * the login form's "Remember me" checkbox on the left + "Forgot
 * password?" link on the right. Falls back to stacked layout on very
 * narrow viewports where the two would crowd.
 *
 * The base .lore-auth__field is flex-column with gap; --row overrides
 * to flex-row with space-between, and removes the column gap (the
 * space-between distributes whitespace horizontally instead).
 * ----------------------------------------------------------------------- */

.lore-auth__form .lore-auth__field--row {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3, 12px);
	flex-wrap: wrap;
}

/* -----------------------------------------------------------------------
 * Checkbox composite (added v1.2.1)
 *
 * <label> wrapping <input type="checkbox"> + <span>. Provides a 44px
 * touch target for the label by aligning checkbox and text on a
 * baseline with comfortable hit area.
 *
 * The native checkbox renders at its system size; we don't restyle
 * the box itself in v1 (custom checkbox styling is a separate beat
 * if needed). The :focus-visible ring on the input still works since
 * GP doesn't override input[type="checkbox"] outlines.
 * ----------------------------------------------------------------------- */

.lore-auth__form .lore-auth__checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2, 8px);
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-sm, 14px);
	color: var(--color-text, #282828);
	cursor: pointer;
	min-height: 32px; /* comfortable touch row */
	line-height: 1.4;
}

.lore-auth__form .lore-auth__checkbox input[type="checkbox"] {
	margin: 0;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: var(--color-cabernet, #500000);
}

.lore-auth__form .lore-auth__checkbox span {
	user-select: none;
}

/* -----------------------------------------------------------------------
 * Help link (standalone — added v1.2.1)
 *
 * Standalone link in body register, used in the login form's "Forgot
 * password?" surface. Visually matches the existing .lore-auth__help a
 * inline pattern (cabernet underlined), but rendered as a top-level
 * field component rather than inside a help-paragraph wrapper.
 *
 * Inheriting from .lore-auth__help a would require an HTML structure
 * with the link inside a .lore-auth__help element — that adds DOM
 * for no rendering benefit. This rule mirrors that styling at a
 * standalone selector instead.
 * ----------------------------------------------------------------------- */

.lore-auth__form .lore-auth__help-link {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: var(--fs-sm, 14px);
	color: var(--color-cabernet, #500000);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.lore-auth__form .lore-auth__help-link:hover {
	text-decoration-thickness: 2px;
}

.lore-auth__form .lore-auth__help-link:focus-visible {
	outline: 2px solid var(--color-cabernet, #500000);
	outline-offset: 2px;
	border-radius: 2px;
}


/* -----------------------------------------------------------------------
 * Resend-OTP "link" button (added v1.4.2, SCOPE-7.3 Phase 4)
 *
 * The Resend form on /verify-phone has a <button type="submit"> inside a
 * .lore-auth__alt paragraph styled to look like an inline link (same
 * visual register as the "Sign in" / "Create one" alt-action links).
 * Strip the UA-default button chrome (background, border, padding) and
 * apply text-link styling. Underline on hover/focus for affordance.
 * ----------------------------------------------------------------------- */

.lore-auth__form .lore-auth__resend-link {
	font-family: inherit;
	font-size: inherit;
	color: var(--color-cabernet, #500000);
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.lore-auth__form .lore-auth__resend-link:hover,
.lore-auth__form .lore-auth__resend-link:focus-visible {
	text-decoration-thickness: 2px;
	outline: none;
}

.lore-auth__form .lore-auth__resend-link:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	text-decoration: none;
}



/* -----------------------------------------------------------------------
 * .lore-account-* family (added v1.5.0, SCOPE-7.3 Phase 7)
 *
 * Sectioned-forms layout for /account. Single column on mobile AND desktop
 * (scope §3.4). Each section is its own visual card with consistent spacing.
 *
 * The .lore-account__container is wider than .lore-auth__container — the
 * /account page benefits from more horizontal space since it has multiple
 * sections that benefit from sitting comfortably rather than narrow auth
 * forms that want focus on a single task.
 * ----------------------------------------------------------------------- */

.lore-account__container {
	max-width: 640px;
	margin: 0 auto;
	padding: 2rem 1rem 4rem;
}

@media (min-width: 768px) {
	.lore-account__container {
		padding: 3rem 2rem 5rem;
	}
}

.lore-account-section {
	background-color: #ffffff;
	border: 1px solid var(--color-border, #ebe9e3);
	border-radius: 4px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
	.lore-account-section {
		padding: 2rem;
		margin-bottom: 2rem;
	}
}

.lore-account-section__heading {
	margin: 0 0 0.75rem 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-ink, #2a2a2a);
}

.lore-account-section__description {
	margin: 0 0 1.25rem 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--color-ink-secondary, #5a5a5a);
}

/* Danger modifier — red accent for destructive sections (cancel widgets,
   sign-out-all). Visible-without-shouting: left border accent rather than
   a fully red card, which would be visually heavy in the middle of a
   settings page. */
.lore-account-section--danger {
	border-left: 4px solid var(--color-danger, #b54141);
}

/* View-only info block (Welcome back / Email / Phone / Registered etc.) */
.lore-account-info-block__list {
	margin: 0;
	padding: 0;
}

.lore-account-info-block__row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--color-border-soft, #f0eeea);
}

.lore-account-info-block__row:last-child {
	border-bottom: 0;
}

@media (min-width: 480px) {
	.lore-account-info-block__row {
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}
}

.lore-account-info-block__row dt {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-ink-secondary, #5a5a5a);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.lore-account-info-block__row dd {
	margin: 0;
	font-size: 1rem;
	color: var(--color-ink, #2a2a2a);
}

/* Recent changes — compact bulletless list with subtle IP detail */
.lore-account-history-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lore-account-history-list li {
	padding: 0.5rem 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--color-ink, #2a2a2a);
	border-bottom: 1px solid var(--color-border-soft, #f0eeea);
}

.lore-account-history-list li:last-child {
	border-bottom: 0;
}

.lore-account-history-list__ip {
	color: var(--color-ink-tertiary, #8a8a8a);
	font-size: 0.85rem;
	margin-left: 0.25rem;
}

/* Danger submit button modifier — visually distinct from primary submits.
   Used on cancel-confirm buttons and "Sign out everywhere". */
.lore-auth__submit--danger {
	background-color: var(--color-danger, #b54141);
}

.lore-auth__submit--danger:hover,
.lore-auth__submit--danger:focus-visible {
	background-color: var(--color-danger-hover, #9a3535);
}

/* Within an account section, the embedded forms shouldn't carry their
   own intro-block top margin (the section heading already provides
   spacing). */
.lore-account-section .lore-auth__form {
	margin-top: 0;
}

/* Adjacent dl + form inside a section needs a small gap */
.lore-account-section .lore-account-info-block__list + .lore-auth__form {
	margin-top: 1.25rem;
}

/* =========================================================================
 * SCOPE-7.5 — account hub + sub-pages (v1.6.0)
 *
 * The eight-section /account from v1.5.0 is replaced by a five-card
 * navigation hub plus five hierarchical sub-pages. The .lore-account-*
 * legacy classes above continue to drive the cancel-only render mode in
 * a transitional state (still consumed by page-account.php's cancel-
 * widget render path for v2.0.54-compatible markup) but the active hub
 * + sub-page surface uses the new .lore-account-hub*, .lore-account-sub*,
 * .lore-account-activity*, .lore-account-sessions*, .lore-account-cancel*
 * namespaces below.
 *
 * Brand tokens: Cabernet/Linen universal across the hub per SD2 (Harbor
 * Blue + Bay Mist NOT used in v1 — kept in tokens.css for future 7.6
 * polish). Larken display on hub h1, sub-page h1, card titles, identity
 * name. Articulat CF body + Articulat CF Medium All Caps tracking-100
 * for eyebrow + group-label treatment. Scarlet reserved for the pending-
 * change badge text accent only.
 *
 * Hardcoded hex fallbacks on every var() match the mockup v1.1.2 values
 * so visual fidelity holds even when tokens.css isn't yet extended with
 * a few mockup-introduced tokens (--color-paper, --color-linen-deep,
 * --color-border-mute, etc.).
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * Hub container — ADR-048 cage-breakout applied via the body-class list
 * above. The <main class="lore-account-hub"> is its own max-width container.
 * ------------------------------------------------------------------------- */

.lore-account-hub {
	max-width: var(--max-page-width, 880px);
	margin: 0 auto;
	padding: var(--space-8, 64px) var(--space-5, 24px) var(--space-9, 96px);
	background-color: var(--color-linen, #efefe6);
	min-height: 70vh;
	font-family: var(--font-body, "Articulat CF", "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
	color: var(--color-text, #1a1a1a);
}

/* Page intro — editorial table-of-contents */

.lore-account-hub__intro {
	padding-bottom: var(--space-7, 48px);
	border-bottom: 1px solid var(--color-border-soft, #d8d8d0);
	margin-bottom: var(--space-7, 48px);
}

.lore-account-hub__eyebrow {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--color-text-muted, #8a8a83);
	margin: 0 0 var(--space-4, 16px) 0;
}

.lore-account-hub__h1 {
	font-family: var(--font-display, Larken, "Cormorant Garamond", "Times New Roman", serif);
	font-size: 60px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color-text, #1a1a1a);
	margin: 0 0 var(--space-3, 12px) 0;
}

/* v1.8.0 — Period after "Account" removed per user feedback. The ::after
   rule that emitted ". " in Cabernet has been deleted; the h1 now reads
   simply as "Account". The Cabernet brand accent lives elsewhere (card
   icons, button backgrounds, link hovers). */

/* v1.9.0 — .lore-account-hub__subtitle rule deleted (markup dropped in
   v2.17.1; no DOM target). */

/* Identity block — 72px avatar + name + email + member-since */

.lore-account-hub__identity {
	display: flex;
	align-items: center;
	gap: var(--space-5, 24px);
	padding: var(--space-6, 32px) 0;
	border-bottom: 1px solid var(--color-border-soft, #d8d8d0);
	margin-bottom: var(--space-7, 48px);
}

.lore-account-hub__identity-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--color-linen-deep, #e6e6dc);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lore-account-hub__identity-initials {
	font-family: var(--font-display, Larken, "Cormorant Garamond", serif);
	font-size: 28px;
	font-weight: 500;
	color: var(--color-cabernet, #500000);
	letter-spacing: 0.02em;
}

.lore-account-hub__identity-text {
	flex: 1;
	min-width: 0;
}

.lore-account-hub__identity-name {
	font-family: var(--font-display, Larken, "Cormorant Garamond", serif);
	font-size: 26px;
	font-weight: 400;
	color: var(--color-text, #1a1a1a);
	line-height: 1.1;
	margin: 0 0 var(--space-2, 8px) 0;
}

/* v1.9.0 — .lore-account-hub__identity-email + .lore-account-hub__identity-
   meta rules deleted (markup dropped in v2.17.3 — mobile identity block
   trimmed to avatar + name only). No DOM targets. */

/* Group clusters — outer rounded container per SD5 grouped-card structure,
   rows live inside. The group label sits above the outer container. */

.lore-account-hub__group {
	margin-bottom: var(--space-7, 48px);
}

.lore-account-hub__group:last-of-type {
	margin-bottom: 0;
}

.lore-account-hub__group-label {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--color-text-muted, #8a8a83);
	margin: 0 0 var(--space-4, 16px) 0;
	padding-left: var(--space-2, 8px);
}

/* Group container = the outer rounded card; rows live inside.
   overflow:hidden so row hover-tint clips to the container's rounded corners. */
.lore-account-hub__group-card {
	background: var(--color-paper, #fdfcf8);
	border: 1px solid var(--color-border-soft, #d8d8d0);
	border-radius: var(--radius-card-lg, 12px);
	overflow: hidden;
}

/* Card-row = one navigable item inside a group-card */

.lore-account-card {
	display: flex;
	align-items: center;
	gap: var(--space-5, 24px);
	padding: var(--space-5, 24px) var(--space-6, 32px);
	text-decoration: none;
	color: var(--color-text, #1a1a1a);
	transition: background-color 180ms ease;
	position: relative;
}

/* Hairline divider between rows in the same group (SD5 structural marker) */
.lore-account-card + .lore-account-card {
	border-top: 1px solid var(--color-border-mute, #ebebe3);
}

.lore-account-card:hover {
	background: var(--color-linen, #efefe6);
}

.lore-account-card:hover .lore-account-card__title {
	color: var(--color-cabernet, #500000);
}

.lore-account-card:hover .lore-account-card__chevron {
	transform: translateX(4px);
	stroke: var(--color-cabernet, #500000);
}

.lore-account-card:focus-visible {
	outline: 2px solid var(--color-cabernet, #500000);
	outline-offset: -2px;
}

.lore-account-card__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-linen, #efefe6);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lore-account-card__icon svg {
	width: 22px;
	height: 22px;
	stroke: var(--color-cabernet, #500000);
	stroke-width: 1.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lore-account-card__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lore-account-card__title-row {
	display: flex;
	align-items: center;
	gap: var(--space-3, 12px);
	flex-wrap: wrap;
}

.lore-account-card__title {
	font-family: var(--font-display, Larken, "Cormorant Garamond", serif);
	font-size: 20px;
	font-weight: 400;
	color: var(--color-text, #1a1a1a);
	line-height: 1.2;
	transition: color 180ms ease;
}

.lore-account-card__description {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 13px;
	color: var(--color-text-muted, #8a8a83);
	margin-top: 2px;
}

/* Pending-change badge. Scarlet text on Linen background (Scarlet is RESERVED
   for the brand wordmark + pending-badge accent per scope §6.2). */
.lore-account-card__badge {
	display: inline-block;
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-scarlet, #e7390d);
	background: var(--color-linen, #efefe6);
	border: 1px solid var(--color-linen-deep, #e6e6dc);
	border-radius: var(--radius-pill, 999px);
	padding: 3px 10px;
	line-height: 1.4;
}

.lore-account-card__chevron {
	width: 18px;
	height: 18px;
	stroke: var(--color-text-muted, #8a8a83);
	stroke-width: 1.5;
	fill: none;
	flex-shrink: 0;
	transition: transform 180ms ease, stroke 180ms ease;
}

/* -------------------------------------------------------------------------
 * Sub-page shell — shared across all five sub-page templates
 * (.lore-account-sub--personal-info, --notifications, --security, --sessions,
 * --activity). Single-column layout, generous whitespace per scope §6.5.
 * ------------------------------------------------------------------------- */

.lore-account-sub {
	max-width: var(--max-page-width, 880px);
	margin: 0 auto;
	padding: var(--space-7, 48px) var(--space-5, 24px) var(--space-9, 96px);
	background-color: var(--color-linen, #efefe6);
	min-height: 70vh;
	font-family: var(--font-body, "Articulat CF", "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
	color: var(--color-text, #1a1a1a);
}

.lore-account-sub__container {
	width: 100%;
}

/* Back-link "← Account" */

.lore-account-sub__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2, 8px);
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-soft, #4a4a4a);
	text-decoration: none;
	margin-bottom: var(--space-6, 32px);
	transition: color 180ms ease;
}

.lore-account-sub__back:hover {
	color: var(--color-cabernet, #500000);
}

.lore-account-sub__back svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Sub-page intro block */

.lore-account-sub__intro {
	margin-bottom: var(--space-7, 48px);
	padding-bottom: var(--space-6, 32px);
	border-bottom: 1px solid var(--color-border-soft, #d8d8d0);
}

.lore-account-sub__eyebrow {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--color-text-muted, #8a8a83);
	margin: 0 0 var(--space-3, 12px) 0;
}

.lore-account-sub__h1 {
	font-family: var(--font-display, Larken, "Cormorant Garamond", "Times New Roman", serif);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--color-text, #1a1a1a);
	margin: 0 0 var(--space-3, 12px) 0;
}

.lore-account-sub__subtitle {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 15px;
	color: var(--color-text-soft, #4a4a4a);
	max-width: 520px;
	margin: 0;
	line-height: 1.5;
}

/* Sub-page notice (per-template — the hub no longer carries a notice surface) */

.lore-account-sub__notice {
	border: 1px solid var(--color-border-soft, #d8d8d0);
	border-radius: var(--radius-lg, 12px);
	padding: var(--space-3, 12px) var(--space-4, 16px);
	margin-bottom: var(--space-6, 32px);
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 14px;
	line-height: 1.5;
}

.lore-account-sub__notice--success {
	border-color: #c8d8c8;
	background: #e9f1e9;
	color: #2d4a2d;
}

.lore-account-sub__notice--error {
	border-color: #d8c0c0;
	background: #f4e9e9;
	color: #6e2a2a;
}

/* Sub-page sections */

.lore-account-sub__section {
	background: var(--color-paper, #fdfcf8);
	border: 1px solid var(--color-border-soft, #d8d8d0);
	border-radius: var(--radius-card-lg, 12px);
	padding: var(--space-6, 32px);
	margin-bottom: var(--space-6, 32px);
}

.lore-account-sub__section:last-child {
	margin-bottom: 0;
}

.lore-account-sub__section-h2 {
	font-family: var(--font-display, Larken, "Cormorant Garamond", serif);
	font-size: 22px;
	font-weight: 400;
	color: var(--color-text, #1a1a1a);
	margin: 0 0 var(--space-4, 16px) 0;
	line-height: 1.2;
}

.lore-account-sub__copy {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 14px;
	color: var(--color-text-soft, #4a4a4a);
	line-height: 1.5;
	margin: 0 0 var(--space-5, 24px) 0;
}

/* Sub-page forms — own namespace so the inputs can be styled independently
   of the existing .lore-auth__form treatments without leaking through GP's
   form-style cage. */

.lore-account-sub__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4, 16px);
}

.lore-account-sub__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 8px);
}

.lore-account-sub__label {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text, #1a1a1a);
	letter-spacing: 0.02em;
}

.lore-account-sub__input {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 15px;
	padding: var(--space-3, 12px) var(--space-4, 16px);
	border: 1px solid var(--color-border-soft, #d8d8d0);
	border-radius: var(--radius-input, 2px);
	background: var(--color-paper, #fdfcf8);
	color: var(--color-text, #1a1a1a);
	width: 100%;
	box-sizing: border-box;
	transition: border-color 180ms ease, outline-color 180ms ease;
}

.lore-account-sub__input:focus {
	outline: 2px solid var(--color-cabernet, #500000);
	outline-offset: -1px;
	border-color: var(--color-cabernet, #500000);
}

.lore-account-sub__help {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 12px;
	color: var(--color-text-muted, #8a8a83);
	line-height: 1.4;
	margin: var(--space-2, 8px) 0 0 0;
}

.lore-account-sub__save {
	display: inline-block;
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 14px;
	font-weight: 500;
	padding: var(--space-3, 12px) var(--space-5, 24px);
	background: var(--color-cabernet, #500000);
	color: var(--color-paper, #fdfcf8);
	border: 1px solid var(--color-cabernet, #500000);
	border-radius: var(--radius-input, 2px);
	cursor: pointer;
	letter-spacing: 0.02em;
	transition: background-color 180ms ease;
	align-self: flex-start;
	-webkit-appearance: none;
	appearance: none;
}

.lore-account-sub__save:focus {
	background: var(--color-cabernet, #500000);   /* defeat GP button:focus charcoal (ADR-079) */
}

.lore-account-sub__save:hover,
.lore-account-sub__save:focus-visible {
	background: var(--color-cabernet-soft, #6b1818);
}

.lore-account-sub__save:focus:hover {
	background: var(--color-cabernet-soft, #6b1818);
}

.lore-account-sub__save:focus-visible {
	outline: 2px solid var(--color-cabernet, #500000);
	outline-offset: 2px;
}

.lore-account-sub__save:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Danger variant — destructive ceremonies (sign out everywhere) */
.lore-account-sub__save--danger {
	background: var(--color-scarlet, #e7390d);
	border-color: var(--color-scarlet, #e7390d);
}

.lore-account-sub__save--danger:hover,
.lore-account-sub__save--danger:focus-visible {
	background: #c42f0a;
	border-color: #c42f0a;
}

/* Secondary variant — Cancel buttons inside confirmation modals */
.lore-account-sub__save--secondary {
	background: transparent;
	color: var(--color-text, #1a1a1a);
	border-color: var(--color-border-soft, #d8d8d0);
}

.lore-account-sub__save--secondary:hover,
.lore-account-sub__save--secondary:focus-visible {
	background: var(--color-linen, #efefe6);
	border-color: var(--color-text-muted, #8a8a83);
}

/* Consent checkbox blocks (notifications sub-page) */

.lore-account-sub__consent-block {
	padding-bottom: var(--space-5, 24px);
	margin-bottom: var(--space-5, 24px);
	border-bottom: 1px solid var(--color-border-mute, #ebebe3);
}

.lore-account-sub__consent-block:last-of-type {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.lore-account-sub__checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3, 12px);
	cursor: pointer;
}

.lore-account-sub__checkbox {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--color-cabernet, #500000);
}

.lore-account-sub__checkbox-text {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 14px;
	color: var(--color-text-soft, #4a4a4a);
	line-height: 1.5;
}

.lore-account-sub__opt-out-meta {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 12px;
	color: var(--color-text-muted, #8a8a83);
	margin: var(--space-3, 12px) 0 0 30px;
}

/* View-only header block (personal-info, security) — definition-list pattern */

.lore-account-sub__view-only-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 12px);
	margin: 0;
}

.lore-account-sub__view-only-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lore-account-sub__view-only-row dt {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-text-muted, #8a8a83);
}

.lore-account-sub__view-only-row dd {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 15px;
	color: var(--color-text, #1a1a1a);
	margin: 0;
}

/* Pending-change inline tag (used in view-only rows on personal-info) */
.lore-account-sub__pending-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-scarlet, #e7390d);
	background: var(--color-linen, #efefe6);
	border: 1px solid var(--color-linen-deep, #e6e6dc);
	border-radius: var(--radius-pill, 999px);
	padding: 2px 10px;
	margin-left: var(--space-3, 12px);
	line-height: 1.4;
}

/* Audit history list (personal-info, security) */

.lore-account-sub__history {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 12px);
}

.lore-account-sub__history-item {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 14px;
	color: var(--color-text-soft, #4a4a4a);
	line-height: 1.5;
	padding-bottom: var(--space-3, 12px);
	border-bottom: 1px solid var(--color-border-mute, #ebebe3);
}

.lore-account-sub__history-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.lore-account-sub__history-item strong {
	font-weight: 500;
	color: var(--color-text, #1a1a1a);
}

/* -------------------------------------------------------------------------
 * Activity sub-page — filter pills + entry list
 * (consumed by page-account-activity.php only)
 * ------------------------------------------------------------------------- */

.lore-account-activity__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 8px);
	margin-bottom: var(--space-5, 24px);
}

.lore-account-activity__pill {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: var(--space-2, 8px) var(--space-4, 16px);
	background: transparent;
	color: var(--color-text-soft, #4a4a4a);
	border: 1px solid var(--color-border-soft, #d8d8d0);
	border-radius: var(--radius-pill, 999px);
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.lore-account-activity__pill:hover {
	color: var(--color-cabernet, #500000);
	border-color: var(--color-cabernet, #500000);
}

.lore-account-activity__pill[aria-pressed="true"] {
	background: var(--color-cabernet, #500000);
	color: var(--color-paper, #fdfcf8);
	border-color: var(--color-cabernet, #500000);
}

.lore-account-activity__pill:focus-visible {
	outline: 2px solid var(--color-cabernet, #500000);
	outline-offset: 2px;
}

.lore-account-activity__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4, 16px);
}

.lore-account-activity__entry {
	padding: var(--space-4, 16px) 0;
	border-bottom: 1px solid var(--color-border-mute, #ebebe3);
}

.lore-account-activity__entry:last-child {
	border-bottom: none;
}

/* Hidden state — toggled by account-sub.js based on filter selection. */
.lore-account-activity__entry[data-hidden] {
	display: none;
}

.lore-account-activity__entry-header {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 14px;
	color: var(--color-text, #1a1a1a);
	line-height: 1.5;
}

.lore-account-activity__entry-header strong {
	font-weight: 500;
}

.lore-account-activity__entry-when {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 12px;
	color: var(--color-text-muted, #8a8a83);
	margin-top: 2px;
}

.lore-account-activity__entry-ip {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 11px;
	color: var(--color-text-muted, #8a8a83);
	letter-spacing: 0.02em;
	margin-top: 2px;
}

.lore-account-activity__empty {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 14px;
	color: var(--color-text-muted, #8a8a83);
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * Sessions sub-page — signout-all section + reserved per-session-list
 * namespace placeholder per Q2 (no rules; just preserves the name space
 * so the future addition doesn't collide). Consumed by
 * page-account-sessions.php.
 * ------------------------------------------------------------------------- */

.lore-account-sessions__intro-copy {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 14px;
	color: var(--color-text-soft, #4a4a4a);
	line-height: 1.5;
	margin: 0;
}

.lore-account-sessions__signout-all {
	/* Visually demarcates the destructive section — slight tint shift from
	   the standard sub-page section background. The danger affordance is
	   the button color (Scarlet), not the section background. */
}

.lore-account-sessions__signout-form {
	/* Hidden form — its [hidden] attribute already removes it from layout.
	   No additional styling needed; this rule reserves the namespace for
	   future state-conditional reveals (e.g. inline confirmation as a
	   fallback if the modal fails to open). */
}

/* -------------------------------------------------------------------------
 * SCOPE-7.7 per-session list (v1.12.0; fills the Q2 reserved namespace
 * from SCOPE-7.5 v1.6.0). Visual pattern parallels .lore-account-activity
 * __list (border-separated vertical entries) but adds a right-aligned
 * action button per row. Mobile (<960px): meta-block stacks above
 * revoke-button. Desktop (>=960px): meta-block left, revoke-button right.
 * ------------------------------------------------------------------------- */

.lore-account-sessions__list-section {
	/* Section wrapper — no special rules; inherits .lore-account-sub__section
	   spacing. Class kept so future targeting works without restructuring. */
}

.lore-account-sessions__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4, 16px);
}

.lore-account-sessions__list-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 12px);
	padding: var(--space-4, 16px) 0;
	border-bottom: 1px solid var(--color-border-mute, #ebebe3);
}

.lore-account-sessions__list-item:last-child {
	border-bottom: none;
}

/* Subtle visual marker for the current-session row — slight Linen tint
   inset so the user can identify their current browser without needing to
   read the badge text. Padding gets a horizontal nudge to make the tint
   look intentional rather than misaligned. */
.lore-account-sessions__list-item--current {
	background-color: var(--color-linen, #efefe6);
	padding-left: var(--space-3, 12px);
	padding-right: var(--space-3, 12px);
	border-radius: var(--radius-input, 2px);
}

.lore-account-sessions__list-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
}

.lore-account-sessions__list-device {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text, #1a1a1a);
	line-height: 1.4;
}

.lore-account-sessions__list-current-badge {
	display: inline-block;
	margin-left: var(--space-2, 8px);
	padding: 2px 8px;
	background-color: var(--color-bay-mist, #c1ece3);
	color: var(--color-harbor-blue, #1a5b60);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--radius-input, 2px);
	vertical-align: middle;
}

.lore-account-sessions__list-when {
	font-size: 12px;
	color: var(--color-text-muted, #8a8a83);
	line-height: 1.5;
}

.lore-account-sessions__list-ip {
	font-size: 11px;
	color: var(--color-text-muted, #8a8a83);
	letter-spacing: 0.02em;
	line-height: 1.5;
}

.lore-account-sessions__list-revoke-form {
	/* Form wraps the revoke button. No bordering; the button does the
	   visual work. On desktop the form sits at the right edge of the row
	   (see @media block below); on mobile it stacks below the meta. */
	margin: 0;
}

.lore-account-sessions__list-revoke {
	display: inline-block;
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 13px;
	font-weight: 500;
	padding: var(--space-2, 8px) var(--space-4, 16px);
	background: transparent;
	color: var(--color-danger, #b54141);
	border: 1px solid var(--color-border-soft, #d8d8d0);
	border-radius: var(--radius-input, 2px);
	cursor: pointer;
	letter-spacing: 0.02em;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.lore-account-sessions__list-revoke:hover,
.lore-account-sessions__list-revoke:focus-visible {
	background-color: var(--color-danger, #b54141);
	border-color: var(--color-danger, #b54141);
	color: var(--color-paper, #fdfcf8);
}

.lore-account-sessions__list-revoke:focus-visible {
	outline: 2px solid var(--color-danger, #b54141);
	outline-offset: 2px;
}

/* Desktop (>=960px): meta-block on the left, revoke-button on the right
   of the row. Matches the existing Section E breakpoint convention. */
@media (min-width: 960px) {
	.lore-account-sessions__list-item {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-5, 24px);
	}

	.lore-account-sessions__list-revoke-form {
		flex-shrink: 0;
	}
}

/* -------------------------------------------------------------------------
 * Cancel-only render mode (page-account.php cancel-token bypass branch).
 * Replaces the prior .lore-account-section--danger cancel-widget styling
 * with its own dedicated namespace. Renders when a logged-out viewer
 * arrives via a security-notification email's cancel link.
 * ------------------------------------------------------------------------- */

.lore-account-cancel {
	max-width: 520px;
	margin: 0 auto;
	padding: var(--space-8, 64px) var(--space-5, 24px) var(--space-9, 96px);
	background-color: var(--color-linen, #efefe6);
	min-height: 70vh;
	font-family: var(--font-body, "Articulat CF", "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
	color: var(--color-text, #1a1a1a);
}

.lore-account-cancel__container {
	background: var(--color-paper, #fdfcf8);
	border: 1px solid var(--color-border-soft, #d8d8d0);
	border-radius: var(--radius-card-lg, 12px);
	padding: var(--space-6, 32px);
}

.lore-account-cancel__intro {
	margin-bottom: var(--space-5, 24px);
}

.lore-account-cancel__title {
	font-family: var(--font-display, Larken, "Cormorant Garamond", serif);
	font-size: 28px;
	font-weight: 400;
	color: var(--color-text, #1a1a1a);
	margin: 0 0 var(--space-2, 8px) 0;
	line-height: 1.2;
}

.lore-account-cancel__subtitle {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 14px;
	color: var(--color-text-soft, #4a4a4a);
	margin: 0;
}

.lore-account-cancel__widget {
	margin-top: var(--space-5, 24px);
	padding-top: var(--space-5, 24px);
	border-top: 1px solid var(--color-border-mute, #ebebe3);
}

.lore-account-cancel__widget-heading {
	font-family: var(--font-display, Larken, "Cormorant Garamond", serif);
	font-size: 20px;
	font-weight: 400;
	color: var(--color-text, #1a1a1a);
	margin: 0 0 var(--space-3, 12px) 0;
	line-height: 1.2;
}

.lore-account-cancel__widget-description {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 14px;
	color: var(--color-text-soft, #4a4a4a);
	line-height: 1.5;
	margin: 0 0 var(--space-4, 16px) 0;
}

.lore-account-cancel__form {
	margin: 0;
}

.lore-account-cancel__submit {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 14px;
	font-weight: 500;
	padding: var(--space-3, 12px) var(--space-5, 24px);
	background: var(--color-scarlet, #e7390d);
	color: var(--color-paper, #fdfcf8);
	border: 1px solid var(--color-scarlet, #e7390d);
	border-radius: var(--radius-input, 2px);
	cursor: pointer;
	letter-spacing: 0.02em;
	-webkit-appearance: none;
	appearance: none;
}

.lore-account-cancel__submit:hover,
.lore-account-cancel__submit:focus-visible {
	background: #c42f0a;
	border-color: #c42f0a;
}

/* -------------------------------------------------------------------------
 * SCOPE-7.5 SD8 — Sign-out-everywhere confirmation modal additions.
 * Reuses modal.css's .lore-auth-modal* shell classes (wrapper, sheet, close,
 * heading) verbatim for visual consistency with the login modal. Two new
 * additions for this dialog's body + button-pair, scoped to the modal
 * namespace so they apply only inside an open <dialog class="lore-auth-modal">.
 * ------------------------------------------------------------------------- */

.lore-auth-modal__body {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 14px;
	color: var(--color-text-soft, #4a4a4a);
	line-height: 1.5;
	margin-bottom: var(--space-5, 24px);
}

.lore-auth-modal__body p {
	margin: 0;
}

.lore-auth-modal__actions {
	display: flex;
	gap: var(--space-3, 12px);
	justify-content: flex-end;
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
 * Responsive — mobile breakpoint at 640px per mockup v1.1.2
 * ------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.lore-account-hub {
		padding: var(--space-6, 32px) var(--space-4, 16px) var(--space-7, 48px);
	}

	.lore-account-hub__h1 {
		font-size: 40px;
	}

	.lore-account-hub__identity {
		gap: var(--space-4, 16px);
	}

	.lore-account-hub__identity-avatar {
		width: 56px;
		height: 56px;
	}

	.lore-account-hub__identity-initials {
		font-size: 22px;
	}

	.lore-account-hub__identity-name {
		font-size: 22px;
	}

	.lore-account-card {
		padding: var(--space-4, 16px);
		gap: var(--space-4, 16px);
	}

	.lore-account-sub {
		padding: var(--space-6, 32px) var(--space-4, 16px) var(--space-7, 48px);
	}

	.lore-account-sub__h1 {
		font-size: 32px;
	}

	.lore-account-sub__section {
		padding: var(--space-5, 24px);
	}

	.lore-account-activity__filters {
		gap: 6px;
	}

	.lore-account-activity__pill {
		padding: 6px var(--space-3, 12px);
		font-size: 11px;
	}

	.lore-auth-modal__actions {
		flex-direction: column-reverse;
	}

	.lore-auth-modal__actions > * {
		width: 100%;
	}
}

/* =========================================================================
 * SCOPE-7.5.1 — desktop two-pane layout + SD10 icon coloring + view transitions
 *
 * This block extends v1.6.0 with the polish round from browser-test feedback:
 * tighter mobile spacing, three-bucket icon colors per group cluster (SD10),
 * a Google-Account-style left rail on desktop, and cross-document view
 * transitions for the cross-page navigation experience.
 *
 * Layered on top of v1.6.0 rules — when a v1.6.0 rule is overridden, the
 * comment notes which one. No v1.6.0 rules are deleted (the polish is
 * additive so a rollback to v1.6.0 visual state is straightforward).
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * Section A — .lore-account-shell flex two-pane wrapper
 *
 * Mobile-default: shell is display:block; the sidebar partial renders as a
 * child but is itself hidden (see Section B). The <main> flows full-width
 * as it did in v1.6.0.
 *
 * Desktop (≥ 960px breakpoint, see Section E): shell becomes display:flex
 * row, sidebar becomes visible at width:280px, <main> flexes to fill the
 * remaining width.
 * ------------------------------------------------------------------------- */

.lore-account-shell {
	display: block;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Section B — .lore-account-sidebar* family
 *
 * Entirely hidden on mobile (display:none). All of the rules below take
 * effect only at ≥ 960px via Section E's media query — but they're
 * authored here as the natural class hierarchy rather than nested inside
 * the media query, for readability.
 *
 * Mobile rendering: sidebar is display:none (Section E inverts this above
 * the breakpoint).
 * ------------------------------------------------------------------------- */

.lore-account-sidebar {
	display: none; /* Hidden by default — Section E reveals on ≥ 960px */
}

.lore-account-sidebar__identity {
	display: flex;
	align-items: center;
	gap: var(--space-3, 12px);
	padding: var(--space-5, 24px) var(--space-4, 16px) var(--space-6, 32px);
	border-bottom: 1px solid var(--color-border-soft, #d8d8d0);
	margin-bottom: var(--space-5, 24px);
}

.lore-account-sidebar__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-linen-deep, #e6e6dc);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lore-account-sidebar__initials {
	font-family: var(--font-display, Larken, "Cormorant Garamond", serif);
	font-size: 18px;
	font-weight: 500;
	color: var(--color-cabernet, #500000);
	letter-spacing: 0.02em;
}

.lore-account-sidebar__identity-text {
	flex: 1;
	min-width: 0;
}

.lore-account-sidebar__identity-name {
	font-family: var(--font-display, Larken, "Cormorant Garamond", serif);
	font-size: 16px;
	font-weight: 400;
	color: var(--color-text, #1a1a1a);
	line-height: 1.2;
	margin: 0 0 2px 0;
}

/* v1.9.0 — .lore-account-sidebar__identity-email + __identity-meta rules
   deleted (markup dropped in v2.17.2 — sidebar identity block trimmed to
   avatar + name only). No DOM targets. */

.lore-account-sidebar__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lore-account-sidebar__group-label {
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-text-muted, #8a8a83);
	margin: var(--space-4, 16px) 0 var(--space-2, 8px) var(--space-4, 16px);
	padding: 0;
}

.lore-account-sidebar__group-label:first-of-type {
	margin-top: var(--space-2, 8px);
}

.lore-account-sidebar__nav-item {
	display: block;
	padding: var(--space-3, 12px) var(--space-4, 16px);
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 14px;
	color: var(--color-text-soft, #4a4a4a);
	text-decoration: none;
	border-radius: var(--radius-md, 6px);
	transition: background-color 180ms ease, color 180ms ease;
	line-height: 1.3;
}

.lore-account-sidebar__nav-item:hover {
	background: var(--color-linen, #efefe6);
	color: var(--color-cabernet, #500000);
}

.lore-account-sidebar__nav-item[aria-current="page"] {
	background: var(--color-linen, #efefe6);
	color: var(--color-cabernet, #500000);
	font-weight: 500;
}

.lore-account-sidebar__nav-item:focus-visible {
	outline: 2px solid var(--color-cabernet, #500000);
	outline-offset: -2px;
}

/* -------------------------------------------------------------------------
 * Section C — Mobile spacing tightens (overrides v1.6.0 values)
 *
 * v1.6.0 set generous mobile spacing for the hub intro/identity/groups.
 * Browser-testing showed the spacing felt too loose between the identity
 * block and the first group card. These rules tighten it.
 *
 * NOT wrapped in a min-width media query — these are the new mobile-first
 * defaults. Section E provides desktop-specific overrides where needed.
 * ------------------------------------------------------------------------- */

/* Hub intro: less bottom padding, less margin-bottom */
.lore-account-hub__intro {
	padding-bottom: var(--space-5, 24px); /* was --space-7 (48px) */
	margin-bottom: var(--space-5, 24px); /* was --space-7 (48px) */
}

/* Hub identity block: less vertical padding */
.lore-account-hub__identity {
	padding: var(--space-5, 24px) 0; /* was --space-6 (32px) */
	margin-bottom: var(--space-5, 24px); /* was --space-7 (48px) */
}

/* Hub group cluster: less margin between groups */
.lore-account-hub__group {
	margin-bottom: var(--space-5, 24px); /* was --space-7 (48px) */
}

/* Sub-page intro block: less bottom padding/margin */
.lore-account-sub__intro {
	margin-bottom: var(--space-5, 24px); /* was --space-7 (48px) */
	padding-bottom: var(--space-4, 16px); /* was --space-6 (32px) */
}

/* Sub-page section: less margin between adjacent sections */
.lore-account-sub__section {
	margin-bottom: var(--space-5, 24px); /* was --space-6 (32px) */
}

/* -------------------------------------------------------------------------
 * Section D — Three-bucket icon colors (SD10)
 *
 * Per-card icon styling via the [data-card="..."] attribute on each card
 * anchor (no new modifier classes needed — the attribute already carries
 * the semantic info). Three buckets per the group structure:
 *
 *   Personal cluster: personal-info + notifications
 *     stroke = Cabernet (#500000), bg = Linen (#efefe6)
 *
 *   Security cluster: security + sessions
 *     stroke = Harbor Blue (#1a5b60), bg = Bay Mist (#c1ece3)
 *
 *   Activity cluster: activity
 *     stroke = Cabernet (#500000), bg = Sand (#dac9aa)
 *
 * The base .lore-account-card__icon rules from v1.6.0 set stroke=Cabernet
 * + bg=Linen as the default — Personal cluster gets that behavior with no
 * override needed. Security + Activity clusters get the per-card overrides
 * below.
 *
 * Hover behavior continues to tint the row Linen and shift the icon to
 * the brand-warm signal — Security cluster's hover state stays Harbor Blue
 * stroke (no shift to Cabernet on hover; the cool tone is the group's
 * identity).
 * ------------------------------------------------------------------------- */

/* Security cluster — Harbor Blue / Bay Mist */
.lore-account-card[data-card="security"] .lore-account-card__icon,
.lore-account-card[data-card="sessions"] .lore-account-card__icon {
	background: var(--color-bay-mist, #c1ece3);
}
.lore-account-card[data-card="security"] .lore-account-card__icon svg,
.lore-account-card[data-card="sessions"] .lore-account-card__icon svg {
	stroke: var(--color-harbor-blue, #1a5b60);
}

/* Security cluster hover override: title stays Harbor Blue (not Cabernet) */
.lore-account-card[data-card="security"]:hover .lore-account-card__title,
.lore-account-card[data-card="sessions"]:hover .lore-account-card__title {
	color: var(--color-harbor-blue, #1a5b60);
}
.lore-account-card[data-card="security"]:hover .lore-account-card__chevron,
.lore-account-card[data-card="sessions"]:hover .lore-account-card__chevron {
	stroke: var(--color-harbor-blue, #1a5b60);
}

/* Activity cluster — Cabernet stroke / Sand background */
.lore-account-card[data-card="activity"] .lore-account-card__icon {
	background: var(--color-sand, #dac9aa);
}
/* (stroke stays Cabernet — same as v1.6.0 default — no override needed) */

/* -------------------------------------------------------------------------
 * Section E — Desktop two-pane layout (≥ 960px)
 *
 * All the desktop-specific behaviors:
 *
 *   - Shell becomes display:flex row
 *   - Sidebar visible at 280px width, position:sticky for long sub-pages
 *   - Hub's --mobile-only identity block hidden (sidebar shows it instead)
 *   - Sub-page back-link hidden (sidebar provides nav)
 *   - Hub intro re-spaced for the wider context
 *
 * Breakpoint at 960px — below this the mobile single-column layout from
 * v1.6.0 holds; above it the two-pane takes over.
 * ------------------------------------------------------------------------- */

@media (min-width: 960px) {

	/* Shell becomes flex row, max-width grows for the two-pane context */
	.lore-account-shell {
		display: flex;
		gap: var(--space-7, 48px);
		max-width: var(--max-page-width-wide, 1200px);
		margin: 0 auto;
		padding: var(--space-7, 48px) var(--space-6, 32px);
		align-items: flex-start;
	}

	/* Sidebar — reveal, fix width, sticky for long sub-page scroll.
	   v1.8.0: width 280 → 256 (tighter, more right-pane room). Outer
	   Paper-background wrapper dropped — the individual group cards
	   inside provide the card framing now per the v1.8.0 redesign. */
	.lore-account-sidebar {
		display: block;
		flex: 0 0 256px;
		width: 256px;
		position: sticky;
		top: var(--space-6, 32px);
		max-height: calc(100vh - var(--space-7, 48px));
		overflow-y: auto;
		background: transparent;
		border: none;
		border-radius: 0;
		padding: 0;
	}

	/* Hub <main>: drop the outer container padding (shell handles it) and
	   let the hub flex into the remaining width. */
	.lore-account-hub {
		padding: 0;
		max-width: none;
		margin: 0;
		flex: 1;
		min-width: 0; /* prevents flex overflow on long card titles */
		background: transparent;
		min-height: 0;
	}

	/* Sub-page <main>: same treatment — drop padding/margin, flex into
	   remaining width, transparent background (shell-container styling). */
	.lore-account-sub {
		padding: 0;
		max-width: none;
		margin: 0;
		flex: 1;
		min-width: 0;
		background: transparent;
		min-height: 0;
	}

	/* Hide the mobile-only identity block — sidebar shows it instead */
	.lore-account-hub__identity--mobile-only {
		display: none;
	}

	/* Hide the sub-page back-link — sidebar is the nav source of truth */
	.lore-account-sub__back {
		display: none;
	}

	/* Hub intro: less aggressive vertical rhythm on desktop where the
	   surrounding two-pane context already provides structure */
	.lore-account-hub__intro {
		padding-bottom: var(--space-5, 24px);
		margin-bottom: var(--space-6, 32px);
	}

	/* Hub h1: scale down slightly for the narrower right pane */
	.lore-account-hub__h1 {
		font-size: 48px; /* was 60px on mobile/wide single-column */
	}

	/* Group spacing: a touch more breathing room on desktop */
	.lore-account-hub__group {
		margin-bottom: var(--space-6, 32px);
	}

	/* Sub-page intro re-spaced for desktop */
	.lore-account-sub__intro {
		margin-bottom: var(--space-6, 32px);
		padding-bottom: var(--space-5, 24px);
	}

	/* Sub-page sections: a touch more spacing on desktop */
	.lore-account-sub__section {
		margin-bottom: var(--space-6, 32px);
	}

}

/* -------------------------------------------------------------------------
 * Section F — Cross-document view transitions
 *
 * Opt in to the View Transitions API for cross-page navigation. The
 * browser snapshots the outgoing page, loads the new one, and cross-fades
 * between them automatically. No JS, no SPA infrastructure.
 *
 * Gated behind prefers-reduced-motion: no-preference so users with the
 * OS-level reduced-motion preference get the normal instant page swap
 * (no fade, no animation).
 *
 * Chrome 126+ / Safari 18.2+ honor these rules. Firefox (and older
 * browsers) ignore them entirely — the navigation just works the
 * standard way without a fade. Progressive enhancement in its truest
 * form.
 *
 * 180ms is the cross-fade duration — slow enough to read as intentional
 * polish, fast enough to never feel sluggish. Google Account itself uses
 * ~200ms.
 *
 * The sidebar markup is byte-identical across all six account pages by
 * design. When the browser cross-fades, the sidebar portion of the old
 * and new snapshots are identical pixels, so the fade is visually
 * invisible on that half of the layout. Only the right pane (the
 * sub-page content) visibly fades.
 * ------------------------------------------------------------------------- */

@view-transition {
	navigation: none; /* default to off; reduced-motion users get this */
}

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 180ms;
	}
}

/* =========================================================================
 * SCOPE-7.5.2 — sidebar redesign + :has() conditional intro spacing (v1.8.0)
 *
 * Layered on top of v1.7.0 rules. Specific overrides documented per rule
 * group. The v1.7.0 sidebar family rules above continue to define the
 * mobile-default (display:none) and the broad shell rules — this block
 * provides the new visual identity at the desktop breakpoint, plus the
 * cross-cutting :has() intro tweak.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * Section G — Sidebar redesign (v1.8.0)
 *
 * Identity block trimmed to avatar + name. Nav items restructured as
 * icon + label inline. Group clusters wrap in rounded Paper-colored
 * cards echoing the hub aesthetic. SD10 group coloring applies to
 * sidebar icons via the same [data-card="..."] selectors used on hub
 * cards.
 *
 * All rules below live inside the desktop ≥ 960px media query (the
 * sidebar isn't visible on mobile). Wrapped here in their own @media
 * block rather than re-opening v1.7.0's Section E media query because
 * keeping each version's contributions self-contained makes the
 * changelog easier to audit.
 * ------------------------------------------------------------------------- */

@media (min-width: 960px) {

	/* Identity block — compact single-row: avatar + name only.
	   v1.8.0 overrides v1.7.0's three-line layout (which included
	   email + member-since). */
	.lore-account-sidebar__identity {
		display: flex;
		align-items: center;
		gap: var(--space-3, 12px);
		padding: var(--space-3, 12px) var(--space-3, 12px) var(--space-5, 24px);
		border-bottom: 1px solid var(--color-border-soft, #d8d8d0);
		margin-bottom: var(--space-4, 16px);
	}

	/* Avatar — resized 48 → 40px (proportionally right for single-line
	   identity block; v1.7.0's 48px balanced against 3 lines of text). */
	.lore-account-sidebar__avatar {
		width: 40px;
		height: 40px;
	}

	.lore-account-sidebar__initials {
		font-size: 15px; /* was 18px in v1.7.0 — scales with avatar */
	}

	/* Display name now stands alone on a single line. */
	.lore-account-sidebar__identity-name {
		font-family: var(--font-display, Larken, "Cormorant Garamond", serif);
		font-size: 16px;
		font-weight: 400;
		color: var(--color-text, #1a1a1a);
		line-height: 1.2;
		margin: 0;
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Nav container — give the group cards breathing room between them. */
	.lore-account-sidebar__nav {
		display: flex;
		flex-direction: column;
		gap: var(--space-4, 16px);
	}

	/* Group label — repositioned above each group-card. Tighter spacing
	   than v1.7.0 (which had labels floating above flat nav items). */
	.lore-account-sidebar__group-label {
		font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
		font-size: 10px;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.14em;
		color: var(--color-text-muted, #8a8a83);
		margin: 0 0 var(--space-2, 8px) var(--space-3, 12px);
		padding: 0;
	}

	/* v1.7.0's :first-of-type top-margin reset no longer applies in the
	   new structure — the parent .lore-account-sidebar__nav controls
	   group spacing via gap. Reset the v1.7.0 rule explicitly. */
	.lore-account-sidebar__group-label:first-of-type {
		margin-top: 0;
	}

	/* Group-card — the new visual container per group cluster. Each holds
	   1-2 nav items separated by hairline dividers (sibling adjacent rule
	   below). Paper background + soft border matches the hub's group-card
	   aesthetic. */
	.lore-account-sidebar__group-card {
		background: var(--color-paper, #fdfcf8);
		border: 1px solid var(--color-border-soft, #d8d8d0);
		border-radius: var(--radius-card-lg, 12px);
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	/* Nav item — restructured as flex row: icon + label inline.
	   Overrides v1.7.0's block-style nav-item. */
	.lore-account-sidebar__nav-item {
		display: flex;
		align-items: center;
		gap: var(--space-3, 12px);
		padding: var(--space-3, 12px) var(--space-4, 16px);
		font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
		font-size: 14px;
		color: var(--color-text, #1a1a1a);
		text-decoration: none;
		border-radius: 0; /* v1.7.0's rounded items don't fit inside the
		                    group-card; the outer card has the corners. */
		transition: background-color 180ms ease, color 180ms ease;
		line-height: 1.3;
		position: relative;
	}

	/* Hairline divider between adjacent items inside a group-card. */
	.lore-account-sidebar__nav-item + .lore-account-sidebar__nav-item {
		border-top: 1px solid var(--color-border-mute, #ebebe3);
	}

	/* Hover state — tint background + Cabernet text. v1.7.0's hover
	   was the same Linen tint, but applies inside the group-card now. */
	.lore-account-sidebar__nav-item:hover {
		background: var(--color-linen, #efefe6);
		color: var(--color-cabernet, #500000);
	}

	/* Active state — same Linen tint as hover but persistent + bold.
	   The visual carries the user's current location. */
	.lore-account-sidebar__nav-item[aria-current="page"] {
		background: var(--color-linen, #efefe6);
		color: var(--color-cabernet, #500000);
		font-weight: 500;
	}

	/* Focus outline — slightly inset so it doesn't escape the group-card
	   rounded corners. */
	.lore-account-sidebar__nav-item:focus-visible {
		outline: 2px solid var(--color-cabernet, #500000);
		outline-offset: -2px;
	}

	/* Icon wrapper inside the nav item. 20px is the right size for a
	   row of ~44px tall — visible without crowding the label. No
	   tinted background circle (would crowd the row); the SVG stroke
	   color carries the SD10 group identity instead. */
	.lore-account-sidebar__nav-icon {
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lore-account-sidebar__nav-icon svg {
		width: 20px;
		height: 20px;
		stroke: var(--color-cabernet, #500000);
		stroke-width: 1.5;
		fill: none;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: stroke 180ms ease;
	}

	/* Label takes the remaining space. */
	.lore-account-sidebar__nav-label {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* ---------------------------------------------------------------
	 * SD10 parity for sidebar icons — same data-card scheme as the hub
	 * cards (auth.css v1.7.0 Section D). Personal cluster keeps the
	 * default Cabernet stroke; Security cluster overrides to Harbor
	 * Blue; Activity cluster stays Cabernet.
	 *
	 * Sidebar icons don't get tinted background circles (unlike the
	 * hub cards) — the row is already a flex container and an
	 * additional circle would crowd the layout. Stroke color alone
	 * carries the group identity in the sidebar.
	 * --------------------------------------------------------------- */

	.lore-account-sidebar__nav-item[data-card="security"] .lore-account-sidebar__nav-icon svg,
	.lore-account-sidebar__nav-item[data-card="sessions"] .lore-account-sidebar__nav-icon svg {
		stroke: var(--color-harbor-blue, #1a5b60);
	}

	/* Security cluster hover override: title stays Harbor Blue (parallels
	   the hub card hover behavior — cool tone IS the cluster identity). */
	.lore-account-sidebar__nav-item[data-card="security"]:hover,
	.lore-account-sidebar__nav-item[data-card="sessions"]:hover,
	.lore-account-sidebar__nav-item[data-card="security"][aria-current="page"],
	.lore-account-sidebar__nav-item[data-card="sessions"][aria-current="page"] {
		color: var(--color-harbor-blue, #1a5b60);
	}

	/* (Activity cluster — stroke stays default Cabernet; no override
	   needed. The hub-card Activity icon used a Sand background; the
	   sidebar has no background circle so there's nothing to color.) */

}

/* -------------------------------------------------------------------------
 * Section H — :has() conditional intro spacing (v1.8.0)
 *
 * Sub-page intro blocks that DON'T include a subtitle paragraph get
 * tighter spacing — the dead vertical space below the h1 (originally
 * sized for a subtitle's descender + padding) reads as a layout bug
 * when no subtitle renders.
 *
 * Two sub-pages have subtitles emitted in their templates
 * (Notifications, Active sessions, Recent changes); two do not
 * (Personal info, Password & sign-in). The :has() selector lets CSS
 * branch on actual subtitle presence without any template changes.
 *
 * Baseline 2023 support: Chrome 105+, Safari 15.4+, Firefox 121+.
 * Older browsers fall through to the v1.6.0 spacing — slightly
 * generous on those without-subtitle pages, but functionally
 * unbroken. Progressive enhancement.
 *
 * No breakpoint gate — applies on both mobile and desktop.
 * ------------------------------------------------------------------------- */

.lore-account-sub__intro:not(:has(.lore-account-sub__subtitle)) {
	margin-bottom: var(--space-4, 16px);
	padding-bottom: var(--space-3, 12px);
}

/* Hub intro block: no subtitle markup at all post-v2.17.1; hard-code
   the tightened spacing (no :has() conditional needed here since the
   subtitle is permanently absent from page-account.php). */
.lore-account-hub__intro {
	padding-bottom: var(--space-3, 12px);
	margin-bottom: var(--space-4, 16px);
}

/* =========================================================================
 * SCOPE-7.5.3 — mobile spacing tightens + sidebar tinted-circle icons +
 *               sidebar name line-clamp (v1.9.0)
 *
 * Layered on top of v1.8.0. Three rule groups, each addressing a specific
 * polish-round critique:
 *
 *   Section I.1 — Mobile hub spacing (rule overrides on the existing
 *                 intro/identity/section selectors)
 *   Section I.2 — Sidebar tinted-circle icon redesign (replaces the
 *                 background-less icons from v1.8.0 Section G)
 *   Section I.3 — Sidebar name line-clamp (2 lines max, ellipsis on
 *                 overflow)
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * Section I.1 — Mobile hub spacing tightens
 *
 * Three targets:
 *   a) .lore-account-hub__intro bottom spacing (h1 → identity gap)
 *   b) .lore-account-hub__identity vertical padding (internal block height)
 *   c) .lore-account-hub__group label-to-card spacing
 *
 * Mobile-first (no media query); desktop's tighter spacing already lives
 * in v1.7.0 Section E. The values here override the v1.8.0 Section H
 * defaults to claw back vertical real-estate above the fold.
 * ------------------------------------------------------------------------- */

.lore-account-hub__intro {
	padding-bottom: 8px; /* was --space-3 (12px) in v1.8.0 */
	margin-bottom: 16px; /* was --space-4 (16px) in v1.8.0 — same value */
}

.lore-account-hub__identity {
	padding: 16px 0 20px; /* was --space-5/0 (24px/0) in v1.6.0 */
	margin-bottom: 16px;  /* was --space-5 (24px) in v1.6.0 */
	gap: 16px;            /* was --space-5 (24px) — tighten avatar→name gap */
}

/* Section eyebrow → group-card gap. The eyebrow itself has a tiny
   bottom margin; the surrounding section has its own margins. Tighten
   both to claw back vertical space. */
.lore-account-hub__group-label {
	margin-bottom: 8px; /* was likely --space-3 (12px) in v1.6.0 */
}

.lore-account-hub__group {
	margin-bottom: 20px; /* was --space-5 (24px) in v1.7.0 — tighter */
}

/* -------------------------------------------------------------------------
 * Section I.2 — Sidebar tinted-circle icon redesign (desktop only)
 *
 * Wrapped in the ≥ 960px media query — only applies to the desktop
 * sidebar. Mobile is unaffected.
 *
 * v1.8.0 Section G styled .lore-account-sidebar__nav-icon as a bare
 * 20×20px wrapper with no background — relying on stroke color alone
 * to differentiate the SD10 groups. User feedback: not enough visual
 * pop on the Paper-colored group-card background. v1.9.0 adds tinted
 * circle backgrounds in 26px, parallel to the mobile hub's 44px circles
 * but proportionally smaller for the tighter sidebar context.
 *
 * Override pattern: the v1.8.0 rules are kept (they define stroke color
 * + SVG sizing); this section adds the circle background + adjusts the
 * wrapper to a flex-center container around the SVG.
 * ------------------------------------------------------------------------- */

@media (min-width: 960px) {

	/* Icon wrapper: 26px circle, Linen background by default (Personal
	   cluster). The SVG inside stays 20px so the circle has a 3px
	   padding ring of color around the icon. */
	.lore-account-sidebar__nav-icon {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: var(--color-linen, #efefe6);
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* SVG inside the circle — keep at 18px (smaller than v1.8.0's 20px)
	   for proportional balance against the 26px circle. */
	.lore-account-sidebar__nav-icon svg {
		width: 18px;
		height: 18px;
	}

	/* Security cluster — Bay Mist circle background. Overrides the Linen
	   default. Stroke color override comes from v1.8.0 Section G (Harbor
	   Blue) and remains in effect. */
	.lore-account-sidebar__nav-item[data-card="security"] .lore-account-sidebar__nav-icon,
	.lore-account-sidebar__nav-item[data-card="sessions"] .lore-account-sidebar__nav-icon {
		background: var(--color-bay-mist, #c1ece3);
	}

	/* Activity cluster — Sand circle background. Stroke stays Cabernet
	   default from v1.8.0 (no override needed). */
	.lore-account-sidebar__nav-item[data-card="activity"] .lore-account-sidebar__nav-icon {
		background: var(--color-sand, #dac9aa);
	}

}

/* -------------------------------------------------------------------------
 * Section I.3 — Sidebar name line-clamp (desktop only)
 *
 * v1.8.0 set the sidebar identity name to single-line ellipsis truncation
 * (overflow:hidden; text-overflow:ellipsis; white-space:nowrap). For a
 * typical 2-word name like "Joseph Nguyen" this is fine. For a long
 * 3-word name like "Bartholomew Christopher Anderson" the single-line
 * truncation kicks in too aggressively, leaving "Bartholomew Chr…" which
 * loses too much information.
 *
 * v1.9.0 switches to 2-line line-clamp: name renders on 1 or 2 lines as
 * needed, then ellipses if it exceeds 2 lines. Universal browser support
 * via -webkit-line-clamp (Baseline 2023 despite the vendor prefix; the
 * unprefixed `line-clamp` is going through standardization).
 *
 * The override replaces the v1.8.0 Section G rule entirely. Wrapped in
 * the desktop media query — the sidebar itself is desktop-only so these
 * rules can never affect mobile.
 * ------------------------------------------------------------------------- */

@media (min-width: 960px) {

	.lore-account-sidebar__identity-name {
		/* Reset v1.8.0 single-line truncation: */
		white-space: normal;
		/* Apply 2-line clamp: */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		/* Slightly tighter line-height for the 2-line case so the
		   identity block doesn't grow much vertically when a long
		   name wraps. */
		line-height: 1.15;
	}

}

/* =========================================================================
 * SCOPE-7.5.4 — mobile identity-block card wrapper (v1.10.0)
 *
 * Single rule that elevates the mobile identity block from "floating
 * text on the page background" to "a proper card matching the rest of
 * the page" — adds Paper background, soft border, rounded corners,
 * internal horizontal padding.
 *
 * Selector targets the --mobile-only variant specifically. Desktop
 * sidebar identity block lives inside the sidebar shell and isn't a
 * peer to page-level cards, so it doesn't need this treatment.
 *
 * The v1.6.0 border-bottom-only separator is replaced by a full border
 * since the card now stands on its own visually.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * Section J — Mobile identity card wrapper
 *
 * Override rules layer on top of v1.6.0 + v1.7.0 + v1.9.0 cascade. The
 * earlier rules set display:flex + align-items:center + gap, which are
 * preserved. v1.10.0 contributes the visual card chrome: background,
 * border, border-radius, internal padding.
 *
 * Important: targets the .--mobile-only variant only. The desktop
 * sidebar identity block (.lore-account-sidebar__identity) is
 * unaffected; the mobile-hub-content identity block (.lore-account-hub
 * __identity--mobile-only) is what gets the card treatment.
 *
 * Wrapped in a max-width media query bound so we never apply the card
 * styling at desktop sizes (where the --mobile-only block is already
 * display:none via v1.7.0 Section E).
 * ------------------------------------------------------------------------- */

@media (max-width: 959px) {

	.lore-account-hub__identity--mobile-only {
		background: var(--color-paper, #fdfcf8);
		border: 1px solid var(--color-border-soft, #d8d8d0);
		border-radius: var(--radius-card-lg, 12px);
		padding: 20px 16px;  /* vertical / horizontal — matches card rhythm */
		border-bottom: 1px solid var(--color-border-soft, #d8d8d0);
		/* ↑ border-bottom explicit override of the v1.6.0 separator;
		   visually identical to the full `border` since the card now
		   has the same border on all four sides. Defensive: prevents
		   the v1.6.0 rule from rendering a "double-weight" bottom edge
		   if specificity ever shifts. */
		margin-bottom: 20px;
	}

}


/* -------------------------------------------------------------------------
 * Section K — Inline-edit pattern (v1.11.0, SCOPE-7.6)
 *
 * Editable display-name surface on /account/personal-info Name row. Two
 * states managed by JS (theme/assets/js/account-sub.js Module 3):
 *
 *   View state (default): name renders as text + pencil-icon button to
 *                         the right. .lore-account-inline-edit__view is
 *                         visible; .lore-account-inline-edit__form is
 *                         hidden via the [hidden] HTML attribute (which
 *                         we don't need to style — the browser handles
 *                         hidden { display: none; } as user-agent default).
 *
 *   Edit state:           JS sets .lore-account-inline-edit__view to
 *                         hidden (via .hidden DOM property) and removes
 *                         .lore-account-inline-edit__form's hidden
 *                         attribute. Inputs side-by-side at ≥ 960px;
 *                         stacked at narrower viewports. Action row
 *                         right-aligned: Cancel (text-link) left of Save
 *                         (primary button, .lore-account-sub__save).
 *
 * Save button reuses the existing .lore-account-sub__save class (defined
 * earlier in this file ~line 1494) — no new submit-button styles authored.
 *
 * The pencil icon is an inline SVG inside the trigger button; sized 16px
 * (matches Section I.2 sidebar icon scale). Icon stroke uses currentColor
 * so it inherits from button color rules (hover/focus state changes color
 * naturally).
 *
 * Establishes the inline-edit BEM block name for future surfaces. If a
 * future beat surfaces additional inline-editable fields elsewhere, this
 * Section K can be reused as-is.
 * ------------------------------------------------------------------------- */

.lore-account-inline-edit {
	/* Inherits font/color from .lore-account-sub__view-only-row dd
	   (line ~1619). Nothing to reset here. */
}

.lore-account-inline-edit__view {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2, 8px);
}

.lore-account-inline-edit__value {
	/* Inherits typography from parent <dd> */
}

.lore-account-inline-edit__edit-button {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	padding: var(--space-2, 8px);
	margin: 0;
	cursor: pointer;
	color: var(--color-text-muted, #8a8a83);
	border-radius: var(--radius-md, 6px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: color 180ms ease, background-color 180ms ease;
}

/* v1.13.1 — defeat GeneratePress's global button:focus charcoal (#3f4047) on
   the pencil. account-sub.js returns focus here after Cancel, firing a plain
   :focus (not :focus-visible), so without this the pencil paints charcoal.
   Restate resting on :focus, keep the linen hover on :focus:hover. ADR-079. */
.lore-account-inline-edit__edit-button:focus {
	background-color: transparent;
	color: var(--color-text-muted, #8a8a83);
}

.lore-account-inline-edit__edit-button:hover,
.lore-account-inline-edit__edit-button:focus-visible {
	color: var(--color-cabernet, #500000);
	background-color: var(--color-linen, #efefe6);
}

.lore-account-inline-edit__edit-button:focus:hover {
	color: var(--color-cabernet, #500000);
	background-color: var(--color-linen, #efefe6);
}

.lore-account-inline-edit__edit-button:focus-visible {
	outline: 2px solid var(--color-cabernet, #500000);
	outline-offset: 2px;
}

.lore-account-inline-edit__edit-button svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* Edit-state form. Default-hidden via [hidden] attribute on the <form>
   element itself. JS Module 3 (account-sub.js) sets `form.hidden = false`
   on pencil-click to reveal.

   v1.11.1 (v2.18.1 polish): explicit [hidden] guard added. v1.11.0 had a
   defensive `display: block` rule on the bare class selector that, by
   author-stylesheet specificity, defeated the browser's user-agent
   `hidden { display: none; }` and rendered the form visible by default.
   Browser-verify caught it (test 3). Fix: scope the display:none to the
   [hidden] attribute selector (higher specificity than the bare class),
   and drop the unnecessary `display: block` override. The form is now
   correctly hidden until JS removes the attribute. */
.lore-account-inline-edit__form[hidden] {
	display: none;
}

.lore-account-inline-edit__form {
	margin-top: var(--space-3, 12px);
}

/* Inputs container — mobile-first stacked; flex-row at ≥ 960px */
.lore-account-inline-edit__inputs {
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 12px);
}

.lore-account-inline-edit__field {
	display: block;
	flex: 1;
}

.lore-account-inline-edit__field input[type="text"] {
	width: 100%;
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 15px;
	color: var(--color-text, #1a1a1a);
	background: var(--color-paper, #fdfcf8);
	border: 1px solid var(--color-border-soft, #d8d8d0);
	border-radius: var(--radius-input, 2px);
	padding: var(--space-3, 12px);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 180ms ease;
}

.lore-account-inline-edit__field input[type="text"]:focus-visible {
	outline: 2px solid var(--color-cabernet, #500000);
	outline-offset: 2px;
	border-color: var(--color-cabernet, #500000);
}

/* v1.13.0 — Role <select> inside an inline-edit row. Mirrors the text-input
   rule above, plus a custom caret (appearance:none removes the native one). */
.lore-account-inline-edit__field select {
	width: 100%;
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: 15px;
	color: var(--color-text, #1a1a1a);
	background-color: var(--color-paper, #fdfcf8);
	border: 1px solid var(--color-border-soft, #d8d8d0);
	border-radius: var(--radius-input, 2px);
	padding: var(--space-3, 12px);
	padding-right: var(--space-8, 40px);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23696969' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-3, 12px) center;
	background-size: 16px 16px;
	transition: border-color 180ms ease;
}

.lore-account-inline-edit__field select:focus-visible {
	outline: 2px solid var(--color-cabernet, #500000);
	outline-offset: 2px;
	border-color: var(--color-cabernet, #500000);
}

/* Action row — right-aligned. Cancel text-link to the left of Save button
   (Save = primary, rightmost; SCOPE-7.6 Q1.SD-1C lock — establishes
   inline-edit two-button convention for the auth surface going forward). */
.lore-account-inline-edit__actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--space-3, 12px);
	margin-top: var(--space-4, 16px);
}

/* Cancel — text-link styling. Not a primary button; less visual weight
   than the Save button so the action hierarchy reads "Save = commit /
   Cancel = back out". */
.lore-account-inline-edit__cancel {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	padding: var(--space-2, 8px) var(--space-3, 12px);
	margin: 0;
	cursor: pointer;
	color: var(--color-text-muted, #8a8a83);
	font-family: var(--font-body, "Articulat CF", "Inter", sans-serif);
	font-size: var(--fs-sm, 13px);
	text-decoration: underline;
	transition: color 180ms ease;
}

.lore-account-inline-edit__cancel:hover,
.lore-account-inline-edit__cancel:focus,
.lore-account-inline-edit__cancel:focus-visible,
.lore-account-inline-edit__cancel:active {
	background: transparent;   /* defeat GP button:hover/:focus charcoal box (ADR-079) */
	border: 0;
	color: var(--color-cabernet, #500000);
}

.lore-account-inline-edit__cancel:focus-visible {
	outline: 2px solid var(--color-cabernet, #500000);
	outline-offset: 2px;
}

/* Desktop two-pane breakpoint: inputs side-by-side. Matches Section E
   sidebar-reveal breakpoint at min-width: 960px. */
@media (min-width: 960px) {

	.lore-account-inline-edit__inputs {
		flex-direction: row;
	}

}