/* =========================================================================
   urhema_shell.css — reset + header + footer + verse popover

   Scope discipline: every selector here is prefixed .ub- and belongs to the
   shell. Page styles go in their own files. Nothing in here sets margins on
   generic elements like .section, which is how layout stylesheets end up
   fighting each other three phases from now.
   ========================================================================= */

/* ---- Reset ---------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--ub-paper);
    color: var(--ub-ink);
    font-family: var(--ub-font-body);
    font-size: var(--ub-text-base);
    line-height: var(--ub-leading-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

a {
    color: var(--ub-accent-500);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

    a:hover {
        color: var(--ub-accent-700);
    }

/* ---- Accessibility baseline ------------------------------------------ */

:focus-visible {
    outline: none;
    box-shadow: var(--ub-focus-ring);
    border-radius: var(--ub-radius-sm);
}

.ub-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ub-skip-link {
    position: absolute;
    left: var(--ub-space-4);
    top: -4rem;
    z-index: var(--ub-z-dialog);
    padding: var(--ub-space-2) var(--ub-space-4);
    background: var(--ub-accent-500);
    color: var(--ub-accent-contrast);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    text-decoration: none;
    border-radius: var(--ub-radius-sm);
    transition: top var(--ub-duration) var(--ub-ease);
}

    .ub-skip-link:focus {
        top: var(--ub-space-3);
        color: var(--ub-accent-contrast);
    }

@media (prefers-reduced-motion: reduce) {
    /* 13.8 Sensory craft: scoped with :not([data-motion="full"]) so an explicit
       Full-motion override (urhema_motion.css) can actually escape the OS signal.
       Before this fix, this block applied unconditionally and silently defeated
       Full regardless of what urhema_motion.css set, because with no data-motion
       exclusion here, this was the only rule left targeting the property once
       Full excluded urhema_motion.css's own (higher-specificity) rule from
       matching at all. Kept as a real fix here, not a duplicate in the new file,
       since this block predates 13.8 and duplicating it would just recreate the
       same conflict under different specificity next time either file changes. */
    html:not([data-motion="full"]) {
        scroll-behavior: auto;
    }

    :root:not([data-motion="full"]) *,
    :root:not([data-motion="full"]) *::before,
    :root:not([data-motion="full"]) *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---- Layout primitives ----------------------------------------------- */

.ub-shell-width {
    width: 100%;
    max-width: var(--ub-width-shell);
    margin-inline: auto;
    padding-inline: var(--ub-gutter);
}

.ub-main {
    flex: 1 0 auto;
    outline: none;
}

.ub-eyebrow {
    margin: 0 0 var(--ub-space-3);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 600;
    letter-spacing: var(--ub-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ub-ink-muted);
}

/* ---- Buttons ---------------------------------------------------------- */

.ub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ub-space-2);
    padding: 0.5rem 0.95rem;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    font-weight: 500;
    line-height: 1;
    border-radius: var(--ub-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--ub-duration-fast) var(--ub-ease), border-color var(--ub-duration-fast) var(--ub-ease), color var(--ub-duration-fast) var(--ub-ease);
}

.ub-button--solid {
    background: var(--ub-accent-500);
    color: var(--ub-accent-contrast);
}

    .ub-button--solid:hover {
        background: var(--ub-accent-700);
        color: var(--ub-accent-contrast);
    }

.ub-button--quiet {
    background: transparent;
    color: var(--ub-ink-soft);
    border-color: var(--ub-line);
}

    .ub-button--quiet:hover {
        color: var(--ub-ink);
        border-color: var(--ub-line-strong);
    }

.ub-link-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--ub-accent-500);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

.ub-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ub-radius-sm);
    color: var(--ub-ink-soft);
    cursor: pointer;
}

    .ub-icon-button:hover {
        color: var(--ub-ink);
        border-color: var(--ub-line);
    }

    .ub-icon-button svg {
        width: 1.25rem;
        height: 1.25rem;
    }

/* ---- Header ----------------------------------------------------------- */

