@import "../../shared/doc-toc.css";
/* =============================================================================
    public/src/features/documents/documents.css 
    Combined styles used by both, `privacy-policy.html` and `terms-of-service.html`
   ============================================================================= */

/* ─────────────────────────────────────────
    TOKENS
───────────────────────────────────────── */
:root {
    --ink: #111827;
    --ink-soft: #374151;
    --ink-muted: #6b7280;
    --ink-faint: #9ca3af;
    --rule: #e5e7eb;
    --rule-heavy: #d1d5db;
    --bg: #ffffff;
    --bg-wash: #f9fafb;
    --bg-tint: #f3f4f6;
    --accent: #1a1a2e;
    --accent-mid: #2d2f4a;
    --accent-sub: #4b4e6d;

    /* footer */
    --ft-bg: #1e1e1e;
    --ft-text: #d1d5db;
    --ft-muted: #6b7280;
    --ft-hover: #ffffff;
    --ft-rule: #2a2a2a;

    --radius: 6px;
    --radius-sm: 4px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
}

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

html {
    scroll-behavior: smooth;
}

html,
body {
    background-color: var(--color-background, var(--bg));
}

body {
    background-color: transparent;
    color: var(--ink);
    font-family: "IBM Plex Sans Arabic", "Noto Naskh Arabic", serif;
    line-height: 1.85;
    padding-right: calc(var(--sidebar-collapsed-width) + 16px);
    transition: padding-right 250ms cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-font-smoothing: antialiased;
}

body.sidebar-expanded {
    padding-right: calc(var(--sidebar-expanded-width) + 16px);
}

html[data-theme="dark"] body,
html[data-theme="dark-slate"] body {
    --ink: var(--color-text-primary);
    --ink-soft: var(--color-text-secondary);
    --ink-muted: var(--color-text-tertiary);
    --ink-faint: var(--color-text-tertiary);
    --rule: var(--color-border);
    --rule-heavy: var(--color-border-light, var(--color-border));
    --bg: var(--color-background);
    --bg-wash: var(--color-background-secondary);
    --bg-tint: var(--color-surface);
    --accent: var(--color-primary);
    --accent-mid: var(--color-primary-hover);
    --accent-sub: var(--color-accent);
    --ft-bg: var(--color-surface);
    --ft-rule: var(--color-border);
}

/* ─────────────────────────────────────────
    TOP ACCENT BAR / READING PROGRESS
───────────────────────────────────────── */
.top-bar {
    position: sticky;
    top: 0;
    z-index: var(--z-above, 10);
    height: 3px;
    width: calc(100% + var(--sidebar-collapsed-width) + 16px);
    margin-right: calc(-1 * (var(--sidebar-collapsed-width) + 16px));
    background: var(--rule-heavy);
    overflow: hidden;
    transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1),
        margin-right 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-expanded .top-bar {
    width: calc(100% + var(--sidebar-expanded-width) + 16px);
    margin-right: calc(-1 * (var(--sidebar-expanded-width) + 16px));
}

/* The decorative gradient now lives on a fill bar whose width (via
   transform: scaleX) is driven by scroll progress (see
   documents-shell.js) instead of the bar itself, so it starts empty at
   the top of a doc and fills in as the reader scrolls through the content,
   reaching full width once they've reached the end. */
.top-bar-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: white;
    transform-origin: right center;
    transform: scaleX(0);
    transition: transform 0.1s linear;
}

html[dir="ltr"] .top-bar-fill {
    transform-origin: left center;
}

html[data-motion="reduced"] .top-bar-fill {
    transition: none;
}

/* ─────────────────────────────────────────
    PAGE WRAPPER
───────────────────────────────────────── */
.page-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 64px 28px 80px;
}

/* ─────────────────────────────────────────
    HEADER
───────────────────────────────────────── */
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 40px;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--rule-heavy);
}

.logo-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.logo-mark {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.brand-name {
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--ink-muted);
    text-transform: uppercase;
}

.doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-tint);
    border: 1px solid var(--rule-heavy);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.72rem;
    font-family: "IBM Plex Sans Arabic", sans-serif;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}

.doc-badge::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-sub);
    flex-shrink: 0;
}

h1 {
    font-family: "Noto Naskh Arabic", serif;
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 18px;
}

.doc-meta {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.doc-meta span {
    font-size: 0.78rem;
    font-family: "IBM Plex Sans Arabic", sans-serif;
    color: var(--ink-muted);
    background: var(--bg-wash);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 3px 12px;
}

/* ─────────────────────────────────────────
    INTRO
───────────────────────────────────────── */
.intro {
    font-size: 1rem;
    color: var(--ink-soft);
    margin-bottom: 48px;
    padding: 20px 22px;
    border-right: 3px solid var(--accent);
    background-color: var(--bg-wash);
    border-radius: 0 var(--radius) var(--radius) 0;
    line-height: 1.9;
}

.intro strong {
    color: var(--ink);
    font-weight: 600;
}

/* ─────────────────────────────────────────
    SECTIONS
───────────────────────────────────────── */
.section {
    margin-bottom: 44px;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--rule);
}

