/* Deploy-ready overrides for the larger type scale and responsive mobile UI.
   Keep in sync with the final section of resources/css/app.css. */
:root { --sidebar-width: 264px; }

.nav-choice:disabled { cursor: not-allowed; opacity: .45; }

body { font-size: 19px; line-height: 1.5; }
h1 { font-size: 31px; }
h2 { font-size: 23px; line-height: 1.3; }
h3 { font-size: 18px; }
.brand-mark { font-size: 16px; }
.brand-copy strong { font-size: 17px; }
.brand-copy small { font-size: 13px; }
.sidebar-section { font-size: 13px; }
.sidebar-link { font-size: 16px; }
.privacy-state strong { font-size: 14px; }
.privacy-state small { font-size: 12px; }
.sidebar-logout { font-size: 15px; }
.topbar-heading span { font-size: 13px; }
.topbar-heading strong { font-size: 19px; }
.zero-knowledge-badge { font-size: 14px; }
.eyebrow { font-size: 13px; }
.hint { font-size: 15px; }
label { font-size: 15px; }
.small { font-size: 14px; }
.alert { font-size: 16px; }
.mode-badge, .status-pill { font-size: 13px; }
.recovery-box summary { font-size: 16px; }
.unlock-separator { font-size: 14px; }
.nav-choice { font-size: 15px; }
.vault-item h3 { font-size: 17px; }
.vault-item p { font-size: 14px; }
.item-url-link { font-size: 15px; }
.import-notes, .import-status { font-size: 15px; }
legend { font-size: 15px; }
table { font-size: 15px; }
th { font-size: 13px; }
.big-code { font-size: 19px; }

@media (max-width: 980px) {
    .app-sidebar { width: min(320px, calc(100vw - 44px)); }
    .app-topbar { padding-inline: 20px; }
    .toolbar { grid-template-columns: minmax(0, 1fr) minmax(180px, .6fr); }
    .toolbar-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .side-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    html, body { max-width: 100%; }
    .app-topbar {
        height: 64px;
        gap: 10px;
        padding-right: max(12px, env(safe-area-inset-right));
        padding-left: max(12px, env(safe-area-inset-left));
    }
    .theme-button, .sidebar-toggle { width: 44px; height: 44px; flex: 0 0 auto; }
    .sidebar-logout { min-height: 44px; }
    .topbar-heading { flex: 1; }
    .page-shell {
        padding: 18px max(12px, env(safe-area-inset-right)) calc(44px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }
    .guest-shell {
        padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }
    .auth-wrap { min-height: calc(100dvh - 24px); align-items: start; padding-top: clamp(16px, 8vh, 72px); }
    .auth-card { padding: 22px 18px; border-radius: 15px; }
    .settings-panel { padding: 17px 15px; }
    .gate-panel { min-height: 0; padding: 24px 16px; }
    .toolbar { grid-template-columns: minmax(0, 1fr); padding: 10px; }
    .toolbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .toolbar-actions > * { width: 100%; min-width: 0; margin: 0; padding-inline: 6px; font-size: 15px; line-height: 1.2; text-align: center; }
    input:not([type="checkbox"]):not([type="radio"]), select, textarea,
    .primary, .secondary, .danger-button { min-height: 46px; }
    .small { min-height: 42px; padding-inline: 10px; }
    .vault-header > .row, .section-head > .row { width: 100%; flex-wrap: wrap; }
    .section-head > .button-link { width: 100%; }
    .vault-grid { min-width: 0; grid-template-columns: minmax(0, 1fr); }
    .vault-grid > * { min-width: 0; }
    .side-panel {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding: 8px;
    }
    .nav-choice {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        gap: 8px;
        border: 1px solid var(--border);
        background: var(--surface-soft);
        overflow-wrap: anywhere;
        white-space: normal;
    }
    .nav-choice.active { border-color: #bae6fd; }
    .side-sep { display: none; }
    .item-panel { min-height: 320px; padding: 8px; }
    .vault-item { padding: 14px 12px; }
    .ellipsis { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .item-url-link { max-width: 100%; }
    .item-url-link span { min-width: 0; }
    .secret-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .secret-line > * { width: 100%; min-width: 0; }
    .secret-value { grid-column: 1 / -1; }
    .checks { grid-template-columns: 1fr; }
    .list-row form { width: 100%; flex-direction: column; align-items: stretch; }
    .onboarding-step { align-items: flex-start; flex-direction: column; gap: 6px; }
    fieldset { min-width: 0; padding: 13px 11px; }
    .recovery-highlight .row, .modal .row.gap { flex-wrap: wrap; }
    .recovery-highlight .row > *, .modal .row.gap > * { flex: 1 1 150px; }
    .modal {
        width: calc(100% - 16px);
        max-height: calc(100dvh - 16px);
        margin: auto;
        padding: 20px 16px;
        overflow: auto;
        border-radius: 14px;
    }
    .modal .row.between h2 { margin-bottom: 0; }
    .modal .icon-button { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
    .client-notice { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; text-align: center; }
    #totp-qr-canvas { max-width: 100%; height: auto !important; }
    .table-panel { overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 420px) {
    .row.end.gap { align-items: stretch; flex-direction: column; }
    .row.end.gap > * { width: 100%; }
}