/* ── Document pages: About and Changelog (body.rd-page.doc-redesign, tokens from tp_redesign.css) ──
   Both pages keep small inline <style> blocks for layout; everything colored lives here.
   Selectors are longer than the inline ones so they win regardless of load order. */
body.doc-redesign { font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif; color: var(--rd-ink); -webkit-font-smoothing: antialiased; }
body.doc-redesign:not(.has-sidebar) { background: var(--rd-bg); }
html.dark-mode body.doc-redesign:not(.has-sidebar) { background: var(--rd-bg); }
body.doc-redesign .doc-head__inner { max-width: 1100px; padding: 20px 28px 18px; }
body.doc-redesign .doc-main { padding-bottom: 48px; }
body.doc-redesign.has-sidebar .about-wrap,
body.doc-redesign.has-sidebar .cl-wrap { max-width: 860px; padding: 24px 28px 0; margin: 0 auto; box-sizing: border-box; width: 100%; }
body.doc-redesign :is(.about-card, .cl-card),
html.dark-mode body.doc-redesign :is(.about-card, .cl-card) { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 12px; box-shadow: none; color: var(--rd-ink); }
body.doc-redesign.has-sidebar :is(.about-card, .cl-card) { padding: 32px 36px; }
body.doc-redesign :is(.about-card, .cl-card) :is(h1, h2),
html.dark-mode body.doc-redesign :is(.about-card, .cl-card) :is(h1, h2) { color: var(--rd-heading); font-weight: 600; }
body.doc-redesign .about-card h1,
body.doc-redesign .cl-card h1 { font-size: 24px; font-weight: 700; }
body.doc-redesign .about-card h2 { font-size: 18px; margin: 30px 0 8px; }
body.doc-redesign :is(.about-card .tagline, .cl-tagline),
html.dark-mode body.doc-redesign :is(.about-card .tagline, .cl-tagline) { color: var(--rd-muted); }
body.doc-redesign .about-card p,
html.dark-mode body.doc-redesign .about-card p { color: var(--rd-ink-2); font-size: 15px; line-height: 1.7; }
body.doc-redesign .doc-link,
body.doc-redesign .back-link a { color: var(--rd-accent); text-decoration: none; }
body.doc-redesign .doc-link:hover,
body.doc-redesign .back-link a:hover { text-decoration: underline; }
body.doc-redesign .about-card blockquote,
html.dark-mode body.doc-redesign .about-card blockquote { background: var(--rd-accent-soft); border: 1px solid var(--rd-accent-border); color: var(--rd-heading); border-radius: 10px; }

/* About: goal progress + story form */
body.doc-redesign .goal-progress-wrap,
html.dark-mode body.doc-redesign .goal-progress-wrap { background: var(--rd-surface-2); border: 1px solid var(--rd-border); border-radius: 12px; }
body.doc-redesign .goal-progress-label span,
html.dark-mode body.doc-redesign .goal-progress-label span { color: var(--rd-muted); }
body.doc-redesign .goal-progress-label strong,
html.dark-mode body.doc-redesign .goal-progress-label strong { color: var(--rd-heading); }
body.doc-redesign .goal-progress-bar-bg,
html.dark-mode body.doc-redesign .goal-progress-bar-bg { background: var(--rd-border-soft); }
body.doc-redesign .goal-progress-bar-fill { background: var(--rd-accent); }
body.doc-redesign .goal-progress-sub { color: var(--rd-faint); }
body.doc-redesign .story-form-row label,
html.dark-mode body.doc-redesign .story-form-row label,
body.doc-redesign .story-form-checkbox,
html.dark-mode body.doc-redesign .story-form-checkbox { color: var(--rd-ink-2); font-weight: 500; }
body.doc-redesign .story-form-optional { color: var(--rd-faint); }
body.doc-redesign .story-form-row :is(input[type="text"], input[type="email"], textarea),
html.dark-mode body.doc-redesign .story-form-row :is(input[type="text"], input[type="email"], textarea) { background: var(--rd-surface); border: 1px solid var(--rd-input-border); color: var(--rd-ink); border-radius: 8px; }
body.doc-redesign .story-form-row :is(input, textarea):focus { outline: none; border-color: var(--rd-accent); box-shadow: 0 0 0 3px var(--rd-accent-ring); }
body.doc-redesign .story-form-actions button { background: var(--rd-accent); border-radius: 8px; font-family: inherit; }
body.doc-redesign .story-form-actions button:hover:not(:disabled) { background: var(--rd-accent-hover); }

/* Changelog */
body.doc-redesign .cl-month,
html.dark-mode body.doc-redesign .cl-month { color: var(--rd-faint); font-size: 12px; letter-spacing: .06em; }
body.doc-redesign .changelog li,
html.dark-mode body.doc-redesign .changelog li { border-bottom-color: var(--rd-border-soft); color: var(--rd-ink-2); }
body.doc-redesign .cl-date,
html.dark-mode body.doc-redesign .cl-date { color: var(--rd-faint); }
body.doc-redesign .cl-tag--feature,
html.dark-mode body.doc-redesign .cl-tag--feature { background: var(--rd-success-soft); color: var(--rd-success-ink); }
body.doc-redesign .cl-tag--fix,
html.dark-mode body.doc-redesign .cl-tag--fix { background: #fff6e5; color: var(--rd-warn-ink); }
html.dark-mode body.doc-redesign .cl-tag--fix { background: #33260f; }
body.doc-redesign .cl-tag--improvement,
html.dark-mode body.doc-redesign .cl-tag--improvement { background: var(--rd-accent-soft); color: var(--rd-accent); }
body.doc-redesign .cl-pager__btn,
html.dark-mode body.doc-redesign .cl-pager__btn { background: var(--rd-surface); border-color: var(--rd-input-border); color: var(--rd-ink); font-family: inherit; }
body.doc-redesign .cl-pager__btn:hover:not(:disabled),
html.dark-mode body.doc-redesign .cl-pager__btn:hover:not(:disabled) { background: var(--rd-accent-soft); border-color: var(--rd-accent); color: var(--rd-accent); }
body.doc-redesign .cl-pager__label,
html.dark-mode body.doc-redesign .cl-pager__label { color: var(--rd-muted); }

@media (max-width: 720px) {
    body.doc-redesign .doc-head__inner { padding: 16px; }
    body.doc-redesign.has-sidebar .about-wrap,
    body.doc-redesign.has-sidebar .cl-wrap { padding: 16px 12px 0; }
    body.doc-redesign.has-sidebar :is(.about-card, .cl-card) { padding: 22px 18px; }
}