.ub-header {
    position: sticky;
    top: 0;
    z-index: var(--ub-z-header);
    background: var(--ub-paper);
    border-bottom: var(--ub-rule);
}

    /* Rule darkens once the page scrolls under it — set by urhema-shell.js. */
    .ub-header[data-scrolled="true"] {
        border-bottom-color: var(--ub-line-strong);
    }

.ub-header__inner {
    display: flex;
    align-items: center;
    gap: var(--ub-space-5);
    min-height: var(--ub-header-height);
}

.ub-wordmark {
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-lg);
    font-weight: 700;
    letter-spacing: var(--ub-tracking-tight);
    color: var(--ub-ink);
    text-decoration: none;
    flex: 0 0 auto;
}

    .ub-wordmark:hover {
        color: var(--ub-ink);
    }

.ub-wordmark__u {
    color: var(--ub-accent-500);
}

.ub-header__actions {
    display: flex;
    align-items: center;
    gap: var(--ub-space-2);
    margin-left: auto;
    flex: 0 0 auto;
}

.ub-theme-form {
    display: inline-flex;
    margin: 0;
}

/* Only the icon for the theme you'd switch TO is shown.
   Cycle: light → dark → sepia → night → light.
   Base rule hides all three, so an unexpected/unset data-theme shows a blank
   button rather than every icon at once (the old binary rules silently showed
   both sun and moon in sepia — this is the fix for that). */
.ub-icon--sun,
.ub-icon--moon,
.ub-icon--book,
.ub-icon--night {
    display: none;
}

[data-theme="light"] .ub-icon--moon {
    display: block;
}
/* next: dark  */
[data-theme="dark"] .ub-icon--book {
    display: block;
}
/* next: sepia */
[data-theme="sepia"] .ub-icon--night {
    display: block;
}
/* next: night */
[data-theme="night"] .ub-icon--sun {
    display: block;
}
/* next: light */

/* ---- Primary nav ------------------------------------------------------ */

.ub-nav__list {
    display: flex;
    align-items: center;
    gap: var(--ub-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ub-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ub-space-2);
    padding: var(--ub-space-2) var(--ub-space-3);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    font-weight: 500;
    color: var(--ub-ink-soft);
    text-decoration: none;
    border-radius: var(--ub-radius-sm);
}

    .ub-nav__link:hover {
        color: var(--ub-ink);
        background: var(--ub-paper-sunken);
    }

    /* Active state carries a rule, not a pill — consistent with the grid device.
   Weight and colour change too, so it doesn't rely on the rule alone. */
    .ub-nav__link.is-active {
        color: var(--ub-ink);
        font-weight: 600;
    }

        .ub-nav__link.is-active::after {
            content: "";
            position: absolute;
            left: var(--ub-space-3);
            right: var(--ub-space-3);
            bottom: -0.5rem;
            height: 2px;
            background: var(--ub-accent-500);
        }

.ub-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    background: var(--ub-accent-100);
    color: var(--ub-accent-700);
    font-size: var(--ub-text-xs);
    font-weight: 600;
    border-radius: var(--ub-radius-pill);
}

/* Disclosure wrapper: transparent on desktop, a real menu on mobile. */
.ub-nav-toggle {
    flex: 1 1 auto;
    min-width: 0;
}

.ub-nav-toggle__button {
    list-style: none;
    cursor: pointer;
}

    .ub-nav-toggle__button::-webkit-details-marker {
        display: none;
    }

@media (min-width: 60rem) {
    .ub-nav-toggle__button {
        display: none;
    }

    .ub-nav-toggle > .ub-nav {
        display: block !important;
    }
}

