/*
 * QuoteVault Responsive Foundation
 * Shared, late-loading overrides for the public site, Account, and Admin.
 * This file intentionally contains only layout/responsiveness and standard-user
 * preview presentation so feature styles remain owned by their existing page sheets.
 */

:root {
    --qv-mobile-gutter: clamp(14px, 4vw, 24px);
    --qv-touch-target: 44px;
    --qv-mobile-topbar: 126px;
}

html {
    max-width: 100%;
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    max-width: 100%;
    min-width: 0;
}

:where(button, a, input, select, textarea, summary) {
    touch-action: manipulation;
}

img,
video,
svg,
canvas {
    max-width: 100%;
}

pre,
code,
.qv-scroll-region,
.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a #090909;
}

/* The old global anywhere-wrap rule created one-character columns when a grid
   became narrow. Normal prose should wrap by words; identifiers opt back in. */
.content :where(p, small, strong, span, a, td, th, label, li),
.site-shell :where(p, small, strong, span, a, td, th, label, li),
.login-shell :where(p, small, strong, span, a, label),
.server-gate :where(p, small, strong, span, a, label) {
    overflow-wrap: break-word;
    word-break: normal;
}

.content :where(code, pre, .qv-identity-uid, [data-user-id], [data-guild-id], .qv-record-id, .qv-legacy-value),
.site-shell :where(code, pre, .archive-quote-id, .share-token) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============================================================
   MEMBER / NON-ADMIN PREVIEW
   ============================================================ */
.qv-preview-menu-form {
    margin: 0;
}

.qv-preview-menu-form .dropdown-item {
    width: 100%;
    border: 0 ;
    background: transparent ;
    text-align: left;
}

.qv-preview-menu-form .qv-preview-exit-link,
.qv-member-preview .qv-preview-exit-link {
    color: #d7b36a ;
}

.qv-preview-locked {
    cursor: not-allowed;
    opacity: .58;
}

.qv-preview-locked .nav-arrow {
    color: #8b6a65;
}

.qv-member-preview-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 20px 0 0;
    padding: 15px 17px;
    border: 1px solid #5f4a25;
    border-left: 3px solid #d3a33f;
    background: linear-gradient(90deg, rgba(211, 163, 63, .11), rgba(15, 14, 10, .92));
    box-shadow: 0 14px 40px rgba(0, 0, 0, .2);
}

.qv-member-preview-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(211, 163, 63, .42);
    background: #17130b;
    color: #d3a33f;
    font-size: 21px;
}

.qv-member-preview-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.qv-member-preview-copy small {
    color: #c39536;
    font: 700 7px/1.2 var(--mono, "IBM Plex Mono", monospace);
    letter-spacing: .14em;
}

.qv-member-preview-copy strong {
    color: #ece8df;
    font: 700 19px/1.05 var(--condensed, "Inter", sans-serif);
    letter-spacing: .025em;
    text-transform: uppercase;
}

.qv-member-preview-copy > span {
    color: #938b7b;
    font: 500 9px/1.55 var(--mono, "IBM Plex Mono", monospace);
}

.qv-member-preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qv-member-preview-actions form {
    margin: 0;
}

.qv-member-preview-actions a,
.qv-member-preview-actions button {
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #51452d;
    background: #0d0d0b;
    color: #cfc7b6;
    font: 700 8px/1 var(--mono, "IBM Plex Mono", monospace);
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.qv-member-preview-actions a:hover,
.qv-member-preview-actions button:hover {
    border-color: #b88c34;
    color: #fff;
}

.qv-access-preview-main {
    padding-top: 42px ;
}

.qv-preview-disclaimer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin-bottom: 26px;
    padding: 22px;
    border: 1px solid #3a3427;
    background: linear-gradient(115deg, rgba(199, 148, 46, .1), #0c0c0b 46%);
}

.qv-preview-disclaimer > i {
    color: #c9942e;
    font-size: 34px;
}

.qv-preview-disclaimer small,
.qv-access-preview-panel-head > span {
    display: block;
    margin-bottom: 7px;
    color: #c9942e;
    font: 700 7px/1 var(--mono, "IBM Plex Mono", monospace);
    letter-spacing: .14em;
}

.qv-preview-disclaimer h2,
.qv-access-preview-panel-head h2 {
    margin: 0 0 8px ;
    color: #eeeae2;
    font: 700 29px/1 var(--condensed, "Inter", sans-serif) ;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.qv-preview-disclaimer h2::before,
.qv-access-preview-panel-head h2::before {
    display: none ;
}

.qv-preview-disclaimer p,
.qv-access-preview-panel-head p,
.qv-access-preview-list p {
    margin: 0;
    color: #85817a;
    font: 500 9px/1.65 var(--mono, "IBM Plex Mono", monospace);
}

.qv-access-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.qv-access-preview-panel {
    min-width: 0;
    border: 1px solid #2b2b2b;
    background: #0b0b0b;
}

.qv-access-preview-panel.is-visible {
    border-top-color: #356f46;
}

.qv-access-preview-panel.is-locked {
    border-top-color: #71362f;
}

.qv-access-preview-panel-head {
    padding: 20px;
    border-bottom: 1px solid #242424;
}

.qv-access-preview-list {
    display: grid;
}

.qv-access-preview-list article {
    display: grid;
    grid-template-columns: minmax(120px, .38fr) minmax(0, 1fr);
    gap: 18px;
    padding: 17px 20px;
    border-bottom: 1px solid #202020;
}

.qv-access-preview-list article:last-child {
    border-bottom: 0;
}

.qv-access-preview-list strong {
    display: block;
    margin-bottom: 5px;
    color: #d7d4cc;
    font: 700 15px/1.1 var(--condensed, "Inter", sans-serif);
    text-transform: uppercase;
}

.qv-access-state {
    align-self: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    width: max-content;
    max-width: 100%;
    padding: 0 9px;
    border: 1px solid #303030;
    background: #0e0e0e;
    color: #92928d;
    font: 700 7px/1 var(--mono, "IBM Plex Mono", monospace);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.qv-access-state.is-visible {
    border-color: #31583b;
    color: #7fbe8d;
}

.qv-access-state.is-locked {
    border-color: #65342f;
    color: #cd7168;
}

/* ============================================================
   TABLET / NARROW DESKTOP
   ============================================================ */
@media (max-width: 1180px) {
    .content {
        padding-right: 28px ;
        padding-left: 28px ;
    }

    .panel-topbar,
    .navbar {
        margin-right: -28px ;
        margin-left: -28px ;
        padding-right: 28px ;
        padding-left: 28px ;
    }

    .qv-dashboard-grid,
    .qv-dashboard-secondary,
    .qv-intelligence-grid,
    .qv-member-grid,
    .qv-author-grid,
    .qv-analytics-grid,
    .qv-system-grid,
    .qv-health-grid,
    .qv-health-grid-balanced,
    .qv-server-detail-grid,
    .qv-settings-grid,
    .settings-grid,
    .qv-port-grid,
    .qv-detail-columns,
    .qv-detail-grid,
    .qv-detail-grid-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }

    .qv-settings-full-row,
    .qv-setting-card-wide,
    .qv-member-panel--wide,
    .qv-detail-panel.qv-detail-context,
    .qv-detail-panel.qv-detail-discovery {
        grid-column: 1 / -1 ;
    }

    .qv-public-settings-grid,
    .qv-appearance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }

    .qv-public-address-card,
    .qv-appearance-preview {
        grid-column: 1 / -1 ;
    }

    .qv-admin-record-meta,
    .qv-admin-quote-meta-row,
    .qv-mod-record-meta,
    .qv-revision-record-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }

    .qv-health-maintenance-grid,
    .qv-health-capability-grid,
    .qv-health-lifecycle-grid,
    .qv-health-diagnostic-grid,
    .qv-health-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }
}

