/* ---------------------------------------------------------------------------
   Article + article index.

   Reuses the .pw-* paywall classes from urhema_lesson.css — load that file too, or
   the paywall renders unstyled. Only .pw-summary is new and it's defined here.

   Uses the real --ub-* design tokens from urhema_tokens.css/urhema_theme.css.
   (Migrated from a --color-* and --font-* naming scheme that was never actually
   defined anywhere in the real system — every value in this file was silently
   rendering off its hardcoded fallback, unresponsive to the active theme, until
   this pass. See WIRING for the full mapping.)
   --------------------------------------------------------------------------- */

/* ===========================================================================
   Article — three columns
   =========================================================================== */

.ar {
    display: grid;
    /* Rail, essay, outline. The middle column is the only one allowed to grow,
       and its own max-width holds the measure. */
    grid-template-columns: 12rem minmax(0, 1fr) 14rem;
    gap: 3.5rem;
    align-items: start;
    max-width: 78rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}

.ar-main {
    max-width: 68ch;
    min-width: 0;
}

/* Left rail --------------------------------------------------------------- */

.ar-rail {
    position: sticky;
    top: 5rem;
    font-size: 0.875rem;
}

.ar-rail-title,
.ar-aside-title {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ub-ink-muted);
    font-weight: 500;
    margin: 0 0 0.875rem;
}

.ar-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ar-rail-list li + li {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: var(--ub-rule);
}

.ar-rail-list a {
    color: var(--ub-ink);
    text-decoration: none;
    line-height: 1.35;
    display: block;
}

.ar-rail-list a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.ar-rail-lock {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ub-accent-700);
}

.ar-rail-empty {
    color: var(--ub-ink-muted);
    margin: 0;
}

/* Head -------------------------------------------------------------------- */

.ar-head {
    padding-bottom: 2rem;
    margin-bottom: 2.5rem;
    border-bottom: var(--ub-rule);
}

.ar-eyebrow-badge {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0 0 1rem;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 700;
    letter-spacing: var(--ub-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ub-accent-700);
}

.ar-eyebrow-badge-sep {
    opacity: 0.5;
}

.ar-tags {
    margin: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ar-tag {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ub-ink-muted);
    border: var(--ub-rule);
    padding: 0.125rem 0.5rem;
}

.ar-title {
    font-family: var(--ub-font-heading);
    font-size: clamp(2rem, 4.5vw, 2.875rem);
    line-height: 1.12;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--ub-ink);
}

.ar-summary {
    font-family: var(--ub-font-body);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ub-ink-muted);
    margin: 0 0 1.5rem;
}

.ar-byline {
    font-size: 0.875rem;
    color: var(--ub-ink-muted);
    margin: 0;
}

.ar-byline-sep,
.ai-meta-sep {
    margin: 0 0.625rem;
    opacity: 0.4;
}

.ar-photo {
    margin: 0 0 2rem;
}

.ar-photo img {
    display: block;
    width: 100%;
    border-radius: var(--ub-radius-md);
}

.ar-photo-caption {
    margin-top: var(--ub-space-2);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-style: italic;
    color: var(--ub-ink-muted);
}

/* Reading ----------------------------------------------------------------- */

.ar-reading {
    font-family: var(--ub-font-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ub-ink);
}

.ar-reading > * + * {
    margin-top: 1.25em;
}

.ar-reading h2 {
    font-family: var(--ub-font-heading);
    font-size: 1.5rem;
    line-height: 1.25;
    margin-top: 2.5em;
    scroll-margin-top: 5rem;
}

.ar-reading h3 {
    font-size: 1.125rem;
    margin-top: 2em;
    scroll-margin-top: 5rem;
}

.ar-reading blockquote {
    margin-left: 0;
    padding-left: 1.25rem;
    border-left: 2px solid var(--ub-accent-500);
    color: var(--ub-ink-muted);
    font-style: italic;
}