.section:last-of-type {
    border-bottom: none;
}

h2 {
    font-family: "Noto Naskh Arabic", serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--accent-sub);
    background: var(--bg-tint);
    border: 1px solid var(--rule-heavy);
    border-radius: 20px;
    padding: 2px 10px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

p {
    color: var(--ink-soft);
    font-size: 0.97rem;
    margin-bottom: 14px;
    text-align: justify;
    line-height: 1.9;
}

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

ul {
    margin-right: 4px;
    padding-right: 20px;
    color: var(--ink-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

li {
    font-size: 0.97rem;
    line-height: 1.75;
    padding-right: 6px;
}

li::marker {
    color: var(--accent);
}

li strong {
    color: var(--ink);
    font-weight: 600;
}

/* ─────────────────────────────────────────
    FOOTER
───────────────────────────────────────── */
.site-footer {
    background-color: var(--ft-bg);
    color: var(--ft-text);
    margin-top: 0;
    /* Extend the footer background through the page-owned sidebar inset. */
    margin-right: calc(-1 * (var(--sidebar-collapsed-width, 64px) + 16px));
    /* The negative margin above only re-extends the footer's background
       under the sidebar's reserved rail — without pushing the content back
       in by the same amount, the footer's own content (links, columns)
       would be the thing sitting under the fixed sidebar, not just the
       background. This padding restores the content's right boundary to
       the sidebar's edge while the background still bleeds under it. */
    padding-right: calc(var(--sidebar-collapsed-width, 64px) + 16px);
    transition: margin-right 250ms cubic-bezier(0.4, 0, 0.2, 1),
        padding-right 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-expanded .site-footer {
    margin-right: calc(-1 * (var(--sidebar-expanded-width, 240px) + 16px));
    padding-right: calc(var(--sidebar-expanded-width, 240px) + 16px);
}

@media (max-width: 768px) {

    .site-footer,
    body.sidebar-expanded .site-footer {
        /* side-menu.css collapses to a flat 16px padding-right !important
           on mobile regardless of expanded state, so the compensation
           must match that flat value instead of the desktop rail width. */
        margin-right: -16px;
        padding-right: 16px;
    }

    body,
    body.sidebar-expanded {
        padding-right: 0;
        padding-bottom: calc(var(--bottom-nav-height, 54px) + env(safe-area-inset-bottom, 0px) + 16px);
    }

    body .top-bar,
    body.sidebar-expanded .top-bar {
        width: calc(100% + 16px);
        margin-right: -16px;
    }
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 28px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--ft-rule);
    padding-bottom: 48px;
}

.footer-col {
    padding: 0 32px;
    border-right: 1px solid var(--ft-rule);
}

.footer-col:first-child {
    padding-right: 3;
}

.footer-col-label {
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ft-muted);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ft-rule);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-links li {
    margin: 0;
    padding: 0;
}

.footer-links li::marker {
    display: none;
    content: "";
}

.footer-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ft-text);
    text-decoration: none;
    font-size: 0.88rem;
    font-family: "IBM Plex Sans Arabic", sans-serif;
    padding: 7px 0;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease;
    line-height: 1.3;
}

.footer-links a:hover {
    color: var(--ft-hover);
}

.footer-links a:hover .ft-icon {
    opacity: 1;
}

.ft-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

/* ─── Footer Bottom Bar ─── */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 28px;
    max-width: 1100px;
    margin: 0 auto;
}

.footer-bottom-outer {
    border-top: 1px solid var(--ft-rule);
}

.copyright {
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 0.78rem;
    color: var(--ft-muted);
    line-height: 1.6;
}

.footer-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid #374151;
    color: var(--ft-text);
    padding: 8px 20px;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 500;
    font-family: "IBM Plex Sans Arabic", sans-serif;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.footer-back-btn:hover {
    background: #1f2937;
    border-color: #4b5563;
    color: #ffffff;
}

/* ─────────────────────────────────────────
    PRINT
───────────────────────────────────────── */
@media print {

    .top-bar,
    .site-footer {
        display: none;
    }

    body {
        color: #000;
    }

    .page-wrapper {
        padding: 20px;
    }
}

/* ─────────────────────────────────────────
    REDUCED MOTION
───────────────────────────────────────── */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
    transition: none !important;
}

/* ─────────────────────────────────────────
    MOBILE
───────────────────────────────────────── */
@media (max-width: 680px) {
    .page-wrapper {
        padding: 40px 18px 84px;
    }

    h1 {
        font-size: 1.65rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-bottom: 36px;
    }

    .footer-col {
        padding: 0;
        border-right: none;
        border-bottom: 1px solid var(--ft-rule);
        padding-bottom: 28px;
    }

    .footer-col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .footer-inner {
        padding: 40px 20px 0;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
}

/* ─────────────────────────────────────────
    VIDEO GUIDE EMBED CARD (.doc-video-card)
───────────────────────────────────────── */
.doc-video-card {
    margin: 0 0 44px;
    padding: 24px;
    border: 1px solid var(--rule-heavy);
    border-radius: 18px;
    background: var(--bg-wash);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .04);
}