@media (max-width: 59.999rem) {
    .ub-nav-toggle__button {
        display: inline-flex;
        align-items: center;
        gap: var(--ub-space-2);
        padding: var(--ub-space-2) var(--ub-space-3);
        font-family: var(--ub-font-ui);
        font-size: var(--ub-text-sm);
        color: var(--ub-ink-soft);
        border: 1px solid var(--ub-line);
        border-radius: var(--ub-radius-sm);
    }

    .ub-nav-toggle__bars,
    .ub-nav-toggle__bars::before,
    .ub-nav-toggle__bars::after {
        display: block;
        width: 1rem;
        height: 1px;
        background: currentColor;
    }

    .ub-nav-toggle__bars {
        position: relative;
    }

        .ub-nav-toggle__bars::before,
        .ub-nav-toggle__bars::after {
            content: "";
            position: absolute;
            left: 0;
        }

        .ub-nav-toggle__bars::before {
            top: -5px;
        }

        .ub-nav-toggle__bars::after {
            top: 5px;
        }

    .ub-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: var(--ub-header-height);
        background: var(--ub-paper);
        border-bottom: var(--ub-rule-strong);
        box-shadow: var(--ub-shadow-float);
        padding: var(--ub-space-3) var(--ub-gutter) var(--ub-space-5);
    }

    .ub-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .ub-nav__item + .ub-nav__item {
        border-top: var(--ub-rule);
    }

    .ub-nav__link {
        padding: var(--ub-space-4) var(--ub-space-2);
        font-size: var(--ub-text-md);
    }

        .ub-nav__link.is-active::after {
            left: 0;
            right: auto;
            bottom: auto;
            top: 50%;
            width: 2px;
            height: 1.25rem;
            transform: translateY(-50%);
        }
}

/* ---- Account menu ----------------------------------------------------- */

.ub-account {
    position: relative;
}

.ub-account__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--ub-space-2);
    padding: var(--ub-space-1) var(--ub-space-2) var(--ub-space-1) var(--ub-space-1);
    border: 1px solid var(--ub-line);
    border-radius: var(--ub-radius-pill);
    cursor: pointer;
    list-style: none;
}

    .ub-account__trigger::-webkit-details-marker {
        display: none;
    }

    .ub-account__trigger:hover {
        border-color: var(--ub-line-strong);
    }

.ub-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--ub-accent-100);
    color: var(--ub-accent-700);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 600;
    border-radius: var(--ub-radius-pill);
}

.ub-tier {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ub-ink-muted);
}

    .ub-tier[data-tier="premium"] {
        color: var(--ub-accent-700);
    }

    .ub-tier[data-tier="group-seat"] {
        color: var(--ub-accent-500);
    }

@media (max-width: 40rem) {
    .ub-tier {
        display: none;
    }
}

.ub-account__menu {
    position: absolute;
    right: 0;
    top: calc(100% + var(--ub-space-2));
    z-index: var(--ub-z-menu);
    min-width: 15rem;
    background: var(--ub-paper-raised);
    border: var(--ub-rule-strong);
    border-radius: var(--ub-radius-md);
    box-shadow: var(--ub-shadow-float);
    padding: var(--ub-space-2);
}

.ub-account__identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ub-space-3);
    border-bottom: var(--ub-rule);
    margin-bottom: var(--ub-space-2);
}

.ub-account__name {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    font-weight: 600;
}

.ub-account__email {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    color: var(--ub-ink-muted);
}

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

.ub-account__link {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--ub-space-3);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-soft);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--ub-radius-sm);
    cursor: pointer;
}

    .ub-account__link:hover {
        background: var(--ub-paper-sunken);
        color: var(--ub-ink);
    }

    .ub-account__link.is-active {
        color: var(--ub-ink);
        font-weight: 600;
    }

.ub-account__link--accent {
    color: var(--ub-accent-700);
}

.ub-account__link--muted {
    color: var(--ub-ink-muted);
}

.ub-account__signout {
    margin: var(--ub-space-2) 0 0;
    border-top: var(--ub-rule);
    padding-top: var(--ub-space-2);
}

/* ---- Footer ----------------------------------------------------------- */

.ub-footer {
    flex: 0 0 auto;
    margin-top: var(--ub-space-9);
    border-top: var(--ub-rule-strong);
    background: var(--ub-paper);
    padding-block: var(--ub-space-7) var(--ub-space-5);
}