.ar-reading a {
    color: var(--ub-ink);
    text-decoration-color: var(--ub-accent-500);
    text-underline-offset: 0.2em;
}

.ar-reading .ub-verse-link {
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
}

/* =========================================================================
   Reading size preference (design consideration #3) — same shape as the
   equivalent block already shipped in urhema_lesson.css. (This used to be
   the only --ub-* reference in an otherwise --color-* and --font-* file; the
   rest of the file has since been migrated too — see WIRING for that pass.)
   ========================================================================= */

[data-reading-size="large"] .ar-reading {
    font-size: var(--ub-text-xl);
}

[data-reading-size="large"] .ar-reading h2 {
    font-size: var(--ub-text-2xl);
}

[data-reading-size="large"] .ar-reading h3 {
    /* Ties h3 to the same size as body at this step. The token scale has
       nothing between --ub-text-xl and --ub-text-2xl, so a distinct h3 size
       isn't available without inventing a value outside the scale (same
       constraint noted in urhema_lesson.css). Left unscaled, h3 would
       render SMALLER than the enlarged body around it (18px vs 22px) — an
       inversion, not a compromise, so matching it to body is the least-bad
       option. The default browser-bold weight on h3 still carries the
       hierarchy over body at equal size. */
    font-size: var(--ub-text-xl);
}

/* Right aside ------------------------------------------------------------- */

.ar-aside {
    position: sticky;
    top: 5rem;
    font-size: 0.875rem;
}

.ar-outline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: var(--ub-rule);
    /* A long essay can outrun the viewport. Capping and scrolling beats a sticky
       element whose bottom is permanently unreachable. */
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
}

.ar-outline-list li + li {
    margin-top: 0.5rem;
}

.ar-outline-list a {
    display: block;
    padding-left: 0.875rem;
    color: var(--ub-ink-muted);
    text-decoration: none;
    line-height: 1.4;
}

.ar-outline-list a:hover {
    color: var(--ub-ink);
}

/* Stub -------------------------------------------------------------------- */

.ar-stub {
    margin-top: 3rem;
    padding: 1.25rem 1.5rem;
    border: 1px dashed var(--ub-line);
    color: var(--ub-ink-muted);
    font-size: 0.875rem;
}

.ar-stub-title {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
    font-weight: 500;
}

.ar-stub-list {
    margin: 0;
    padding-left: 1.125rem;
    line-height: 1.7;
}

/* Paywall addition (rest of .pw-* lives in urhema_lesson.css) -------------- */

.pw-summary {
    font-family: var(--ub-font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ub-ink);
    margin: 0 0 1.5rem;
    max-width: 50ch;
}

/* ===========================================================================
   Article index
   =========================================================================== */

.ai {
    max-width: 60rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}

.ai-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ub-ink-muted);
    margin: 0 0 0.75rem;
}

.ai-title {
    font-family: var(--ub-font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--ub-ink);
}

.ai-intro {
    max-width: 60ch;
    color: var(--ub-ink-muted);
    line-height: 1.65;
    margin: 0;
}

.ai-head {
    padding-bottom: 2rem;
    margin-bottom: 1rem;
    border-bottom: var(--ub-rule);
}

.ai-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ai-item {
    padding: 2rem 0;
    border-bottom: var(--ub-rule);
}

.ai-item-title {
    font-family: var(--ub-font-heading);
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 600;
    margin: 0 0 0.625rem;
}

.ai-item-title a {
    color: var(--ub-ink);
    text-decoration: none;
}

.ai-item-title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.ai-tag-premium {
    display: inline-block;
    margin-left: 0.75rem;
    padding: 0.125rem 0.5rem;
    font-family: var(--ub-font-ui);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ub-accent-700);
    border: 1px solid currentColor;
    vertical-align: middle;
}

.ai-item-summary {
    max-width: 62ch;
    font-family: var(--ub-font-body);
    line-height: 1.65;
    color: var(--ub-ink-muted);
    margin: 0 0 0.75rem;
}