/* ============================================================
   PANEL SHELL — MOBILE
   ============================================================ */
@media (max-width: 900px) {
    html {
        scroll-padding-top: 126px;
    }

    body {
        overflow-x: hidden ;
    }

    body.panel-nav-open {
        overscroll-behavior: contain;
    }

    .sidebar {
        width: min(340px, 88vw) ;
        max-width: 88vw ;
        transform: translateX(-100%) ;
        visibility: hidden;
        pointer-events: none;
    }

    body.panel-nav-open .sidebar {
        transform: translateX(0) ;
        visibility: visible;
        pointer-events: auto;
    }

    .panel-nav-backdrop {
        visibility: hidden;
        pointer-events: none;
    }

    body.panel-nav-open .panel-nav-backdrop {
        visibility: visible;
        pointer-events: auto;
    }

    .sidebar .panel-brand {
        height: 76px ;
        padding: 0 18px ;
    }

    .sidebar .panel-brand-copy,
    .sidebar .sidebar-node,
    .sidebar .sidebar-label,
    .sidebar .nav-copy,
    .sidebar .nav-arrow,
    .sidebar .sidebar-foot {
        display: flex ;
    }

    .sidebar .sidebar-label {
        display: block ;
        padding: 21px 18px 9px ;
    }

    .sidebar .nav {
        padding: 0 10px 8px ;
    }

    .sidebar .nav-link {
        min-height: 54px ;
        grid-template-columns: 34px minmax(0, 1fr) 16px ;
        padding: 7px 10px ;
    }

    .sidebar .nav-copy {
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.15;
    }

    .sidebar .nav-copy small {
        margin-top: 4px;
        color: #5f5f5b;
        font: 500 7px/1.3 var(--mono, "IBM Plex Mono", monospace);
        letter-spacing: .02em;
        text-transform: none;
    }

    .sidebar .sidebar-foot {
        justify-content: space-between;
    }

    .sidebar .sidebar-health {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .sidebar .sidebar-health > span:last-child {
        display: flex;
        flex-direction: column;
    }

    .panel-nav-toggle {
        top: calc(env(safe-area-inset-top, 0px) + 14px) ;
        left: max(14px, env(safe-area-inset-left, 0px)) ;
        width: 42px ;
        height: 42px ;
    }

    .content {
        width: 100% ;
        margin-left: 0 ;
        padding: 0 var(--qv-mobile-gutter) calc(72px + env(safe-area-inset-bottom, 0px)) ;
    }

    .panel-topbar,
    .navbar {
        width: auto ;
        height: auto ;
        min-height: 82px ;
        margin: 0 calc(var(--qv-mobile-gutter) * -1) ;
        padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--qv-mobile-gutter) 12px max(68px, var(--qv-mobile-gutter)) ;
        display: grid ;
        grid-template-columns: minmax(0, 1fr) auto ;
        gap: 10px 12px ;
        align-items: center ;
        backdrop-filter: blur(16px);
    }

    .topbar-context {
        min-width: 0;
    }

    .topbar-title,
    .topbar-heading-line {
        min-width: 0;
    }

    .topbar-heading-line {
        display: block ;
    }

    .topbar-title h4 {
        max-width: 100%;
        overflow: hidden;
        color: #f0efe9;
        font-size: clamp(20px, 4.8vw, 27px) ;
        line-height: 1 ;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-title small {
        display: block ;
        margin-top: 5px;
        overflow: hidden;
        font-size: 6px ;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-actions {
        min-width: 0;
        margin-left: 0 ;
        display: flex ;
        justify-content: flex-end;
        gap: 7px ;
    }

    .server-control {
        min-width: 0;
        flex: 1 1 210px;
    }

    .server-control-meta {
        display: none ;
    }

    .server-selector,
    .admin-scope-value {
        width: 100% ;
        min-width: 0 ;
        max-width: 260px;
        height: 42px ;
        min-height: 42px ;
        padding-right: 28px ;
        font-size: 9px ;
    }

    .account-trigger,
    .dropdown-toggle.account-trigger {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 4px ;
        justify-content: center;
    }

    .account-trigger img {
        width: 32px;
        height: 32px;
    }

    .account-trigger-copy,
    .account-chevron {
        display: none ;
    }

    .account-menu .dropdown-menu {
        position: fixed ;
        top: max(72px, calc(env(safe-area-inset-top, 0px) + 66px)) ;
        right: var(--qv-mobile-gutter) ;
        left: var(--qv-mobile-gutter) ;
        width: auto ;
        max-height: calc(100dvh - 96px);
        overflow-y: auto;
        transform: none ;
    }

    .account-menu .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .qv-app-topbar-tools {
        gap: 5px ;
    }

    .qv-app-topbar-tools > button {
        width: 42px ;
        height: 42px ;
        flex: 0 0 42px;
    }

    .admin-command-search {
        min-width: 0 ;
        flex: 1 1 200px;
    }

    .admin-command-search input {
        width: 100% ;
        min-width: 0 ;
    }

    .admin-command-search kbd,
    .admin-command-search > span {
        display: none ;
    }

    .admin-scope-control {
        display: none ;
    }

    .content #main-section,
    .content > .container-fluid,
    .content > .container,
    .content > main {
        width: 100% ;
        max-width: 100% ;
        padding-top: 32px ;
    }

    .content h2 {
        max-width: 100%;
        font-size: clamp(23px, 6.4vw, 34px) ;
        line-height: 1.02 ;
        letter-spacing: .01em ;
    }

    .content h1,
    .content .qv-page-heading h2,
    .content .qv-quote-shell > h2 {
        max-width: 100%;
        font-size: clamp(35px, 10vw, 58px) ;
        line-height: .94 ;
        letter-spacing: -.02em ;
    }

    .qv-page-heading {
        align-items: stretch ;
        flex-direction: column ;
        gap: 16px ;
        margin-bottom: 22px ;
        padding-bottom: 18px ;
    }

    .qv-page-heading h1,
    .qv-page-heading h2 {
        font-size: clamp(36px, 10vw, 56px) ;
    }

    .qv-page-heading p {
        max-width: 100% ;
        font-size: 9px ;
        line-height: 1.65 ;
    }

    .qv-page-stat {
        width: 100% ;
        min-width: 0 ;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: left ;
    }

    .qv-page-stat small {
        margin: 0 ;
    }

    .qv-page-stat strong {
        font-size: 24px ;
    }

    .panel-footer,
    .site-footer,
    .archive-footer,
    .docs-footer,
    .login-footer,
    .gate-footer {
        width: 100%;
        margin-left: 0 ;
        padding-right: var(--qv-mobile-gutter) ;
        padding-left: var(--qv-mobile-gutter) ;
    }

    /* Generic controls and data surfaces */
    :where(button, .btn, .copy-btn, .qv-ui-button, .qv-btn-ghost, .qv-detail-btn, .qv-page-link, .qv-page-action) {
        min-height: var(--qv-touch-target) ;
    }

    :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        max-width: 100%;
        font-size: 16px ;
    }

    .table-responsive,
    .qv-scroll-region,
    .qv-port-table-wrap,
    .qv-permission-table {
        max-width: 100%;
        overflow-x: auto ;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    .table-responsive > table,
    .qv-scroll-region > table,
    .qv-port-table-wrap > table,
    .qv-permission-table > table {
        min-width: 720px;
    }

    .content table.table {
        display: block;
        width: 100% ;
        max-width: 100% ;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    .content table.table > thead,
    .content table.table > tbody {
        min-width: 680px;
    }

    .qv-table-toolbar,
    .qv-mod-toolbar,
    .qv-user-toolbar,
    .qv-organization-header,
    .qv-collection-detail-head,
    .qv-panel-head,
    .qv-system-toolbar,
    .qv-health-ops-head,
    .qv-feature-admin-toolbar {
        align-items: stretch ;
        flex-direction: column ;
        gap: 12px ;
    }

    .qv-toolbar-actions,
    .qv-mod-toolbar-actions,
    .qv-collection-title-actions,
    .qv-author-actions,
    .qv-detail-actions,
    .qv-system-actions,
    .qv-server-actions,
    .qv-feature-record-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start ;
    }

    .qv-toolbar-actions > *,
    .qv-mod-toolbar-actions > *,
    .qv-collection-title-actions > *,
    .qv-detail-actions > *,
    .qv-system-actions > * {
        flex: 1 1 150px;
    }

    /* Major content grids */
    .qv-dashboard-grid,
    .qv-dashboard-secondary,
    .qv-intelligence-grid,
    .qv-member-grid,
    .qv-member-grid--lead,
    .qv-member-grid--three,
    .qv-author-grid,
    .qv-analytics-grid,
    .qv-system-grid,
    .qv-health-grid,
    .qv-health-grid-balanced,
    .qv-server-detail-grid,
    .qv-settings-grid,
    .settings-grid,
    .qv-port-grid,
    .qv-detail-columns,
    .qv-detail-grid,
    .qv-detail-grid-secondary,
    .qv-sync-grid,
    .qv-permission-map-grid,
    .qv-public-settings-grid,
    .qv-appearance-grid,
    .qv-health-maintenance-grid,
    .qv-health-capability-grid,
    .qv-health-lifecycle-grid,
    .qv-health-diagnostic-grid,
    .qv-health-action-grid,
    .qv-feature-admin-metrics,
    .qv-removal-admin-metrics,
    .qv-security-metrics,
    .qv-port-metrics,
    .qv-tags-metrics,
    .qv-analytics-cards,
    .qv-coverage-grid,
    .qv-metric-grid,
    .qv-mod-stats,
    .qv-author-stats,
    .qv-member-stats,
    .qv-settings-status-board,
    .settings-status-board {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }

    .qv-collections-layout {
        grid-template-columns: minmax(210px, .42fr) minmax(0, 1fr) ;
    }

    .qv-quote-searchbar,
    .qv-quote-filter-grid,
    .qv-quote-filter-grid-advanced,
    .qv-mod-event-filters,
    .qv-mod-event-filters-wide,
    .qv-log-filter,
    .qv-incident-filters,
    .qv-feature-admin-filter-stack,
    .qv-removal-admin-filter,
    .qv-collection-form-grid,
    .qv-collection-editor-grid,
    .qv-settings-form,
    .settings-form-grid,
    .settings-control-grid,
    .qv-port-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }

    .qv-save-search-form,
    .qv-organization-search,
    .qv-revision-search,
    .qv-public-archive-actions,
    .qv-sharing-feature-actions {
        width: 100%;
        max-width: none ;
    }

    .qv-quote-record-main,
    .qv-admin-quote-main,
    .qv-admin-record-main,
    .qv-mod-record-main {
        grid-template-columns: minmax(80px, .18fr) minmax(0, 1fr) ;
    }

    .qv-quote-record-meta,
    .qv-admin-quote-meta-row,
    .qv-admin-record-meta,
    .qv-mod-record-meta,
    .qv-revision-record-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }

    .qv-user-row {
        grid-template-columns: 48px minmax(150px, 1.2fr) minmax(100px, .7fr) minmax(210px, 1fr) ;
    }

    .qv-user-role-form,
    .qv-user-action-form {
        min-width: 0 ;
    }

    /* Application overlays */
    .qv-command {
        top: max(10px, env(safe-area-inset-top, 0px)) ;
        right: 10px ;
        left: 10px ;
        width: auto ;
        max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px)) ;
    }

    .qv-command-head {
        grid-template-columns: auto minmax(0, 1fr) auto ;
    }

    .qv-command-results {
        max-height: calc(100dvh - 180px) ;
        overflow-y: auto;
    }

    .qv-app-panel,
    .qv-quote-drawer {
        top: 0 ;
        bottom: 0 ;
        width: min(100vw, 520px) ;
        max-width: 100vw ;
        height: 100dvh ;
    }

    .qv-app-panel-head,
    .qv-quote-drawer-head {
        padding-top: max(18px, calc(env(safe-area-inset-top, 0px) + 12px)) ;
    }

    .qv-app-panel-actions,
    .qv-quote-drawer-foot {
        padding-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 10px)) ;
    }

    .qv-job-toast-stack,
    .qv-undo-toast {
        right: var(--qv-mobile-gutter) ;
        bottom: max(var(--qv-mobile-gutter), env(safe-area-inset-bottom, 0px)) ;
        left: var(--qv-mobile-gutter) ;
        width: auto ;
        max-width: none ;
    }

    .qv-member-preview-banner,
    .qv-preview-disclaimer {
        grid-template-columns: auto minmax(0, 1fr) ;
    }

    .qv-member-preview-actions,
    .qv-preview-disclaimer > form {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 58px;
    }

    .qv-access-preview-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PHONE — PANEL CONTENT
   ============================================================ */
