/* ========================================
   Help pages: /research/, /research/help/ and /data/ (Storage and backups)
   Loaded after style.css and before a page's own stylesheet: sections,
   the hero, the device/system switch, numbered steps, screenshots, tables.
   ======================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875em;
}

.r-section {
    padding: var(--space-4xl) var(--space-lg);
    /* Anchors (#agents, #start…) land below the fixed header */
    scroll-margin-top: var(--header-height);
}

.r-cream {
    background: var(--color-cream);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.r-container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.r-narrow {
    max-width: 820px;
}

.r-hero {
    padding-top: calc(var(--header-height) + var(--space-3xl));
}

.r-hero .hero-title {
    font-size: clamp(2.2rem, 4.4vw, 3.25rem);
}

.r-hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-muted);
    max-width: 500px;
    margin-bottom: var(--space-xl);
}

.how-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-forest);
    color: #fff;
    /* Not Cormorant: its old-style figures drop the 3 below the line */
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
}

.shot-link {
    display: block;
    border-radius: var(--radius-md);
}

.shot-link img {
    display: block;
    width: 100%;
    height: auto;
}

.shot-link:focus-visible {
    outline: 2px solid var(--color-sage);
    outline-offset: 2px;
}

.help-shot {
    margin: var(--space-lg) 0 0;
}

/* Operating-system tabs (the strip only once JS is running) */
.os-tabs {
    display: none;
    gap: 4px;
    padding: 4px;
    margin-bottom: var(--space-md);
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.js .os-tabs {
    display: flex;
}

.os-tabs button {
    flex: 1;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-muted);
}

.os-tabs button[aria-selected="true"] {
    background: var(--color-paper);
    color: var(--color-forest);
    box-shadow: var(--shadow-soft);
}

.help-hero {
    padding-bottom: var(--space-3xl);
}

/* One line: "Step by step, for your computer" (the accent stays inline) */
.r-hero .help-title {
    font-size: clamp(2.3rem, 5.2vw, 3.75rem);
    line-height: 1.12;
}

.help-title .hero-title-accent {
    display: inline;
}

.help-subtitle {
    max-width: 640px;
}

.os-switch-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-lg);
    margin: var(--space-lg) 0 var(--space-2xl);
}

.os-switch {
    display: flex;
    margin: 0;
    min-width: min(360px, 100%);
}

.os-switch button {
    padding: 10px 18px;
    font-size: 0.9375rem;
}

.os-switch button[aria-pressed="true"] {
    background: var(--color-paper);
    color: var(--color-forest);
    box-shadow: var(--shadow-soft);
}

.help-timeline .how-num {
    flex-shrink: 0;
}

.help-timeline li > div {
    min-width: 0;
    flex: 1;
}

.help-timeline h3 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.help-timeline p {
    line-height: 1.6;
}

.help-muted {
    margin-top: var(--space-md);
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* The command-line way as a vertical timeline */
.help-timeline {
    list-style: none;
    position: relative;
    display: grid;
    gap: var(--space-2xl);
}

.help-timeline::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 36px;
    width: 2px;
    background: var(--color-border);
}

.help-timeline li {
    position: relative;
    display: flex;
    gap: var(--space-lg);
}

.help-timeline-done .how-num {
    background: var(--color-sage);
}

.help-table-wrap {
    overflow-x: auto;
}

.help-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.55;
}

.help-table th,
.help-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--color-border);
}

.help-table thead th {
    border-top: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-sage);
}

.help-table tbody th {
    width: 28%;
    font-weight: 600;
    color: var(--color-forest);
}

.help-table code {
    overflow-wrap: anywhere;
}

.help-table td {
    overflow-wrap: anywhere;
    hyphens: auto;
}

@media (max-width: 640px) {
    .help-timeline li {
        gap: var(--space-md);
    }
}

/* ---------- /research/help/: smaller headings, lists and tables ---------- */

/* A heading inside a section, above a timeline, a table or a list of questions */
.help-subhead {
    margin: var(--space-2xl) 0 var(--space-md);
    font-size: 1.4rem;
    font-weight: 600;
}

.section-header + .help-subhead {
    margin-top: 0;
}

/* Questions right after a timeline or a box */
.help-timeline + .help-subhead,
.help-timeline + .faq-list,
.uninstall-box + .faq-list {
    margin-top: var(--space-2xl);
}

/* Numbered steps inside an answer (<details>) */
.faq-list details .help-steps {
    margin: 0 var(--space-lg) var(--space-lg) calc(var(--space-lg) + 1.25em);
    color: var(--color-muted);
    line-height: 1.7;
}

.faq-list details p + p {
    margin-top: calc(-1 * var(--space-sm));
}

/* `strom help --human` with its commands: a table inside the box */
.help-human .help-table-wrap {
    margin-top: var(--space-lg);
}

.help-human .help-muted:first-of-type {
    margin-top: var(--space-md);
}

.uninstall-box .help-muted + .help-muted {
    margin-top: var(--space-sm);
}

.help-cmds tbody th {
    width: 36%;
}

.help-cmds tbody th code {
    color: var(--color-forest);
}

/* Two-column tables without a header (modes, switching, ways of sending) */
.help-plain {
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.help-plain tr:first-child th,
.help-plain tr:first-child td {
    border-top: 0;
}

.help-plain th,
.help-plain td {
    padding: 14px 16px;
}

/* "Recommended" next to Manually, as in the app's dialog */
.help-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    border: 1px solid var(--color-mint);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-sage);
    vertical-align: 1px;
    white-space: nowrap;
}

@media (max-width: 640px) {
    /* The row label above its text, so nothing is squeezed */
    .help-plain tr,
    .help-plain th,
    .help-plain td,
    .help-cmds tr,
    .help-cmds th,
    .help-cmds td {
        display: block;
        width: auto;
    }

    .help-cmds thead {
        display: none;
    }

    .help-plain tbody th,
    .help-cmds tbody th {
        width: auto;
        padding-bottom: 0;
    }

    .help-plain td,
    .help-cmds td {
        border-top: 0;
        padding-top: 4px;
    }

    .help-plain tr + tr,
    .help-cmds tr + tr {
        border-top: 1px solid var(--color-border);
    }

    .help-plain tr + tr th,
    .help-cmds tbody tr + tr th {
        border-top: 0;
    }
}

/* A question linked to directly (#sync-file) lands below the fixed header */
.faq-list details[id] {
    scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

/* research.css widens #modes and #sync of /research/; the help page keeps
   every section at the narrow width */
.help-page #modes .r-narrow,
.help-page #sync .r-narrow {
    max-width: 820px;
}

/* A shot of the app inside an answer (<details>); a dialog stays at its own size */
.faq-list details .help-shot {
    margin: 0 var(--space-lg) var(--space-lg);
}

.help-shot-dialog {
    max-width: 552px;
}

.help-shot figcaption {
    margin-top: var(--space-sm);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-muted);
}