.ai-item-meta {
    font-size: 0.8125rem;
    color: var(--ub-ink-muted);
    margin: 0;
}

.ai-empty {
    padding: 3rem 0;
    color: var(--ub-ink-muted);
}

.ai-more {
    margin-top: 2rem;
}

.ai-more a {
    color: var(--ub-ink);
    text-decoration-color: var(--ub-accent-500);
    text-underline-offset: 0.2em;
}

/* ===========================================================================
   Quality floor
   =========================================================================== */

.ar a:focus-visible,
.ai a:focus-visible {
    outline: 2px solid var(--ub-accent-500);
    outline-offset: 2px;
}

/* Three columns need real width. Below this the outline goes above the essay and
   the rail drops to the bottom, where "more articles" belongs anyway. */
@media (max-width: 72rem) {
    .ar {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        max-width: 46rem;
    }

    .ar-main {
        order: 2;
    }

    .ar-aside {
        order: 1;
        position: static;
    }

    .ar-outline-list {
        max-height: none;
        overflow-y: visible;
    }

    .ar-rail {
        order: 3;
        position: static;
        padding-top: 2rem;
        border-top: var(--ub-rule);
    }
}

@media (max-width: 40rem) {
    .ar,
    .ai {
        padding: 2rem 1.125rem 3.5rem;
    }
}

/* ===========================================================================
   Reader actions row (bookmark, and room for more) + floating highlight button

   Both follow the primary-button token convention set in urhema_theme.css:
   accent background, --ub-accent-contrast as text. The light-theme override below
   is trimmed to the one real selector, [data-theme="light"] — the other three
   theme-detection schemes it used to also target don't match anything in the real
   system (see WIRING). Possibly this whole override is redundant now that the text
   color is the real, theme-aware --ub-accent-contrast token rather than a
   permanently-dark fallback — but that depends on what --ub-accent-contrast
   actually resolves to per theme in urhema_theme.css, which isn't in hand, so the
   override stays rather than being cut on an unconfirmed assumption.
   =========================================================================== */

/* Action row under the essay ------------------------------------------------ */

/* NOTE: no longer referenced by Article.cshtml as of the aside relocation — the
   actions moved to .ar-aside-actions below, in the sticky right column, matching
   the reference layout. Left in place rather than deleted: I can't confirm no
   other view references .ar-actions, and deleting a rule on an unconfirmed
   assumption is a worse trade than one unused block. */
.ar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: var(--ub-rule);
}

/* Vertical action stack in the sticky right column (.ar-aside is already
   position: sticky — see below). Children stretch to the container's width by
   flex default, so .ar-action-btn/.ar-action-signin (both inline-flex) fill the
   column evenly without needing their own width rule. */
.ar-aside-actions {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-2);
    margin-bottom: var(--ub-space-6);
}

/* Shared icon+word action button. The bookmark view component renders its
   <button>/<form> with this class (see WIRING); the aria-pressed / .is-on state
   flips the fill so "Saved" reads as active without changing the label's job. */
.ar-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.875rem;
    border: var(--ub-rule);
    border-radius: 7px;
    background: transparent;
    color: var(--ub-ink);
    font-family: var(--ub-font-ui);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.ar-action-btn:hover {
    border-color: var(--ub-accent-500);
    color: var(--ub-accent-500);
}

.ar-action-btn:focus-visible {
    outline: 2px solid var(--ub-accent-500);
    outline-offset: 2px;
}

.ar-action-btn .ar-action-icon {
    width: 0.9375rem;
    height: 0.9375rem;
    flex: none;
}

/* BUG FIX: BookmarkButton's Default.cshtml renders .ar-action-signin for the
   signed-out state, and its own comment says styling "lives in
   urhema.article.css (.ar-action-btn / .is-on / .ar-action-signin)" — but this
   class had no rule here at all. It was rendering fully unstyled: default link
   color, default (large) inherited SVG size, no padding/border. Same treatment
   as .ar-action-btn so it reads as one family of buttons in the stack, not an
   oversized outlier next to it. */