@media (max-width: 650px) {
    :root {
        --qv-mobile-gutter: 14px;
    }

    .panel-topbar,
    .navbar {
        grid-template-columns: minmax(0, 1fr) ;
        min-height: 118px ;
        padding-left: 68px ;
        align-content: center;
    }

    .topbar-actions {
        width: 100%;
        grid-column: 1;
        justify-content: stretch;
    }

    .server-control {
        flex: 1 1 auto;
    }

    .server-selector,
    .admin-command-search,
    .admin-command-search input {
        width: 100% ;
        max-width: none ;
    }

    .admin-command-search {
        flex: 1 1 auto;
    }

    .content #main-section,
    .content > .container-fluid,
    .content > .container,
    .content > main {
        padding-top: 24px ;
    }

    .content h2 {
        margin-bottom: 16px ;
        font-size: clamp(22px, 7.5vw, 31px) ;
    }

    .content h1,
    .content .qv-page-heading h2,
    .content .qv-quote-shell > h2 {
        margin-bottom: 22px ;
        font-size: clamp(32px, 11vw, 48px) ;
    }

    .qv-page-heading h1,
    .qv-page-heading h2 {
        font-size: clamp(34px, 12vw, 50px) ;
    }

    #main-section .alert-message,
    #main-section .qv-announcement,
    .content .alert-message,
    .content .qv-announcement {
        min-height: 0 ;
        padding: 14px 14px 14px 52px ;
        margin-bottom: 22px ;
    }

    #main-section .alert-message::before,
    #main-section .qv-announcement::before,
    .content .alert-message::before,
    .content .qv-announcement::before {
        left: 12px ;
        width: 30px ;
        height: 30px ;
    }

    .qv-member-preview-banner,
    .qv-preview-disclaimer {
        grid-template-columns: 1fr ;
        gap: 12px ;
        padding: 15px ;
    }

    .qv-member-preview-icon,
    .qv-preview-disclaimer > i {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }

    .qv-member-preview-actions,
    .qv-preview-disclaimer > form {
        grid-column: auto;
        padding-left: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .qv-member-preview-actions a,
    .qv-member-preview-actions button,
    .qv-preview-disclaimer .qv-ui-button {
        width: 100%;
    }

    .qv-access-preview-list article {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 15px;
    }

    .qv-access-state {
        width: 100%;
        justify-content: center;
    }

    .qv-dashboard-hero,
    .qv-author-hero,
    .qv-member-hero,
    .qv-settings-heading,
    .qv-port-heading,
    .qv-security-heading,
    .qv-system-heading,
    .qv-health-heading,
    .qv-feature-heading,
    .qv-admin-search-hero,
    .qv-admin-changelog-hero {
        padding-right: 16px ;
        padding-left: 16px ;
    }

    .qv-dashboard-grid,
    .qv-dashboard-secondary,
    .qv-intelligence-grid,
    .qv-member-grid,
    .qv-member-grid--lead,
    .qv-member-grid--three,
    .qv-author-grid,
    .qv-analytics-grid,
    .qv-system-grid,
    .qv-health-grid,
    .qv-health-grid-balanced,
    .qv-server-detail-grid,
    .qv-settings-grid,
    .settings-grid,
    .qv-port-grid,
    .qv-detail-columns,
    .qv-detail-grid,
    .qv-detail-grid-secondary,
    .qv-sync-grid,
    .qv-permission-map-grid,
    .qv-public-settings-grid,
    .qv-appearance-grid,
    .qv-health-maintenance-grid,
    .qv-health-capability-grid,
    .qv-health-lifecycle-grid,
    .qv-health-diagnostic-grid,
    .qv-health-action-grid,
    .qv-feature-admin-metrics,
    .qv-removal-admin-metrics,
    .qv-security-metrics,
    .qv-port-metrics,
    .qv-tags-metrics,
    .qv-analytics-cards,
    .qv-coverage-grid,
    .qv-metric-grid,
    .qv-mod-stats,
    .qv-author-stats,
    .qv-member-stats,
    .qv-settings-status-board,
    .settings-status-board,
    .qv-collections-layout,
    .qv-quote-searchbar,
    .qv-quote-filter-grid,
    .qv-quote-filter-grid-advanced,
    .qv-mod-event-filters,
    .qv-mod-event-filters-wide,
    .qv-log-filter,
    .qv-incident-filters,
    .qv-feature-admin-filter-stack,
    .qv-removal-admin-filter,
    .qv-collection-form-grid,
    .qv-collection-editor-grid,
    .qv-settings-form,
    .settings-form-grid,
    .settings-control-grid,
    .qv-port-fields {
        grid-template-columns: minmax(0, 1fr) ;
    }

    .qv-metric-grid,
    .qv-mod-stats,
    .qv-author-stats,
    .qv-member-stats,
    .qv-settings-status-board,
    .qv-port-metrics,
    .qv-tags-metrics,
    .qv-security-metrics {
        gap: 0 ;
    }

    .qv-metric,
    .qv-system-stat,
    .qv-analytics-card,
    .qv-tags-metric,
    .qv-port-metrics > *,
    .qv-security-metrics > *,
    .qv-mod-stats > *,
    .qv-author-stats > *,
    .qv-member-stats > * {
        min-height: 112px ;
    }

    .qv-quote-record-main,
    .qv-admin-quote-main,
    .qv-admin-record-main,
    .qv-mod-record-main {
        grid-template-columns: 1fr ;
        gap: 9px ;
        padding: 13px ;
    }

    .qv-quote-record-meta,
    .qv-admin-quote-meta-row,
    .qv-admin-record-meta,
    .qv-mod-record-meta,
    .qv-revision-record-meta {
        grid-template-columns: 1fr ;
        gap: 10px ;
        padding: 12px 13px ;
    }

    .qv-record-actions,
    .qv-admin-quote-actions,
    .qv-admin-record-action,
    .qv-revision-record-action {
        width: 100%;
        justify-self: stretch ;
        display: grid ;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qv-record-actions > *,
    .qv-admin-quote-actions > *,
    .qv-admin-record-action > *,
    .qv-revision-record-action > * {
        width: 100%;
    }


    .community-authors-page .authors-panel {
        overflow: visible ;
        border: 0 ;
        background: transparent ;
    }

    .community-authors-page .authors-table,
    .community-authors-page .authors-table tbody,
    .community-authors-page .authors-table tr,
    .community-authors-page .authors-table td {
        display: block ;
        width: 100% ;
        min-width: 0 ;
        max-width: 100% ;
        white-space: normal ;
    }

    .community-authors-page .authors-table {
        overflow: visible ;
        background: transparent ;
    }

    .community-authors-page .authors-table thead {
        display: none ;
    }

    .community-authors-page .authors-table tbody {
        display: grid ;
        gap: 10px;
    }

    .community-authors-page .authors-table tr {
        padding: 13px 14px ;
        border: 1px solid #2b2b2b ;
        background: #0c0c0c ;
    }

    .community-authors-page .authors-table td {
        min-height: 36px;
        padding: 9px 0 ;
        display: grid ;
        grid-template-columns: minmax(92px, .38fr) minmax(0, 1fr) ;
        gap: 12px;
        align-items: start;
        border: 0 ;
        border-bottom: 1px solid #202020 ;
        text-align: left ;
    }

    .community-authors-page .authors-table td:last-child {
        border-bottom: 0 ;
    }

    .community-authors-page .authors-table td::before {
        content: attr(data-label);
        color: #62625e;
        font: 700 7px/1.35 var(--mono, "IBM Plex Mono", monospace);
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .community-authors-page .authors-row-actions {
        width: 100%;
        display: grid ;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .community-authors-page .authors-view-link {
        width: 100% ;
        min-width: 0 ;
        min-height: 42px ;
        margin: 0 ;
    }

    .qv-user-list {
        display: grid ;
        gap: 10px;
        border: 0 ;
        background: transparent ;
    }

    .qv-user-row {
        display: grid ;
        grid-template-columns: auto minmax(0, 1fr) ;
        gap: 12px ;
        padding: 16px ;
        border: 1px solid #292929 ;
        background: #0c0c0c;
    }

    .qv-user-index {
        grid-row: 1 / span 2;
        align-self: start;
    }

    .qv-user-current,
    .qv-user-authority,
    .qv-user-role-form,
    .qv-user-action-form,
    .qv-user-ban,
    .qv-user-unban,
    .qv-root-lock {
        grid-column: 1 / -1 ;
        width: 100% ;
    }

    .qv-user-role-form,
    .qv-user-action-form {
        display: grid ;
        grid-template-columns: minmax(0, 1fr) auto ;
        gap: 8px ;
    }

    .qv-user-role-form select,
    .qv-user-action-form select {
        width: 100% ;
        min-width: 0 ;
    }

    .qv-save-search-form,
    .qv-organization-search,
    .qv-revision-search,
    .qv-public-archive-actions,
    .qv-sharing-feature-actions,
    .qv-slug-input,
    .qv-media-field,
    .qv-color-control,
    .qv-color-rgb {
        display: grid ;
        grid-template-columns: 1fr ;
        gap: 8px ;
    }

    .qv-save-search-form button,
    .qv-organization-search button,
    .qv-revision-search button,
    .qv-public-archive-actions > *,
    .qv-sharing-feature-actions > *,
    .qv-media-field > .qv-ui-button {
        width: 100% ;
    }

    .qv-organization-tabs,
    .qv-mod-work-tabs,
    .qv-query-presets,
    .qv-saved-search-list,
    .qv-active-filters {
        max-width: 100%;
        display: flex ;
        overflow-x: auto;
        flex-wrap: nowrap ;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .qv-organization-tabs > *,
    .qv-mod-work-tabs > *,
    .qv-query-presets > *,
    .qv-saved-search-list > *,
    .qv-active-filters > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .qv-setting-card,
    .settings-card,
    .qv-public-address-card,
    .qv-appearance-preview {
        min-width: 0 ;
        grid-template-columns: 1fr ;
    }

    .qv-setting-copy,
    .qv-setting-input-wrap,
    .qv-setting-input,
    .qv-setting-select,
    .qv-setting-textarea {
        width: 100% ;
        min-width: 0 ;
    }

    .qv-settings-savebar,
    .settings-save-dock {
        right: 0 ;
        bottom: 0 ;
        left: 0 ;
        width: 100% ;
        padding: 10px var(--qv-mobile-gutter) max(10px, env(safe-area-inset-bottom, 0px)) ;
        display: grid ;
        grid-template-columns: 1fr ;
        gap: 8px ;
    }

    .qv-settings-savebar button,
    .settings-save-dock button {
        width: 100% ;
    }

    .qv-color-popover {
        position: fixed ;
        top: max(12px, env(safe-area-inset-top, 0px)) ;
        right: 12px ;
        bottom: max(12px, env(safe-area-inset-bottom, 0px)) ;
        left: 12px ;
        width: auto ;
        max-height: calc(100dvh - 24px) ;
        overflow-y: auto;
    }

    .qv-color-rgb {
        grid-template-columns: repeat(3, minmax(0, 1fr)) ;
    }

    .qv-context-grid,
    .qv-timeline-diff,
    .qv-revision-text-grid,
    .qv-sharing-overview,
    .qv-sharing-feature-top,
    .qv-collection-share,
    .qv-detail-share-head,
    .qv-public-address-card,
    .qv-record-activity,
    .qv-activity-row,
    .qv-member-list article,
    .qv-related-list article {
        grid-template-columns: 1fr ;
    }

    .qv-command-hint {
        display: none ;
    }

    .qv-command-item {
        grid-template-columns: auto minmax(0, 1fr) ;
    }

    .qv-command-item em {
        display: none;
    }

    .qv-quote-drawer-body,
    .qv-app-panel-body {
        padding: 14px ;
    }

    .qv-quote-meta-grid {
        grid-template-columns: 1fr ;
    }

    .qv-job-toast-actions,
    .qv-undo-toast-actions {
        display: grid ;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qv-job-toast-actions > *,
    .qv-undo-toast-actions > * {
        width: 100%;
    }

    .modal-dialog {
        width: auto ;
        max-width: none ;
        margin: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px)) ;
    }

    .modal-content {
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
    }

    .qv-preferences-modal .modal-body {
        display: grid;
        grid-template-columns: 1fr ;
        gap: 12px;
    }

    .qv-preferences-modal .modal-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qv-pagination,
    .qv-panel-pagination {
        justify-content: center ;
    }
}


/* Synic diagnostics is intentionally independent of the product shell, but it
   still needs a usable narrow-screen table and touch-sized controls. */
@media (max-width: 760px) {
    .qv-diagnostics-page main {
        width: calc(100% - (var(--qv-mobile-gutter) * 2)) ;
        margin: 18px auto 36px ;
    }

    .qv-diagnostics-page .summary {
        grid-template-columns: 1fr ;
    }

    .qv-diagnostics-page table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .qv-diagnostics-page th,
    .qv-diagnostics-page td {
        padding: 11px ;
    }
}

/* ============================================================
   PUBLIC SITE / ARCHIVE / LEGAL / SHARES
   ============================================================ */
@media (max-width: 900px) {
    .site-shell {
        width: 100%;
        overflow-x: hidden;
    }

    .site-nav {
        width: 100%;
        height: auto ;
        min-height: 76px;
        padding: max(12px, env(safe-area-inset-top, 0px)) var(--qv-mobile-gutter) 0 ;
        display: grid ;
        grid-template-columns: minmax(0, 1fr) auto ;
        gap: 10px 14px;
    }

    .site-nav .brand {
        min-width: 0;
    }

    .site-nav .brand-copy {
        min-width: 0;
    }

    .site-nav .brand-copy strong,
    .site-nav .brand-copy small {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-nav .account-link {
        min-height: 42px;
        padding: 0 12px ;
        white-space: nowrap;
    }

    .site-nav .nav-links {
        grid-column: 1 / -1;
        width: calc(100% + (var(--qv-mobile-gutter) * 2));
        height: 46px ;
        margin-left: calc(var(--qv-mobile-gutter) * -1);
        display: flex ;
        overflow-x: auto;
        border-top: 1px solid #222;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .site-nav .nav-links::-webkit-scrollbar {
        display: none;
    }

    .site-nav .nav-links a {
        min-width: max-content;
        padding: 0 16px ;
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .hero {
        min-height: auto ;
        padding: 38px var(--qv-mobile-gutter) 44px ;
        background-position: center;
    }

    .hero::before {
        right: var(--qv-mobile-gutter) ;
        left: var(--qv-mobile-gutter) ;
        top: 62px ;
    }

    .hero::after {
        display: none;
    }

    .hero-meta {
        gap: 14px;
        font-size: 7px ;
    }

    .hero-grid {
        grid-template-columns: 1fr ;
        gap: 38px ;
        padding: 54px 0 20px ;
    }

    .hero h1 {
        max-width: 100%;
        margin: 15px 0 24px ;
        font-size: clamp(58px, 16vw, 104px) ;
        line-height: .8 ;
    }

    .hero-description {
        max-width: 100% ;
        font-size: 14px ;
        line-height: 1.7 ;
    }

    .hero-actions {
        display: grid ;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-terminal {
        width: 100%;
        max-width: 680px;
        justify-self: stretch;
    }

    .hero-terminal blockquote {
        padding: 30px 24px ;
        font-size: clamp(27px, 7vw, 42px) ;
    }

    .quote-data {
        grid-template-columns: 1fr ;
    }

    .quote-data span {
        border-right: 0 ;
        border-bottom: 1px solid var(--line, #292929);
    }

    .quote-data span:last-child {
        border-bottom: 0 ;
    }

    .section {
        padding: 64px var(--qv-mobile-gutter) ;
    }

    .section-head,
    .command-section,
    .faq-section {
        grid-template-columns: 1fr ;
        gap: 28px ;
    }

    .section-head {
        align-items: start ;
        margin-bottom: 36px ;
    }

    .section-head h2,
    .command-copy h2,
    .faq-intro h2,
    .final-cta h2 {
        font-size: clamp(46px, 13vw, 74px) ;
    }

    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }

    .feature-card {
        min-height: 300px ;
        padding: 24px ;
    }

    .feature-card > i {
        margin: 45px 0 28px ;
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }

    .faq-list article {
        grid-template-columns: 38px minmax(0, 1fr) ;
    }

    .final-cta {
        padding: 76px var(--qv-mobile-gutter) ;
    }

    .site-footer,
    .archive-footer,
    .docs-footer {
        grid-template-columns: 1fr ;
        gap: 22px ;
        padding-right: var(--qv-mobile-gutter) ;
        padding-left: var(--qv-mobile-gutter) ;
    }

    .footer-links {
        flex-wrap: wrap;
        gap: 14px 20px ;
    }

    /* Public archive */
    .archive-shell,
    .archive-main,
    .archive-hero,
    .archive-section,
    .public-archive-main {
        max-width: 100% ;
    }

    .archive-hero {
        min-height: auto ;
        padding-right: var(--qv-mobile-gutter) ;
        padding-left: var(--qv-mobile-gutter) ;
    }

    .archive-hero-grid,
    .archive-hero-copy,
    .archive-member-hero,
    .archive-member-facts,
    .archive-tools,
    .archive-search,
    .archive-quote,
    .archive-quote-meta,
    .archive-card-grid,
    .archive-collection-grid,
    .archive-member-grid {
        grid-template-columns: 1fr ;
    }

    .archive-hero h1 {
        max-width: 100%;
        font-size: clamp(52px, 14vw, 94px) ;
    }

    .archive-tabs,
    .archive-nav,
    .archive-filter-tabs {
        max-width: 100%;
        display: flex ;
        overflow-x: auto;
        flex-wrap: nowrap ;
        -webkit-overflow-scrolling: touch;
    }

    .archive-tabs > *,
    .archive-nav > *,
    .archive-filter-tabs > * {
        flex: 0 0 auto;
    }

    .archive-search input {
        width: 100% ;
    }

    .archive-quote,
    .archive-card,
    .archive-member-card {
        padding: 16px ;
    }

    /* Share pages */
    .share-main {
        width: 100% ;
        max-width: 100% ;
        padding-right: var(--qv-mobile-gutter) ;
        padding-left: var(--qv-mobile-gutter) ;
    }

    .share-heading,
    .share-meta-grid,
    .share-list-main,
    .share-related,
    .share-identity,
    .share-copy-actions {
        grid-template-columns: 1fr ;
    }

    .share-heading h1 {
        font-size: clamp(44px, 13vw, 72px) ;
    }

    .share-list-record,
    .share-card,
    .share-related {
        min-width: 0;
    }

    .share-link-copy {
        align-items: flex-start ;
        flex-direction: column ;
    }

    /* Legal/docs */
    .legal-hero,
    .legal-layout,
    .docs-hero,
    .docs-layout {
        width: 100% ;
        max-width: 100% ;
        padding-right: var(--qv-mobile-gutter) ;
        padding-left: var(--qv-mobile-gutter) ;
    }

    .legal-summary,
    .legal-layout,
    .legal-section,
    .docs-layout,
    .doc-grid,
    .docs-grid {
        grid-template-columns: 1fr ;
    }

    .legal-index,
    .docs-index {
        position: static ;
        display: block ;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    .legal-index a,
    .docs-index a {
        display: inline-flex ;
        width: auto ;
        margin-right: 14px;
    }

    .legal-hero h1,
    .docs-hero h1 {
        font-size: clamp(54px, 16vw, 94px) ;
    }

    .effective-date {
        min-width: 0 ;
    }
}

@media (max-width: 560px) {
    .site-nav .brand-copy small {
        display: none ;
    }

    .site-nav .brand-copy strong {
        font-size: 16px ;
    }

    .site-nav .account-link {
        max-width: 128px;
        overflow: hidden;
        font-size: 9px ;
        text-overflow: ellipsis;
    }

    .hero-actions,
    .feature-grid,
    .stats {
        grid-template-columns: 1fr ;
    }

    .feature-card {
        min-height: 260px ;
    }

    .hero-meta > :first-child {
        display: none;
    }

    .faq-list article {
        grid-template-columns: 1fr ;
        gap: 8px ;
    }

    .command-display {
        box-shadow: 8px 8px 0 #0f0f0f ;
    }

    .command-preview {
        padding: 19px 16px ;
        font-size: 12px ;
        line-height: 1.8 ;
    }
}

/* ============================================================
   LOGIN / SERVER SELECTION / ERROR SURFACES
   ============================================================ */
@media (max-width: 900px) {
    .login-shell {
        min-height: calc(100dvh - 120px) ;
        padding: max(22px, env(safe-area-inset-top, 0px)) var(--qv-mobile-gutter) 28px ;
    }

    .login-message-stack,
    .login-container {
        width: min(100%, 580px) ;
        max-width: 100% ;
    }

    .login-container {
        padding: clamp(24px, 7vw, 46px) ;
    }

    .login-container h1 {
        font-size: clamp(42px, 13vw, 72px) ;
        line-height: .92 ;
    }

    .login-btn {
        width: 100%;
        min-height: 50px;
    }

    .server-gate {
        width: 100%;
        min-height: auto ;
        padding: max(18px, env(safe-area-inset-top, 0px)) var(--qv-mobile-gutter) 30px ;
    }

    .gate-layout {
        grid-template-columns: 1fr ;
        gap: 24px ;
    }

    .gate-meta {
        gap: 12px;
        flex-wrap: wrap;
    }

    .gate-intro,
    .gate-control {
        min-width: 0;
    }

    .gate-copy h1 {
        font-size: clamp(56px, 16vw, 96px) ;
    }

    .gate-actions {
        display: grid ;
        grid-template-columns: 1fr ;
    }

    .gate-button {
        width: 100%;
        min-height: 58px;
    }

    .gate-footer {
        position: static ;
        width: 100%;
        padding: 20px var(--qv-mobile-gutter) max(20px, env(safe-area-inset-bottom, 0px)) ;
        display: flex ;
        flex-wrap: wrap;
        gap: 10px 20px;
    }

    .error-page,
    .error-shell,
    .removal-shell,
    .removal-main {
        width: 100% ;
        max-width: 100% ;
        padding-right: var(--qv-mobile-gutter) ;
        padding-left: var(--qv-mobile-gutter) ;
    }
}

/* Prevent sticky/fixed controls from covering the last interactive region. */
@media (max-width: 650px) {
    body:has(.qv-settings-savebar),
    body:has(.settings-save-dock) {
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) ;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .panel-nav-backdrop,
    .qv-command,
    .qv-app-panel,
    .qv-quote-drawer {
        transition: none ;
    }
}

/* ============================================================
   MOBILE SHELL HOTFIX — PUBLIC NAVIGATION
   The original narrow layout exposed the entire primary navigation as a
   horizontal scroller. A compact, accessible menu keeps public, legal, and
   error pages readable without forcing the header wider than the viewport.
   ============================================================ */
.site-nav-toggle {
    display: none;
}

@media (max-width: 900px) {
    html.qv-public-nav-ready .site-nav {
        position: sticky;
        top: 0;
        z-index: 1000;
        min-height: 70px ;
        padding: max(11px, env(safe-area-inset-top, 0px)) var(--qv-mobile-gutter) 11px ;
        grid-template-columns: minmax(0, 1fr) auto auto ;
        grid-template-rows: auto auto ;
        align-items: center ;
        gap: 10px ;
        border-bottom: 1px solid #292929;
        background: rgba(7, 7, 7, .97) ;
        box-shadow: 0 12px 34px rgba(0, 0, 0, .26);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    html.qv-public-nav-ready .site-nav .brand {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    html.qv-public-nav-ready .site-nav .account-link {
        grid-column: 3;
        grid-row: 1;
        min-width: 0;
        min-height: 42px ;
        padding: 0 12px ;
    }

    .site-nav-toggle {
        grid-column: 2;
        grid-row: 1;
        width: 44px;
        height: 44px;
        padding: 0;
        display: none;
        place-items: center;
        border: 1px solid #343434;
        background: #0b0b0b;
        color: #d9d8d2;
        cursor: pointer;
    }

    html.qv-public-nav-ready .site-nav-toggle {
        display: grid;
    }

    .site-nav-toggle > span {
        width: 17px;
        display: grid;
        gap: 4px;
    }

    .site-nav-toggle i {
        width: 100%;
        height: 1px;
        display: block;
        background: currentColor;
        transition: transform .18s ease, opacity .18s ease;
    }

    .site-nav-toggle b {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .site-nav-toggle.is-open i:nth-child(1) {
        transform: translateY(5px) rotate(45deg);
    }

    .site-nav-toggle.is-open i:nth-child(2) {
        opacity: 0;
    }

    .site-nav-toggle.is-open i:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg);
    }

    html.qv-public-nav-ready .site-nav .nav-links {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100% ;
        height: auto ;
        max-height: min(64dvh, 520px);
        margin: 0 ;
        padding: 0 ;
        display: none ;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: hidden ;
        overflow-y: auto ;
        border: 1px solid #2a2a2a;
        background: #090909;
        box-shadow: 0 22px 52px rgba(0, 0, 0, .42);
        scroll-snap-type: none;
        -webkit-overflow-scrolling: touch;
    }

    body.qv-public-nav-open {
        overflow: hidden ;
    }

    body.qv-public-nav-open .site-nav .nav-links {
        display: grid ;
    }

    html.qv-public-nav-ready .site-nav .nav-links a {
        min-width: 0 ;
        min-height: 50px;
        padding: 0 15px ;
        justify-content: flex-start;
        border: 0 ;
        border-right: 1px solid #202020 ;
        border-bottom: 1px solid #202020 ;
        background: #0a0a0a;
        scroll-snap-align: none;
    }

    html.qv-public-nav-ready .site-nav .nav-links a:nth-child(2n) {
        border-right: 0 ;
    }

    html.qv-public-nav-ready .site-nav .nav-links a:hover,
    html.qv-public-nav-ready .site-nav .nav-links a:focus-visible {
        background: #121212;
        color: #fff;
    }

    /* Public share headers intentionally have no primary link list. Keep their
       read-only state compact instead of reserving an empty menu column. */
    .share-page .site-nav {
        min-height: 70px ;
        padding: max(11px, env(safe-area-inset-top, 0px)) var(--qv-mobile-gutter) 11px ;
        grid-template-columns: minmax(0, 1fr) auto ;
        grid-template-rows: auto ;
        gap: 12px ;
    }

    .share-page .site-nav .share-nav-spacer {
        display: none ;
    }

    .share-page .site-nav .share-nav-state {
        min-width: 0;
        justify-self: end;
        text-align: right;
    }
}

@media (max-width: 520px) {
    html.qv-public-nav-ready .site-nav .nav-links {
        grid-template-columns: 1fr;
    }

    html.qv-public-nav-ready .site-nav .nav-links a,
    html.qv-public-nav-ready .site-nav .nav-links a:nth-child(2n) {
        border-right: 0 ;
    }

    html.qv-public-nav-ready .site-nav .brand-mark {
        width: 36px;
        height: 36px;
    }

    html.qv-public-nav-ready .site-nav .brand-copy strong {
        font-size: 15px ;
    }

    html.qv-public-nav-ready .site-nav {
        grid-template-columns: minmax(0, 1fr) 42px auto ;
        gap: 8px ;
    }

    html.qv-public-nav-ready .site-nav .account-link {
        width: auto;
        min-width: 58px;
        padding: 0 9px ;
        justify-content: center;
        gap: 6px ;
        font-size: 8px ;
        letter-spacing: .05em ;
        white-space: nowrap;
    }

    html.qv-public-nav-ready .site-nav .account-link .status-dot {
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
    }

    .share-page .site-nav .share-nav-state span {
        display: none;
    }
}

/* ============================================================
   MOBILE SHELL HOTFIX — AUTHENTICATED TOP BAR
   Put the page title and icon actions on the first row, then give the active
   server or Admin search field a full-width second row. This prevents the
   search, notification, profile, and server controls from crushing each other.
   ============================================================ */
@media (max-width: 760px) {
    :root {
        --qv-mobile-topbar: 136px;
    }

    .panel-topbar,
    .navbar {
        min-height: var(--qv-mobile-topbar) ;
        padding: calc(env(safe-area-inset-top, 0px) + 11px) var(--qv-mobile-gutter) 12px max(66px, var(--qv-mobile-gutter)) ;
        display: grid ;
        grid-template-columns: minmax(0, 1fr) auto auto ;
        grid-template-rows: minmax(44px, auto) 46px ;
        column-gap: 7px ;
        row-gap: 10px ;
        align-items: center ;
    }

    .panel-topbar .topbar-context,
    .navbar .topbar-context {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        overflow: hidden;
    }

    .panel-topbar .topbar-actions,
    .navbar .topbar-actions {
        display: contents ;
        width: auto ;
        height: auto ;
        margin: 0 ;
    }

    .panel-topbar .topbar-actions > .server-control,
    .navbar .topbar-actions > .server-control,
    .panel-topbar .topbar-actions > .admin-command-search,
    .navbar .topbar-actions > .admin-command-search {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100% ;
        max-width: none ;
        min-width: 0 ;
        height: 46px ;
        min-height: 46px ;
        margin: 0 ;
        justify-self: stretch;
    }

    .panel-topbar .topbar-actions > .qv-app-topbar-tools,
    .navbar .topbar-actions > .qv-app-topbar-tools {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        gap: 5px ;
    }

    .panel-topbar .topbar-actions > .account-menu,
    .navbar .topbar-actions > .account-menu {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        min-width: 42px;
    }

    .panel-topbar .topbar-actions > .admin-scope-control,
    .navbar .topbar-actions > .admin-scope-control {
        display: none ;
    }

    .panel-topbar .server-control > .server-selector,
    .navbar .server-control > .server-selector {
        width: auto ;
        max-width: none ;
        min-width: 0 ;
        height: 34px ;
        min-height: 34px ;
        margin: 5px ;
        flex: 1 1 auto ;
    }

    .panel-topbar .admin-command-search,
    .navbar .admin-command-search {
        display: flex ;
        padding: 0 10px ;
    }

    .panel-topbar .admin-command-search input,
    .navbar .admin-command-search input {
        width: 100% ;
        height: 38px ;
        min-height: 38px ;
        font-size: 16px ;
    }

    .panel-topbar .qv-app-topbar-tools > button,
    .navbar .qv-app-topbar-tools > button,
    .panel-topbar .account-trigger,
    .navbar .account-trigger {
        width: 42px ;
        min-width: 42px ;
        height: 42px ;
        min-height: 42px ;
    }

    .panel-topbar .topbar-kicker,
    .navbar .topbar-kicker,
    .panel-topbar .topbar-title small,
    .navbar .topbar-title small {
        display: none ;
    }

    .panel-topbar .topbar-title h4,
    .navbar .topbar-title h4 {
        max-width: 100%;
        font-size: clamp(19px, 6vw, 25px) ;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap ;
    }

    .account-menu .dropdown-menu {
        top: calc(env(safe-area-inset-top, 0px) + 140px) ;
        right: var(--qv-mobile-gutter) ;
        left: var(--qv-mobile-gutter) ;
        max-height: calc(100dvh - 156px - env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 420px) {
    .panel-topbar,
    .navbar {
        padding-left: max(61px, var(--qv-mobile-gutter)) ;
        grid-template-columns: minmax(0, 1fr) auto auto ;
    }

    .panel-topbar .topbar-index,
    .navbar .topbar-index {
        display: none ;
    }

    .panel-topbar .topbar-title h4,
    .navbar .topbar-title h4 {
        font-size: clamp(18px, 5.7vw, 22px) ;
    }

    .panel-topbar .qv-app-topbar-tools > button,
    .navbar .qv-app-topbar-tools > button,
    .panel-topbar .account-trigger,
    .navbar .account-trigger {
        width: 40px ;
        min-width: 40px ;
        height: 40px ;
        min-height: 40px ;
    }
}