/* Backup & Share page. Uses the global design tokens from base.css. */
.backup { max-width: 48rem; }

.backup h1 { margin-bottom: 0.5rem; }

.backup > section > p:not(.backup-error) { color: var(--muted); margin-bottom: 0.25rem; }

.backup ul { list-style: none; padding: 0; margin: 1rem 0; }

.backup li + li { margin-top: 0.5rem; }

.backup label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }

/* "Select all" row - slightly heavier than individual tool labels */
.backup-all { font-weight: 600; margin-bottom: 0.5rem; }

/* Link + copy button row. Guard display with :not([hidden]) so the `hidden`
   attribute still hides it (a bare `display: flex` would override [hidden]). */
.backup-output:not([hidden]) {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.backup-output input[type="text"] {
    flex: 1 1 20rem;
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
}

/* "This link is long" note below the URL field */
.backup-note {
    flex-basis: 100%;
    color: var(--muted);
    font-size: 0.9rem;
}

/* Error messages (generate and restore modes) */
.backup-error {
    color: var(--bad);
    font-weight: 600;
    margin-top: 0.5rem;
}

/* "Will overwrite existing data" pill badge on each tool row */
.backup-badge {
    font-size: 0.75rem;
    color: var(--muted);
    border: 1px solid var(--border-strong);
    border-radius: 0.5rem;
    padding: 0.05rem 0.4rem;
    white-space: nowrap;
}

/* Load / Cancel button row in restore mode. :not([hidden]) so setting the
   `hidden` attribute (after Load) actually removes the buttons. */
.backup-actions:not([hidden]) {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Success confirmation block in restore mode */
.backup-success {
    margin-top: 1.5rem;
    color: var(--good);
    font-weight: 600;
}

/* Tool links in the success block use the site's standard link accent */
.backup-success a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent); }
.backup-success a:hover { color: var(--accent-strong); }

/* Status toast: collapsed by default, slides open on .is-show. Mirrors the
   resource tracker's toast (assets/styles/resources.css). */
.backup-toast { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.backup-toast.is-show { grid-template-rows: 1fr; }
.backup-toast-clip { overflow: hidden; min-height: 0; }
.backup-toast-banner {
    margin: 0.6rem 0 0; padding: 0.55rem 0.85rem; border-radius: 0.5rem;
    background: var(--accent-weak); color: var(--accent-strong); border: 1px solid var(--accent);
    font-size: 0.9rem;
    opacity: 0; transition: opacity .32s ease;
}
.backup-toast.is-show .backup-toast-banner { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .backup-toast, .backup-toast-banner { transition: none; }
}