/* ================================================================
   SyncFolder User Guide — Shared Stylesheet
   ================================================================ */

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
    --bg: #ffffff;
    --app-color: #0055a1;
    --text: #303030;
    --surface: #ffffff;
    --surface-alt: #e8e8e8;
    --surface-alt-text: #404040;
    --tr-alt: #f6f6f6;
    --border: #b6bdc8;
    --border-def: #969da8;
    --accent: #0078d4;
    --accent: #2098f4;
    --accent-light: #e6f2fb;
    --muted: #505050;
    --warn: #909090;
    --warn-bg: #FFF4E5;
    --tip-bg: #E6F4EA;
    --tip: #101010;
    --code-bg: rgba(0, 0, 0, 0.04);
    --code-text: #303030;
	--command: #0055a1;
	--string: #46bf7c;
	--comment: #94a3b8;
    --radius: 6px;
    --font-body: 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Base ───────────────────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    padding: 2rem 1rem 4rem;
}

/* ── Page container ─────────────────────────────────────────────── */
.page {
    max-width: 860px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3rem 3.5rem;
}

/* ── Chapter label ──────────────────────────────────────────────── */
.chapter-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--app-color);
    margin-bottom: .4rem;
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 1.4rem;
}

    .breadcrumb a {
        color: var(--app-color);
        text-decoration: none;
    }

        .breadcrumb a:hover {
            text-decoration: underline;
        }

    .breadcrumb span {
        margin: 0 .35rem;
    }

/* ── Headings ───────────────────────────────────────────────────── */
h2 {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--text);
    border-bottom: 2px solid var(--app-color);
    padding-bottom: .5rem;
    margin-bottom: 1.2rem;
}

h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--app-color);
    margin: 2.2rem 0 .7rem;
    padding-left: .6rem;
    border-left: 3px solid var(--app-color);
}

h4 {
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 1.4rem 0 .4rem;
}

/* ── Paragraphs ─────────────────────────────────────────────────── */
p {
    margin-bottom: .9rem;
}

    p:last-child {
        margin-bottom: 0;
    }

/* ── Intro paragraph ────────────────────────────────────────────── */
.intro {
    font-size: 1rem;
    color: var(--muted);
    border-left: 3px solid var(--border);
    padding-left: 1rem;
    margin-bottom: 2rem;
}

/* ── Inline code ────────────────────────────────────────────────── */
code {
    font-family: var(--font-mono);
    font-size: .875em;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: .1em .35em;
    color: #b45309;
}

/* ── Code blocks ────────────────────────────────────────────────── */
pre {
    /* background: var(--code-bg); */
    color: var(--code-text);
    font-family: var(--font-mono);
    font-size: .855rem;
    line-height: 1.6;
    border-radius: var(--radius);
    padding: 0.8rem 0rem;
    overflow-x: auto;
    margin: .6rem 0 1.2rem;
}

    pre code {
        background: none;
        border: none;
        padding: 0;
        color: inherit;
        font-size: inherit;
    }

    /* Syntax highlighting inside pre */
    pre .c {
        color: var(--comment);
        font-style: italic;
    }
    /* comment  */
    pre .kw {
        color: var(--command);
    }
    /* keyword  */
    pre .s {
        color: var(--string);
    }
/* string   */

/* ── Tables ─────────────────────────────────────────────────────── */
.tbl-wrap {
    overflow-x: auto;
    margin: .6rem 0 1.4rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

thead tr {
    background: var(--surface-alt);
    color: var(--surface-alt-text);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

thead th {
    padding: .55rem .9rem;
    text-align: left;
    font-weight: 600;
}

tbody tr:nth-child(even) {
    background: var(--tr-alt);
}
/* tbody tr:hover           { background: var(--accent-light); } */
tbody td {
    padding: .5rem .9rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

    tbody td:first-child {
        font-weight: 600;
        white-space: nowrap;
    }

/* Centered numeric/monospace cell values (used in thread count tables) */
td.val {
    text-align: center;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--accent);
}

td.val-muted {
    text-align: center;
    font-family: var(--font-mono);
    color: var(--muted);
}

/* ── Callout boxes ──────────────────────────────────────────────── */
.callout {
    border-radius: var(--radius);
    padding: .85rem 1.1rem;
    margin: 1rem 0 1.4rem;
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-size: .93rem;
}

.callout-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1.6;
}

.callout.tip {
    background: var(--tip-bg);
    border-left: 3px solid #059669;
    color: var(--tip);
}

.callout.warn {
    background: var(--warn-bg);
    border-left: 3px solid #d97706;
    color: var(--warn);
}

.callout.info {
    background: var(--accent-light);
    border-left: 3px solid var(--accent);
    color: #1e3a8a;
}

    .callout.tip::before,
    .callout.warn::before,
    .callout.info::before {
        flex-shrink: 0;
        font-size: 1rem;
        line-height: 1.7;
    }

.callout.tip::before {
    content: '💡';
}

.callout.warn::before {
    content: '⚠️';
}

.callout.info::before {
    content: 'ℹ️';
}

/* ── Setting block ──────────────────────────────────────────────── */
.setting-block {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 1.6rem 0;
    overflow: hidden;
}

.setting-header {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    padding: .7rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .8rem;
}

.setting-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    flex: 1;
}

