/*
 * RollWithIt — Responsive Site Foundation
 * MOBILE-RWD-A1
 *
 * Scope: site shell and ordinary pages only.
 * PF2e and SWADE character sheets are explicitly outside this owner.
 *
 * Desktop visual owners remain in their page/component modules.
 * This file owns viewport adaptation, touch geometry and mobile
 * form normalization for non-sheet pages.
 */

/* ---------- viewport contract ---------- */

html {
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body {
    max-width: 100%;
}

:where(
    body[data-ui-page="/dashboard"],
    body[data-ui-page="/pf2e"],
    body[data-ui-page="/swade"],
    body[data-ui-page="/profile"],
    body[data-ui-page="/login"],
    body[data-ui-page="/register"],
    body[data-ui-page="/forgot-password"],
    body[data-ui-page="/reset-password"],
    body[data-ui-page="/reference"],
    body[data-ui-page="/about"],
    body[data-ui-page="/legal"],
    body[data-ui-page="/privacy"],
    body[data-ui-page="/characters/new"],
    body[data-ui-page$="/edit"],
    body[data-ui-page$="/abilities"],
    body[data-ui-page="/swade/new"]
) {
    min-width: 0;
    overflow-x: clip;
}

:where(
    body[data-ui-page="/dashboard"],
    body[data-ui-page="/pf2e"],
    body[data-ui-page="/swade"],
    body[data-ui-page="/profile"],
    body[data-ui-page="/login"],
    body[data-ui-page="/register"],
    body[data-ui-page="/forgot-password"],
    body[data-ui-page="/reset-password"],
    body[data-ui-page="/reference"],
    body[data-ui-page="/about"],
    body[data-ui-page="/legal"],
    body[data-ui-page="/privacy"],
    body[data-ui-page="/characters/new"],
    body[data-ui-page$="/edit"],
    body[data-ui-page$="/abilities"],
    body[data-ui-page="/swade/new"]
) :where(img, svg, video, canvas) {
    max-width: 100%;
}

:where(
    body[data-ui-page="/dashboard"],
    body[data-ui-page="/pf2e"],
    body[data-ui-page="/swade"],
    body[data-ui-page="/profile"],
    body[data-ui-page="/login"],
    body[data-ui-page="/register"],
    body[data-ui-page="/forgot-password"],
    body[data-ui-page="/reset-password"],
    body[data-ui-page="/reference"],
    body[data-ui-page="/about"],
    body[data-ui-page="/legal"],
    body[data-ui-page="/privacy"],
    body[data-ui-page="/characters/new"],
    body[data-ui-page$="/edit"],
    body[data-ui-page$="/abilities"],
    body[data-ui-page="/swade/new"]
) :where(input, select, textarea, button) {
    max-width: 100%;
    min-width: 0;
}

/* ---------- intermediate widths: prevent "tablet break" ---------- */

@media (max-width: 1100px) {
    :where(
        body[data-ui-page="/profile"] .profile-shell,
        body[data-ui-page="/reference"] .reference-page-shell,
        body[data-ui-page="/about"] .about-project-page,
        body[data-ui-page="/legal"] .legal-shell,
        body[data-ui-page="/privacy"] .legal-shell
    ) {
        width: min(100% - 32px, 1120px);
    }

    :where(
        body[data-ui-page="/characters/new"] .character-create-layout,
        body[data-ui-page="/swade/new"] .character-create-layout
    ) {
        width: min(100% - 32px, 980px) !important;
        max-width: 980px !important;
        margin-inline: auto !important;
    }
}

/* ---------- phone/tablet shell ---------- */

@media (max-width: 760px) {
    :where(
        body[data-ui-page="/profile"],
        body[data-ui-page="/characters/new"],
        body[data-ui-page$="/edit"],
        body[data-ui-page$="/abilities"],
        body[data-ui-page="/swade/new"],
        body[data-ui-page="/reference"]
    ) .topbar {
        min-height: 64px !important;
        height: auto !important;
        padding:
            max(8px, env(safe-area-inset-top))
            12px
            8px !important;
        gap: 10px !important;
    }

    :where(
        body[data-ui-page="/profile"],
        body[data-ui-page="/characters/new"],
        body[data-ui-page$="/edit"],
        body[data-ui-page$="/abilities"],
        body[data-ui-page="/swade/new"],
        body[data-ui-page="/reference"]
    ) .topbar-left {
        min-width: 0;
        gap: 8px !important;
    }

    :where(
        body[data-ui-page="/profile"],
        body[data-ui-page="/characters/new"],
        body[data-ui-page$="/edit"],
        body[data-ui-page$="/abilities"],
        body[data-ui-page="/swade/new"],
        body[data-ui-page="/reference"]
    ) .mini-brand {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    :where(
        body[data-ui-page="/profile"],
        body[data-ui-page="/characters/new"],
        body[data-ui-page$="/edit"],
        body[data-ui-page$="/abilities"],
        body[data-ui-page="/swade/new"],
        body[data-ui-page="/reference"]
    ) :where(.back-button, .back-button-large) {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    /* Account menu is a touch control, not a desktop icon shrunk down. */
    .account-menu-toggle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .account-menu-panel {
        width: min(280px, calc(100vw - 24px)) !important;
        max-height: min(70dvh, 560px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Shared footer becomes a clean stacked mobile footer. */
    .site-footer {
        width: 100% !important;
        margin-top: 28px !important;
        padding:
            0
            14px
            max(16px, env(safe-area-inset-bottom)) !important;
    }

    .site-footer-inner {
        grid-template-columns: 1fr !important;
        justify-items: center;
        gap: 12px !important;
        text-align: center;
    }

    .site-footer-brand,
    .site-footer-meta {
        align-items: center !important;
        white-space: normal !important;
    }

    .site-footer-nav {
        gap: 10px 16px !important;
    }

    /* Generic dialog viewport contract for ordinary pages. */
    :where(
        body[data-ui-page="/profile"],
        body[data-ui-page="/characters/new"],
        body[data-ui-page$="/edit"],
        body[data-ui-page$="/abilities"],
        body[data-ui-page="/swade/new"],
        body[data-ui-page="/reference"]
    ) :where(
        .modal-card,
        .dialog-card,
        [role="dialog"]
    ) {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
    }
}

/* ---------- auth ---------- */

@media (max-width: 760px) {
    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-shell {
        width: 100% !important;
        min-height: 100dvh !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .brand-panel {
        min-height: 0 !important;
        padding:
            max(54px, env(safe-area-inset-top))
            22px
            24px !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .brand-panel h1 {
        font-size: clamp(2.25rem, 11vw, 3.6rem) !important;
        line-height: 1 !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-panel {
        min-height: 0 !important;
        padding:
            22px
            14px
            max(28px, env(safe-area-inset-bottom)) !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card {
        width: min(100%, 520px) !important;
        margin-inline: auto;
        padding: 22px 18px !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) :where(input, select, textarea, button) {
        min-height: 46px;
        font-size: 16px;
    }
}

/* ---------- system selection ---------- */

@media (max-width: 760px) {
    body[data-ui-page="/dashboard"] .system-hub {
        width: min(100% - 20px, 1435px) !important;
        padding:
            max(64px, env(safe-area-inset-top))
            0
            34px !important;
    }

    body[data-ui-page="/dashboard"] .system-hub-intro h1 {
        font-size: clamp(2rem, 10vw, 3rem) !important;
        line-height: 1.03 !important;
    }

    body[data-ui-page="/dashboard"] .system-intro-break,
    body[data-ui-page="/dashboard"] .system-note-break {
        display: none;
    }

    body[data-ui-page="/dashboard"] .system-grid {
        grid-template-columns: 1fr !important;
    }

    body[data-ui-page="/dashboard"] .system-card-dual {
        width: 100%;
        min-width: 0;
    }

    body[data-ui-page="/dashboard"] .system-card-dual-description {
        width: 100% !important;
        max-width: 100% !important;
    }

    body[data-ui-page="/dashboard"] .system-card-dual-description br {
        display: none;
    }

    body[data-ui-page="/dashboard"] .system-hub-note {
        width: 100%;
    }
}

/* ---------- PF2e / SWADE dashboards ---------- */

@media (max-width: 760px) {
    :where(
        body[data-ui-page="/pf2e"],
        body[data-ui-page="/swade"]
    ) .dashboard {
        width: min(100% - 20px, 1100px) !important;
        padding:
            max(28px, env(safe-area-inset-top))
            0
            max(36px, env(safe-area-inset-bottom)) !important;
    }

    :where(
        body[data-ui-page="/pf2e"],
        body[data-ui-page="/swade"]
    ) .dashboard-copy h1 {
        font-size: clamp(2.45rem, 12vw, 4rem) !important;
        overflow-wrap: anywhere;
    }

    :where(
        body[data-ui-page="/pf2e"],
        body[data-ui-page="/swade"]
    ) .dashboard-copy .lead {
        font-size: 1rem !important;
        line-height: 1.55 !important;
    }

    :where(
        body[data-ui-page="/pf2e"],
        body[data-ui-page="/swade"]
    ) .character-list {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    :where(
        body[data-ui-page="/pf2e"],
        body[data-ui-page="/swade"]
    ) :where(.character-tile, .character-create-tile) {
        width: 100% !important;
        max-width: none !important;
    }

    .character-limit-counter {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---------- profile ---------- */

@media (max-width: 760px) {
    body[data-ui-page="/profile"] .profile-shell {
        width: min(100% - 20px, 700px) !important;
        padding: 28px 0 42px !important;
    }

    body[data-ui-page="/profile"] .profile-grid {
        grid-template-columns: 1fr !important;
    }

    body[data-ui-page="/profile"] .profile-card {
        min-width: 0;
        padding: 18px !important;
    }

    body[data-ui-page="/profile"] .profile-form {
        grid-template-columns: 1fr !important;
    }

    body[data-ui-page="/profile"] :where(
        input,
        select,
        textarea,
        button,
        .button-link
    ) {
        min-height: 46px;
    }
}

/* ---------- PF2e creation / management ---------- */

@media (max-width: 760px) {
    :where(
        body[data-ui-page="/characters/new"],
        body[data-ui-page$="/edit"]
    ) .dashboard {
        width: min(100% - 20px, 760px) !important;
        padding: 28px 0 44px !important;
    }

    body[data-ui-page="/characters/new"] .character-create-layout {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    body[data-ui-page="/characters/new"] .character-create-main {
        width: 100% !important;
        max-width: none !important;
    }

    :where(
        body[data-ui-page="/characters/new"],
        body[data-ui-page$="/edit"]
    ) .form-grid.two {
        grid-template-columns: 1fr !important;
    }

    :where(
        body[data-ui-page="/characters/new"],
        body[data-ui-page$="/edit"]
    ) .sheet-form {
        min-width: 0 !important;
    }

    :where(
        body[data-ui-page="/characters/new"],
        body[data-ui-page$="/edit"]
    ) .sheet-form :where(
        input,
        select,
        textarea
    ) {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        border: 1px solid rgba(213, 161, 80, .32) !important;
        border-radius: 9px !important;
        background: #0b1b2a !important;
        color: #eef1f4 !important;
        font-size: 16px !important;
        box-shadow: none !important;
    }

    :where(
        body[data-ui-page="/characters/new"],
        body[data-ui-page$="/edit"]
    ) .sheet-form textarea {
        min-height: 104px !important;
        resize: vertical;
    }

    :where(
        body[data-ui-page="/characters/new"],
        body[data-ui-page$="/edit"]
    ) .sheet-form :where(
        button,
        .button-link
    ) {
        min-height: 46px !important;
    }

    body[data-ui-page="/characters/new"] .creation-reference {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 22px 0 0 !important;
        transform: none !important;
    }

    body[data-ui-page="/characters/new"] .creation-reference-collapse,
    body[data-ui-page="/characters/new"] .creation-reference-reopen {
        display: none !important;
    }

    body[data-ui-page="/characters/new"] .creation-reference-shell {
        max-height: min(68dvh, 620px);
        overflow: hidden;
    }

    body[data-ui-page="/characters/new"] .creation-reference-results {
        max-height: min(38dvh, 360px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ---------- PF2e ability editor ---------- */

@media (max-width: 760px) {
    body[data-ui-page$="/abilities"] .boost-editor-shell {
        width: min(100% - 16px, 760px) !important;
        margin-inline: auto !important;
        padding:
            18px
            0
            max(30px, env(safe-area-inset-bottom)) !important;
    }

    body[data-ui-page$="/abilities"] .boost-layout {
        grid-template-columns: 1fr !important;
    }

    body[data-ui-page$="/abilities"] .boost-sidebar,
    body[data-ui-page$="/abilities"] .boost-board {
        min-width: 0 !important;
        width: 100% !important;
    }

    body[data-ui-page$="/abilities"] .boost-table {
        min-width: 0 !important;
        width: 100% !important;
    }

    body[data-ui-page$="/abilities"] :where(input, select, button) {
        min-height: 44px;
    }
}

/* ---------- SWADE creation ---------- */

@media (max-width: 760px) {
    body[data-ui-page="/swade/new"] .swade-create-page {
        width: min(100% - 20px, 780px) !important;
        max-width: 780px !important;
        margin-inline: auto !important;
        padding:
            26px
            0
            max(40px, env(safe-area-inset-bottom)) !important;
    }

    body[data-ui-page="/swade/new"] .character-create-layout {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    body[data-ui-page="/swade/new"] .character-create-main,
    body[data-ui-page="/swade/new"] .swade-create-card {
        width: 100% !important;
        max-width: none !important;
    }

    body[data-ui-page="/swade/new"] .form-grid.two,
    body[data-ui-page="/swade/new"] .swade-create-species-fields {
        grid-template-columns: 1fr !important;
    }

    body[data-ui-page="/swade/new"] .swade-create-form :where(
        input,
        select,
        textarea
    ) {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        border: 1px solid rgba(213, 161, 80, .32) !important;
        border-radius: 9px !important;
        background: #0b1b2a !important;
        color: #eef1f4 !important;
        font-size: 16px !important;
        box-shadow: none !important;
    }

    body[data-ui-page="/swade/new"] .swade-create-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body[data-ui-page="/swade/new"] .swade-create-actions :where(
        button,
        .button-link
    ) {
        width: 100% !important;
        min-height: 48px !important;
    }

    body[data-ui-page="/swade/new"] .creation-reference {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 22px 0 0 !important;
        transform: none !important;
    }

    body[data-ui-page="/swade/new"] .creation-reference-collapse,
    body[data-ui-page="/swade/new"] .creation-reference-reopen {
        display: none !important;
    }

    body[data-ui-page="/swade/new"] .creation-reference-results {
        max-height: min(38dvh, 360px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ---------- reference ---------- */

@media (max-width: 760px) {
    body[data-ui-page="/reference"] .reference-page-shell {
        width: min(100% - 16px, 760px) !important;
        padding: 24px 0 38px !important;
    }

    body[data-ui-page="/reference"] .reference-page-hero h1 {
        font-size: clamp(2.4rem, 12vw, 4rem) !important;
    }

    body[data-ui-page="/reference"] .reference-system-tabs {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    body[data-ui-page="/reference"] .reference-page-toolbar {
        min-width: 0;
    }

    body[data-ui-page="/reference"] .reference-page-search input {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 16px;
    }

    body[data-ui-page="/reference"] .reference-page-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        padding-bottom: 4px;
    }

    body[data-ui-page="/reference"] .reference-page-tabs button {
        flex: 0 0 auto;
        min-height: 42px;
    }

    body[data-ui-page="/reference"] .reference-article-modal-card {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 16px) !important;
        border-radius: 14px !important;
    }
}

/* ---------- legal/about ---------- */

@media (max-width: 760px) {
    body[data-ui-page="/about"] .about-project-page,
    :where(
        body[data-ui-page="/legal"],
        body[data-ui-page="/privacy"]
    ) .legal-shell {
        width: min(100% - 18px, 760px) !important;
    }

    body[data-ui-page="/about"] .about-project-grid {
        grid-template-columns: 1fr !important;
    }

    :where(
        body[data-ui-page="/legal"],
        body[data-ui-page="/privacy"]
    ) .legal-source-row,
    :where(
        body[data-ui-page="/legal"],
        body[data-ui-page="/privacy"]
    ) .legal-contact-grid,
    :where(
        body[data-ui-page="/legal"],
        body[data-ui-page="/privacy"]
    ) .legal-stats {
        grid-template-columns: 1fr !important;
    }

    :where(
        body[data-ui-page="/legal"],
        body[data-ui-page="/privacy"]
    ) .legal-card {
        min-width: 0;
        padding: 17px !important;
    }

    :where(
        body[data-ui-page="/legal"],
        body[data-ui-page="/privacy"]
    ) :where(pre, code) {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

/* ---------- narrow phones ---------- */

@media (max-width: 430px) {
    :where(
        body[data-ui-page="/pf2e"],
        body[data-ui-page="/swade"]
    ) .dashboard,
    body[data-ui-page="/profile"] .profile-shell,
    body[data-ui-page="/characters/new"] .dashboard,
    body[data-ui-page$="/edit"] .dashboard,
    body[data-ui-page="/swade/new"] .swade-create-page {
        width: min(100% - 14px, 760px) !important;
    }

    .character-limit-counter {
        padding: 12px !important;
    }

    .character-limit-counter-head {
        align-items: center;
    }

    .character-limit-counter-value strong {
        font-size: 1.5rem !important;
    }
}

/* iOS form zoom / touch comfort */
@media (pointer: coarse) and (max-width: 900px) {
    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"],
        body[data-ui-page="/profile"],
        body[data-ui-page="/characters/new"],
        body[data-ui-page$="/edit"],
        body[data-ui-page$="/abilities"],
        body[data-ui-page="/swade/new"]
    ) :where(input, select, textarea) {
        font-size: 16px !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"],
        body[data-ui-page="/profile"],
        body[data-ui-page="/characters/new"],
        body[data-ui-page$="/edit"],
        body[data-ui-page$="/abilities"],
        body[data-ui-page="/swade/new"]
    ) :where(button, .button-link, a[role="button"]) {
        min-height: 44px;
    }
}

/* =========================================================
   MOBILE-RWD-A6 — authentication family
   Login / Register / Forgot / Reset.
   Mobile app-like composition while desktop remains unchanged.
   ========================================================= */
@media (max-width: 760px) {
    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) {
        min-height: 100dvh;
        background:
            radial-gradient(circle at 50% -10%, rgba(74, 125, 177, .13), transparent 22rem),
            #08131f !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-shell {
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .brand-panel {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        padding:
            max(24px, env(safe-area-inset-top))
            18px
            15px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(214, 157, 76, .22) !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        background:
            linear-gradient(180deg, rgba(30,63,93,.24), rgba(9,22,34,.04)),
            transparent !important;
    }

    body[data-ui-page="/register"] .brand-panel {
        padding-top: max(68px, env(safe-area-inset-top)) !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .brand-system-marks {
        margin: 0 0 9px !important;
        gap: 12px !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .brand-mark {
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        font-size: .86rem !important;
        border-radius: 8px;
        transform: none !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"]
    ) .brand-system-marks .brand-mark {
        width: 36px !important;
        height: 36px !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .brand-panel .eyebrow {
        margin: 0 0 3px !important;
        font-size: .54rem !important;
        line-height: 1.25 !important;
        letter-spacing: .13em !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .brand-panel h1 {
        max-width: 24rem !important;
        margin: 0 0 5px !important;
        font-size: clamp(1.7rem, 7.4vw, 2.15rem) !important;
        line-height: 1.02 !important;
        text-wrap: balance;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .brand-panel h1 br {
        display: none;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .brand-panel .lead {
        max-width: 31rem !important;
        margin: 0 !important;
        font-size: .72rem !important;
        line-height: 1.38 !important;
        color: #aebdca !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .brand-panel :where(.rune-line, .muted) {
        display: none !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-panel {
        flex: 1 0 auto !important;
        min-height: 0 !important;
        padding:
            13px
            12px
            max(22px, env(safe-area-inset-bottom)) !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        background: transparent !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card {
        width: min(100%, 520px) !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border: 1px solid rgba(214, 157, 76, .29);
        border-radius: 12px;
        background:
            linear-gradient(180deg, rgba(255,255,255,.016), transparent 35%),
            #0b1c2a;
        box-shadow: 0 12px 28px rgba(0,0,0,.18);
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card > .eyebrow {
        margin: 0 0 2px !important;
        font-size: .58rem !important;
        letter-spacing: .13em !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card h2 {
        margin: 0 0 3px !important;
        font-size: 1.5rem !important;
        line-height: 1.05 !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card > .muted {
        margin: 0 !important;
        font-size: .68rem !important;
        line-height: 1.38 !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card form {
        margin-top: 12px !important;
        gap: 9px !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card label {
        gap: 5px !important;
        font-size: .68rem !important;
        line-height: 1.25 !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card input {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 0 11px !important;
        border: 1px solid rgba(214, 157, 76, .38) !important;
        border-radius: 8px !important;
        background: #0a1926 !important;
        color: #eef2f5 !important;
        -webkit-text-fill-color: #eef2f5 !important;
        caret-color: #e1a450 !important;
        font-size: 16px !important;
        box-shadow: none !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card input::placeholder {
        color: #708191 !important;
        -webkit-text-fill-color: #708191 !important;
        opacity: 1 !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card input:focus {
        border-color: rgba(232,173,86,.82) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(226,160,77,.10) !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card input:-webkit-autofill,
    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card input:-webkit-autofill:hover,
    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card input:-webkit-autofill:focus {
        -webkit-text-fill-color: #eef2f5 !important;
        caret-color: #e1a450 !important;
        -webkit-box-shadow: 0 0 0 1000px #0a1926 inset !important;
        border-color: rgba(214,157,76,.38) !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card .primary {
        width: 100% !important;
        min-height: 44px !important;
        padding: 0 12px !important;
        border-radius: 8px !important;
        font-size: .80rem !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card :where(.alert, .success-alert) {
        margin-top: 9px !important;
        padding: 9px 10px !important;
        border-radius: 8px !important;
        font-size: .68rem !important;
        line-height: 1.35 !important;
    }

    body[data-ui-page="/login"] .forgot-link {
        margin: 7px 0 0 !important;
        font-size: .68rem !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .switch {
        margin: 10px 0 0 !important;
        font-size: .70rem !important;
    }

    body[data-ui-page="/register"] .auth-back.back-button-large {
        top: max(10px, env(safe-area-inset-top)) !important;
        left: 10px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex-basis: 40px !important;
        border-radius: 9px !important;
    }

    body[data-ui-page="/register"] .auth-back.back-button-large .back-arrow {
        width: 19px !important;
    }
}

@media (max-width: 380px) {
    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .brand-panel {
        padding-inline: 14px !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-panel {
        padding-inline: 8px !important;
    }

    :where(
        body[data-ui-page="/login"],
        body[data-ui-page="/register"],
        body[data-ui-page="/forgot-password"],
        body[data-ui-page="/reset-password"]
    ) .auth-card {
        padding: 12px !important;
    }
}

/* PF2E_TABLET_R4_FIX8_ABILITIES_PORTRAIT_XLOCK_START
   Tablet portrait only.
   Fixes lateral viewport drift on the PF2e ability editor without changing
   the working portrait reflow introduced by FIX7. */
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
    body[data-ui-page$="/abilities"] {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: clip !important;
        overscroll-behavior-x: none !important;
    }

    body[data-ui-page$="/abilities"] .abilities-editor-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: clip !important;
        overscroll-behavior-x: none !important;
        touch-action: pan-y pinch-zoom;
    }

    body[data-ui-page$="/abilities"] .boost-editor-shell {
        width: min(calc(100vw - 24px), 100%) !important;
        max-width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        box-sizing: border-box !important;
        overflow-x: clip !important;
    }

    body[data-ui-page$="/abilities"] :where(
        .boost-layout,
        .boost-board,
        .boost-table,
        .boost-row,
        .boost-row-head,
        .boost-source-summary,
        .boost-sidebar,
        .boost-choice,
        .boost-stage-cell,
        .boost-ability-head,
        .boost-final,
        .manual-panel,
        .ability-edit-card
    ) {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body[data-ui-page$="/abilities"] :where(
        .boost-layout,
        .boost-board,
        .boost-table,
        .boost-row,
        .boost-row-head
    ) {
        width: 100% !important;
    }
}
/* PF2E_TABLET_R4_FIX8_ABILITIES_PORTRAIT_XLOCK_END */

/* === PF2E LAB R198D-FIX2 — PHONE /ABILITIES CONTAINMENT === */
/* -------------------------------------------------------------------------
   4. PF2e /abilities route.
      It is not rendered by character.html, so the R198A/B/C character-sheet
      chain never owned it. Keep the page itself inside the viewport and make
      the six-ability matrix scroll INSIDE its board instead of pushing the
      whole document sideways.
   ------------------------------------------------------------------------- */
@media (max-width: 430px) {
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-editor-shell,
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-editor-header,
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-layout,
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-sidebar,
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-board,
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .manual-panel,
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-footer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-editor-shell {
    overflow-x: hidden !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-sidebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] :is(
    .boost-source-summary,
    .boost-input-method,
    .manual-panel
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-board {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-table {
    width: max-content !important;
    min-width: 680px !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] :is(
    .boost-row,
    .boost-row-head,
    .boost-stage-cell,
    .boost-ability-head,
    .boost-button-cell,
    .boost-choice,
    .boost-final
  ) {
    box-sizing: border-box !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-footer-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-footer-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .ability-number-stepper {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
/* === /PF2E LAB R198D-FIX2 — PHONE /ABILITIES CONTAINMENT === */

/* === PF2E LAB R198F — /ABILITIES PHONE NATIVE LAYOUT ===
   Phone-only adaptation of the PF2e ability boost editor.
   Exact route owner: body[data-ui-page$="/abilities"].
   Does not modify gameplay/JS/template.
*/
@media (max-width: 430px) {
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] {
    overflow-x: hidden !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-editor-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding:
      14px
      max(10px, env(safe-area-inset-right))
      calc(26px + env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Compact page heading: the current desktop title is too large on phones. */
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-editor-header {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-editor-header .eyebrow {
    margin: 0 0 5px !important;
    font-size: .68rem !important;
    line-height: 1.15 !important;
    letter-spacing: .11em !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-editor-header h1 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(1.8rem, 8.6vw, 2.18rem) !important;
    line-height: .98 !important;
    letter-spacing: -.025em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-editor-header p:not(.eyebrow) {
    margin: 10px 0 0 !important;
    font-size: .96rem !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] #boost-form,
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-layout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  /* Source summary / method block. */
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-sidebar > .eyebrow {
    margin: 0 0 8px !important;
    font-size: .68rem !important;
    line-height: 1.15 !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-source-summary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 9px 0 !important;
    box-sizing: border-box !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-source-summary + .boost-source-summary {
    border-top: 1px solid rgba(205, 151, 72, .14) !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-source-summary :is(span, small, strong) {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-source-summary span {
    font-size: .67rem !important;
    line-height: 1.2 !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-source-summary strong {
    margin-top: 2px !important;
    font-size: 1.08rem !important;
    line-height: 1.08 !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-source-summary small {
    margin-top: 4px !important;
    font-size: .72rem !important;
    line-height: 1.3 !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-input-method {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-input-method p {
    margin: 0 0 7px !important;
    font-size: .76rem !important;
    line-height: 1.35 !important;
  }

  /* --------------------------------------------------------------------
     Boost matrix -> true phone card grid.
     Header row is redundant on phone because each cell receives its own
     short ability label below.
     -------------------------------------------------------------------- */
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-board {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-table {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-row-head {
    display: none !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-row:not(.boost-row-head) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 9px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-stage-cell {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 2px !important;
    padding: 0 0 7px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(205, 151, 72, .14) !important;
    box-sizing: border-box !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-stage-cell :is(
    .boost-stage-type,
    strong,
    small
  ) {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-stage-type {
    font-size: .63rem !important;
    line-height: 1.15 !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-stage-cell strong {
    font-size: .88rem !important;
    line-height: 1.15 !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-stage-cell small {
    font-size: .65rem !important;
    line-height: 1.25 !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] :is(
    .boost-button-cell,
    .boost-final
  ) {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    align-content: start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 7px 5px !important;
    border: 1px solid rgba(205, 151, 72, .15) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] :is(
    .boost-button-cell,
    .boost-final
  )::before {
    display: block !important;
    color: rgba(228, 213, 194, .7) !important;
    font-family: system-ui, sans-serif !important;
    font-size: .58rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .07em !important;
    text-align: center !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] :is(.boost-button-cell,.boost-final):nth-child(2)::before { content: "СИЛ"; }
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] :is(.boost-button-cell,.boost-final):nth-child(3)::before { content: "ЛВК"; }
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] :is(.boost-button-cell,.boost-final):nth-child(4)::before { content: "ВЫН"; }
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] :is(.boost-button-cell,.boost-final):nth-child(5)::before { content: "ИНТ"; }
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] :is(.boost-button-cell,.boost-final):nth-child(6)::before { content: "МДР"; }
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] :is(.boost-button-cell,.boost-final):nth-child(7)::before { content: "ХАР"; }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-choice {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 38px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 5px 4px !important;
    font-size: .61rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-final {
    place-items: center !important;
    text-align: center !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-final :is(
    strong,
    span,
    small
  ) {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Manual mode: compact, fully-contained controls. */
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .manual-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .manual-panel-head {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .manual-panel h2 {
    margin: 0 !important;
    font-size: 1.02rem !important;
    line-height: 1.15 !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .ability-number-stepper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .ability-number-stepper input[type="number"] {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }

  /* Footer/action area. */
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-rule-note {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: .7rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-footer-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-footer-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 350px) {
  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-editor-header h1 {
    font-size: 1.7rem !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] .boost-row:not(.boost-row-head) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-ui-system="pf2e"][data-ui-page$="/abilities"] :is(
    .boost-button-cell,
    .boost-final
  ) {
    min-height: 66px !important;
  }
}
/* === /PF2E LAB R198F — /ABILITIES PHONE NATIVE LAYOUT === */