.ub-pulse {
    padding-bottom: var(--ub-space-6);
    border-bottom: var(--ub-rule);
    margin-bottom: var(--ub-space-6);
}

.ub-pulse__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--ub-space-5);
    margin: 0;
}

/* The vertical-rule grid: dividers between cells rather than boxes around them. */
.ub-pulse__stat {
    padding-left: var(--ub-space-4);
    border-left: var(--ub-rule);
}

    .ub-pulse__stat:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .ub-pulse__stat dt {
        font-family: var(--ub-font-ui);
        font-size: var(--ub-text-xs);
        letter-spacing: var(--ub-tracking-eyebrow);
        text-transform: uppercase;
        color: var(--ub-ink-muted);
    }

    .ub-pulse__stat dd {
        margin: var(--ub-space-1) 0 0;
        font-family: var(--ub-font-heading);
        font-size: var(--ub-text-xl);
        font-variant-numeric: tabular-nums;
        line-height: var(--ub-leading-tight);
    }

.ub-footer__body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--ub-space-7);
    align-items: start;
}

.ub-footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--ub-space-5);
}

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

    .ub-footer__list li + li {
        margin-top: var(--ub-space-2);
    }

.ub-footer__link {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-soft);
    text-decoration: none;
}

    .ub-footer__link:hover {
        color: var(--ub-ink);
        text-decoration: underline;
    }

.ub-signup {
    padding: var(--ub-space-5);
    border: var(--ub-rule);
    border-radius: var(--ub-radius-md);
    background: var(--ub-paper-raised);
}

.ub-signup__heading {
    margin: 0 0 var(--ub-space-2);
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-lg);
    line-height: var(--ub-leading-snug);
    letter-spacing: var(--ub-tracking-tight);
}

.ub-signup__blurb {
    margin: 0 0 var(--ub-space-4);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-soft);
}

.ub-signup__form {
    display: flex;
    gap: var(--ub-space-2);
    flex-wrap: wrap;
}

.ub-signup__input {
    flex: 1 1 11rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    background: var(--ub-paper);
    color: var(--ub-ink);
    border: 1px solid var(--ub-line-strong);
    border-radius: var(--ub-radius-sm);
}

    .ub-signup__input::placeholder {
        color: var(--ub-ink-muted);
    }

.ub-footer__base {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ub-space-2) var(--ub-space-5);
    justify-content: space-between;
    align-items: baseline;
    margin-top: var(--ub-space-6);
    padding-top: var(--ub-space-4);
    border-top: var(--ub-rule);
}

.ub-footer__legal,
.ub-footer__licence {
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    color: var(--ub-ink-muted);
}

.ub-footer__licence {
    max-width: 34rem;
}

@media (max-width: 52rem) {
    .ub-footer__body {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Verse links + popover -------------------------------------------- */

.ub-verse-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--ub-accent-500);
    cursor: pointer;
    border-bottom: 1px dotted currentColor;
}

    .ub-verse-link:hover {
        color: var(--ub-accent-700);
        border-bottom-style: solid;
    }

/* ---- Verse popover ----------------------------------------------------
   Fully owned by verse-popover.css, loaded after this file. A pre-modal-
   redesign version of these same rules used to live here (plain
   position:absolute panel, no overlay, no tabs) and was never removed
   when the Phase 2 modal redesign shipped as its own file. Left in place,
   it silently won every property the new file doesn't explicitly
   re-declare (width, background, border, box-shadow, padding on the OUTER
   .ub-verse-popover container) since those old declarations had nothing
   to lose a cascade fight to -- collapsing the new fixed/inset:0 overlay
   down to a ~24rem box pinned to the viewport's top-left corner, and
   shrinking the dimming backdrop to match it. Removed entirely; do not
   re-add popover styling here -- it belongs in verse-popover.css only. */

/* ---- Hatch: empty states and image placeholders ------------------------ */

.ub-hatch {
    background-image: var(--ub-hatch);
    background-color: var(--ub-paper-sunken);
}