.setting-badge {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .15em .55em;
    border-radius: 3px;
    white-space: nowrap;
}

.badge-toggle {
    background: var(--app-color);
    color: #ffffff;
    border: 1px solid #0055a1;
}

.badge-select {
    background: var(--app-color);
    color: #ffffff;
    border: 1px solid #0055a1;
}

.badge-input {
    background: var(--app-color);
    color: #ffffff;
    border: 1px solid #0055a1;
}

.badge-default {
    background: var(--surface-alt);
    color: var(--muted);
    border: 1px solid var(--border-def);
    font-weight: 400;
}


.setting-body {
    padding: 1rem 1.1rem;
}

    .setting-body p {
        margin-bottom: .7rem;
    }

        .setting-body p:last-child {
            margin-bottom: 0;
        }

/* ── Example grid (filter guide) ───────────────────────────────── */
.example-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
    margin: .8rem 0 1.4rem;
}

.example-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    padding: .2rem .2rem;
}

    .example-card .card-head {
        background: var(--surface-alt);
        /* padding: .45rem .8rem; */
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--muted);
        border-bottom: 1px solid var(--border);
    }

    .example-card pre {
        margin: 0;
        border-radius: 0;
        font-size: .83rem;
    }

    .example-card .card-note {
        /* padding: .35rem .8rem; */
        font-size: .78rem;
        color: var(--muted);
        border-top: 1px solid var(--border);
        font-style: italic;
    }

/* ── Best-practice list ─────────────────────────────────────────── */
.bp-list {
    list-style: none;
    margin: .4rem 0 1.2rem;
    padding: 0;
}

    .bp-list li {
        padding: .45rem .8rem .45rem 2.2rem;
        position: relative;
        border-bottom: 1px solid var(--border);
        font-size: .93rem;
    }

        .bp-list li:last-child {
            border-bottom: none;
        }

        .bp-list li::before {
            content: '✓';
            position: absolute;
            left: .7rem;
            color: #059669;
            font-weight: 700;
        }

/* ── Numbered flow list ─────────────────────────────────────────── */
.flow {
    list-style: none;
    margin: .6rem 0 1.4rem;
    padding: 0;
    counter-reset: flow-counter;
}

    .flow li {
        counter-increment: flow-counter;
        display: flex;
        gap: .9rem;
        align-items: flex-start;
        padding: .6rem 0;
        border-bottom: 1px solid var(--border);
        font-size: .93rem;
    }

        .flow li:last-child {
            border-bottom: none;
        }

        .flow li::before {
            content: counter(flow-counter);
            flex-shrink: 0;
            width: 1.5rem;
            height: 1.5rem;
            background: var(--accent);
            color: #fff;
            border-radius: 50%;
            font-size: .75rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: .15rem;
        }

/* ── Inline badge (used in headings) ────────────────────────────── */
.badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .15em .55em;
    border-radius: 20px;
    margin-left: .4rem;
    vertical-align: middle;
}

    .badge.optional {
        background: #e0f2fe;
        color: #0369a1;
        border: 1px solid #7dd3fc;
    }

    .badge.required {
        background: #fee2e2;
        color: #991b1b;
        border: 1px solid #fca5a5;
    }

/* ── Example card — label-above-content variant ─────────────────── */
/* Used when .example-card contains a <strong> title + free content  */
/* rather than the .card-head + <pre> pattern.                        */
.example-card > strong:first-child {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    padding-bottom: .4rem;
    margin-bottom: .7rem;
}

/* ── Section divider ────────────────────────────────────────────── */
hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2.5rem 0;
}

/* ── Last updated ───────────────────────────────────────────────── */
.last-updated {
    font-size: .8rem;
    color: var(--muted);
    text-align: right;
    margin-top: 2rem;
    padding-top: .6rem;
    border-top: 1px solid var(--border);
}

/* ── Print ──────────────────────────────────────────────────────── */
@media print {
    body {
        background: #fff;
        padding: 0;
    }

    .page {
        border: none;
        border-radius: 0;
        padding: 1.5rem 2rem;
    }
}