.ar-action-signin {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.875rem;
    border: var(--ub-rule);
    border-radius: 7px;
    background: transparent;
    color: var(--ub-ink);
    font-family: var(--ub-font-ui);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}

.ar-action-signin:hover {
    border-color: var(--ub-accent-500);
    color: var(--ub-accent-500);
}

.ar-action-signin:focus-visible {
    outline: 2px solid var(--ub-accent-500);
    outline-offset: 2px;
}

.ar-action-signin .ar-action-icon {
    width: 0.9375rem;
    height: 0.9375rem;
    flex: none;
}

/* Active ("Saved") state — filled with the accent, text switches to the bg
   token, mirroring .pw-btn-primary. */
.ar-action-btn[aria-pressed="true"],
.ar-action-btn.is-on {
    background: var(--ub-accent-500);
    border-color: var(--ub-accent-500);
    color: var(--ub-accent-contrast);
}

/* Floating "Highlight" button ---------------------------------------------- */

.ar-hl-btn {
    /* position:absolute + a high z-index; left/top are set inline by the script
       because only those two are dynamic. */
    position: absolute;
    z-index: 1000;

    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: 6px;

    background: var(--ub-accent-500);
    color: var(--ub-accent-contrast);

    font-family: var(--ub-font-ui);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.ar-hl-btn:hover {
    filter: brightness(1.06);
}

.ar-hl-btn:focus-visible {
    outline: 2px solid var(--ub-accent-500);
    outline-offset: 2px;
}

.ar-hl-btn-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
}

/* Light theme: pin the text to white on both action buttons, same reasoning as
   the primary-button block in urhema_theme.css (cream-on-teal reads soft; crisp
   white holds). Mirror all four theme markers that file supports. */
[data-theme="light"] .ar-hl-btn,
[data-theme="light"] .ar-action-btn[aria-pressed="true"],
[data-theme="light"] .ar-action-btn.is-on {
    color: var(--ub-accent-contrast);
}

@media (prefers-reduced-motion: reduce) {
    .ar-action-btn {
        transition: none;
    }
}

/* ===========================================================================
   Reading size preference (design consideration #3)

   Moved here from an inline <style> block in Article.cshtml as part of the
   aside redesign — everything else on this page lives in this external
   sheet, so the one inline exception was worth folding in while already
   restructuring this area. Restyled from a fixed-position floating pill
   (its original shape, matching Lesson.cshtml) into a normal block that sits
   in the .ar-aside stack alongside .ar-aside-actions: no position/bottom/
   right/z-index, border-radius softened from a full pill to --ub-radius-md
   so a full-width sidebar card doesn't look like an escaped floating capsule.
   =========================================================================== */

.ub-reading-size {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ub-space-2);
    padding: var(--ub-space-2) var(--ub-space-3);
    margin-bottom: var(--ub-space-6);
    background: var(--ub-paper-raised);
    border: 1px solid var(--ub-line-strong);
    border-radius: var(--ub-radius-md);
    box-shadow: var(--ub-shadow-soft);
}

.ub-reading-size__form {
    display: flex;
    align-items: center;
    gap: var(--ub-space-2);
}

.ub-reading-size__label {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 700;
    color: var(--ub-ink-muted);
}

.ub-reading-size__options {
    display: flex;
    gap: var(--ub-space-1);
}

.ub-reading-size__option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--ub-radius-sm);
    cursor: pointer;
    font-family: var(--ub-font-ui);
    color: var(--ub-ink-muted);
}

.ub-reading-size__option:has(input:checked) {
    background: var(--ub-accent-100);
    color: var(--ub-accent-700);
}

.ub-reading-size__option input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.ub-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}