/* ========================================
   /data/ — Storage and backups
   Loaded after style.css and help.css (sections, hero, switch, numbered
   steps, table).
   ======================================== */

.data-section-header {
    max-width: none;
    text-align: left;
    margin-bottom: var(--space-xl);
}

.data-text {
    font-size: 1.0625rem;
    line-height: 1.7;
}

.data-text + .data-text {
    margin-top: var(--space-md);
}

/* ---------- a) Where ---------- */

.data-facts {
    list-style: none;
    display: grid;
    gap: var(--space-md);
}

.data-facts li {
    position: relative;
    padding-left: var(--space-lg);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.data-facts li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-sage);
}

.data-facts strong {
    color: var(--color-forest);
}

/* Diagram: the browser (the app and its backups) → Export → a file */
.data-diagram {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-lg);
    max-width: 980px;
    margin: var(--space-3xl) auto 0;
}

.dd-browser {
    padding: var(--space-lg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

.dd-label {
    display: block;
    margin-bottom: var(--space-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-sage);
}

.dd-box {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.dd-box strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-ink);
}

.dd-box span {
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* The file: the advice, outlined like the key point on the homepage */
.dd-file {
    border-color: var(--color-forest);
    box-shadow: 0 0 0 1px var(--color-forest);
}

@media (max-width: 767px) {
    .data-diagram {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

}

/* ---------- Three ways not to lose the family tree (#ways) ---------- */

.ways-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.way-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 24px;
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* The file: always, outlined like .dd-file */
.way-file {
    border-color: var(--color-forest);
    box-shadow: 0 0 0 1px var(--color-forest);
}

.way-tag {
    align-self: flex-start;
    padding: 2px 10px;
    border: 1px solid var(--color-sage);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-forest);
}

.way-tag-solid {
    background: var(--color-forest);
    border-color: var(--color-forest);
    color: #fff;
}

.way-card h3 {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-ink);
}

.way-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-muted);
}

.way-link {
    margin-top: auto;
    font-size: 0.875rem;
}

/* Under 768 px: one under another, the name and the tag in a row, the short text */
@media (max-width: 767px) {
    .ways-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .way-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px var(--space-sm);
        padding: 18px;
        border-radius: 12px;
    }

    .way-tag {
        grid-column: 2;
        grid-row: 1;
        padding: 1px 8px;
        font-size: 0.6875rem;
    }

    .way-card h3 {
        grid-column: 1;
        grid-row: 1;
        font-size: 1.375rem;
    }

    .way-desc {
        display: none;
    }

    .way-link {
        grid-column: 1 / -1;
        margin-top: 2px;
    }
}

/* ---------- b) When: the table ---------- */

.data-table {
    font-size: 0.9375rem;
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.data-table th,
.data-table td {
    padding: 14px 16px;
}

.data-table thead th {
    border-top: 0;
}

.data-table tbody th {
    width: 38%;
}

/* Phones: each row as a card, the label above the text */
@media (max-width: 640px) {
    .data-table thead {
        display: none;
    }

    .data-table tr,
    .data-table th,
    .data-table td {
        display: block;
        width: auto;
    }

    .data-table tbody th {
        width: auto;
        padding-bottom: 4px;
    }

    .data-table td {
        border-top: 0;
        padding-top: 0;
    }
}

/* What counts as a copy in a file */
.data-copies {
    margin-top: var(--space-xl);
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.data-copies h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.data-copies ul {
    display: grid;
    gap: 4px;
    padding-left: 1.2em;
    line-height: 1.6;
}

.data-copies p {
    margin-top: var(--space-sm);
    font-size: 0.9375rem;
    color: var(--color-muted);
}

/* The app's own screenshots under "How often" */
.data-shots {
    display: grid;
    justify-items: center;
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.data-shot {
    margin: 0;
    width: 100%;
}

.data-shot-bar {
    max-width: 338px;
}

.data-shot-dialog {
    max-width: 488px;
}

.data-shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-medium);
}

.data-shot figcaption {
    margin-top: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-muted);
    text-align: center;
}


/* ---------- Spacing ---------- */

/* No tiles under the intro (unlike the Research help): less air */
.data-page .help-hero {
    padding-bottom: var(--space-xl);
}

.data-page .data-where {
    padding-top: var(--space-2xl);
}

.data-table td {
    hyphens: manual;
}

/* ---------- The web as a guide (2026-10): the new /data/ blocks ---------- */

/* The main message under the title: the bold first sentence */
.data-message strong {
    display: block;
    margin-bottom: 6px;
    color: var(--color-forest);
}

/* #where: this browser, and the places that do not see the family tree */
.data-diagram--where {
    display: block;
    max-width: 760px;
}

.dd-here .dd-box {
    max-width: 320px;
}

.dd-others {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.dd-other {
    display: grid;
    gap: 2px;
    padding: var(--space-md);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    min-width: 0;
    overflow-wrap: anywhere;
}

.dd-other strong {
    font-size: 0.9375rem;
    color: var(--color-ink);
}

.dd-other span {
    font-size: 0.8125rem;
    color: var(--color-muted);
}

@media (max-width: 767px) {
    .dd-others {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* #ways: the file (and the Strom archive once confirmed) */
.ways-grid--fit {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-width: 820px;
    margin: 0 auto;
}

.way-card .way-desc--all {
    display: block;
}

.dways-note {
    max-width: 820px;
    margin: var(--space-lg) auto 0;
    text-align: center;
    color: var(--color-muted);
}

/* #when: the column names inside the cells, shown on a phone only */
.dt-label {
    display: none;
}

.data-table--when tbody th {
    width: 30%;
}

@media (max-width: 640px) {
    .dt-label {
        display: block;
        margin-top: 8px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-sage);
    }
}

.data-no,
.data-howto {
    margin-top: var(--space-xl);
}

/* #install: the button to the app guide, then the table */
.data-inst-btn {
    margin: var(--space-md) 0 var(--space-xl);
}

.data-subtitle {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
}