.doc-video-card__head {
    margin-bottom: 16px;
}

.doc-video-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--rule));
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.doc-video-card__badge svg {
    width: 14px;
    height: 14px;
}

.doc-video-card h2 {
    font-size: 1.25rem;
    margin-bottom: 8px;
    gap: 8px;
}

.doc-video-card__desc {
    font-size: 0.92rem;
    color: var(--ink-soft);
    margin-bottom: 0;
    line-height: 1.6;
}

.doc-video-card__player-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
    margin: 16px 0 20px;
}

.doc-video-card__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.doc-video-card__chapters {
    padding-top: 16px;
    border-top: 1px solid var(--rule);
}

.doc-video-card__chapters-title {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px;
}

.doc-video-card__timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.doc-video-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.doc-video-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg));

}

.doc-video-chip.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

.doc-video-chip__time {
    font-family: monospace;
    font-size: 0.76rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.doc-video-chip.is-active .doc-video-chip__time {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

@media (max-width: 640px) {
    .doc-video-card {
        padding: 16px;
        margin-bottom: 36px;
        border-radius: 14px;
    }

    .doc-video-chip {
        font-size: 0.76rem;
        padding: 4px 10px;
    }
}


/* ─────────────────────────────────────────
    SUB-HEADINGS, NUMBERED LISTS & INLINE CODE (inside .section)
    Used by how-to-use-ai-agent / how-to-create-content. The global reset
    zeroes every margin/padding, so <ol>, <h3> and <code> need explicit rules
    or numbers sit outside the text column and subheadings touch the
    paragraph above them.
───────────────────────────────────────── */
.section h3 {
    font-family: "Noto Naskh Arabic", serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink);
    margin: 30px 0 12px;
    padding-right: 12px;
    border-right: 3px solid var(--accent);
    line-height: 1.6;
}

.section h2+p+h3,
.section h2+h3 {
    margin-top: 22px;
}

.section ol {
    margin-right: 4px;
    padding-right: 26px;
    color: var(--ink-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section ol li::marker {
    color: var(--accent);
    font-weight: 700;
}

.section ul+p,
.section ol+p,
.section ul+.doc-download-card,
.section p+.doc-download-card,
.section p+.doc-video-card {
    margin-top: 16px;
}

.section code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82em;
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    max-width: 100%;
    padding: 1px 8px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--bg-tint);
    color: var(--ink);
    line-height: 1.7;
    overflow-wrap: anywhere;
    vertical-align: baseline;
}

/* Video card inside a section uses h3 (the section owns the h2) */
.doc-video-card h3 {
    font-family: "Noto Naskh Arabic", serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
    padding: 0;
    border: 0;
}

.section .doc-video-card {
    margin: 0 0 8px;
}

.doc-video-card__note {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--ink-muted);
    line-height: 1.6;
}

/* ─────────────────────────────────────────
    DOWNLOAD CARD (.doc-download-card)
    A downloadable file with a short "what's in it" list and one button.
───────────────────────────────────────── */
.doc-download-card {
    margin: 0;
    padding: 24px;
    border: 1px solid var(--rule-heavy);
    border-radius: 18px;
    background: var(--bg-wash);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .04);
}

.doc-download-card__head {
    margin-bottom: 14px;
}

.doc-download-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--rule));
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
}

.doc-download-card__title {
    font-family: "Noto Naskh Arabic", serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.6;
    margin-bottom: 6px;
}

.doc-download-card__desc {
    font-size: 0.93rem;
    line-height: 1.7;
    margin-bottom: 0;
    text-align: start;
}

.doc-download-card__list {
    list-style: none;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--rule);
    gap: 12px;
}

.doc-download-card__list li {
    position: relative;
    padding: 0 22px 0 0;
    font-size: 0.93rem;
    line-height: 1.7;
}

.doc-download-card__list li::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.doc-download-card__list li strong {
    display: block;
    color: var(--ink);
}

.doc-download-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}

.doc-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.doc-download-btn:hover {
    background: var(--accent-mid);

    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

.doc-download-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.doc-download-card__meta {
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.doc-download-card__meta bdi {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    direction: ltr;
}

.doc-download-card__hint {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.84rem;
    color: var(--ink-muted);
    line-height: 1.7;
    text-align: start;
}

@media (max-width: 640px) {
    .doc-download-card {
        padding: 16px;
        border-radius: 14px;
    }

    .doc-download-btn {
        width: 100%;
        justify-content: center;
    }
}

@media print {
    .doc-download-btn {
        display: none;
    }
}