/* Help page styles - Minimal design for app-like help */

/* Reset and base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 17px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    color: #333;
    background-color: #fafafa;
}

/* Header */
.help-header {
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.help-header-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.help-logo {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

.help-logo:hover {
    color: #0066cc;
}

.help-nav {
    display: flex;
    gap: 1.25rem;
    font-size: 0.9rem;
}

.help-nav a {
    color: #555;
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.help-nav a:hover {
    color: #0066cc;
    border-bottom-color: #0066cc;
}

.help-lang-switch {
    display: flex;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.help-lang-switch a {
    color: #0066cc;
    text-decoration: none;
}

.help-lang-switch a:hover {
    text-decoration: underline;
}

.help-lang-switch .current {
    color: #666;
}

/* Main content area */
.help-main {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem;
    background-color: #fff;
    min-height: calc(100vh - 120px);
}

@media (max-width: 600px) {
    .help-main {
        padding: 1.5rem 1rem;
    }
}

/* Help intro section */
.help-intro {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e5e5;
}

.help-intro h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 0.3rem;
}

.help-intro p {
    margin: 0.2rem 0;
    color: #555;
    font-size: 0.95rem;
}

.help-lang-note {
    margin-top: 1rem !important;
    padding: 0.75rem 1rem;
    background-color: #f0f7ff;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #333;
}

.help-lang-note a {
    color: #0066cc;
    font-weight: 500;
}

/* Partial language availability indicator */
.help-lang-switch a.lang-partial {
    color: #888;
    font-style: italic;
}

.help-lang-switch a.lang-partial::after {
    content: "*";
    font-size: 0.75em;
    vertical-align: super;
}

/* Footer */
.help-footer {
    text-align: center;
    padding: 1.5rem 1rem;
    color: #666;
    border-top: 1px solid #e5e5e5;
    background-color: #fff;
}

.help-footer a {
    color: #0066cc;
    text-decoration: none;
}

.help-footer a:hover {
    text-decoration: underline;
}

/* Notion content overrides */
.notion-content {
    line-height: 1.5;
    white-space: normal;
    font-size: 1.05rem;
}

.notion-content p {
    margin: 0.5em 0;
    white-space: normal;
}

/* Images - prevent overflow from Notion fixed widths */
.notion-content img {
    max-width: 100% !important;
    height: auto !important;
}

.notion-content img[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
}

.notion-content figure {
    margin: 1em 0;
}

.notion-content figure.image {
    text-align: center;
}

/* Typography */
.notion-content h1,
.notion-content h2,
.notion-content h3 {
    line-height: 1.25;
    font-weight: 600;
    margin-top: 1.25em;
    margin-bottom: 0.4em;
    color: #222;
}

.notion-content .page-title,
.notion-content h1.page-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.75em;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 0.4em;
}

.notion-content h2 {
    font-size: 1.4rem;
    margin-top: 1.5em;
}

.notion-content h3 {
    font-size: 1.15rem;
    margin-top: 1.25em;
}

.notion-content h4 {
    font-size: 1.05rem;
    margin-top: 1em;
    margin-bottom: 0.3em;
}

/* Links */
.notion-content a {
    color: #0066cc;
    text-decoration: none;
}

.notion-content a:hover {
    text-decoration: underline;
}

/* Lists */
.notion-content ol,
.notion-content ul {
    padding-left: 1.5em;
    margin: 0.4em 0;
}

.notion-content li {
    margin: 0.15em 0;
}

/* Blockquotes */
.notion-content blockquote {
    margin: 1em 0;
    padding: 0.5em 1em;
    border-left: 3px solid #ddd;
    color: #555;
    background-color: #f9f9f9;
}

/* Code and pre */
.notion-content code {
    font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
    font-size: 0.875em;
    background-color: #f4f4f4;
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

.notion-content pre {
    overflow-x: auto;
    background-color: #f4f4f4;
    padding: 1em;
    border-radius: 4px;
}

.notion-content pre code {
    background: none;
    padding: 0;
}

/* Tables */
.notion-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    overflow-x: auto;
    display: block;
}

.notion-content th,
.notion-content td {
    border: 1px solid #ddd;
    padding: 0.5em 0.75em;
    text-align: left;
}

.notion-content th {
    background-color: #f4f4f4;
    font-weight: 600;
}

/* Link to page (back button style) */
.notion-content .link-to-page {
    margin: 2em 0 1em;
    padding: 0;
}

.notion-content .link-to-page a {
    display: inline-flex;
    align-items: center;
    color: #0066cc;
    font-weight: 500;
}

/* Horizontal rule */
.notion-content hr {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 2em 0;
}

/* Numbered list styling fix for Notion exports */
.notion-content .numbered-list {
    list-style: decimal;
    padding-left: 1.5em;
}

/* Sans class from Notion */
.notion-content .sans {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Tip and Warning boxes */
.tip-box,
.warning-box {
    margin: 0.6rem 0;
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    font-size: 0.9rem;
}

.tip-box {
    background-color: #f0f7ff;
    border-left: 4px solid #0066cc;
}

.tip-box p,
.warning-box p {
    margin: 0;
}

.warning-box {
    background-color: #fff8e6;
    border-left: 4px solid #f5a623;
}

/* Better heading styling for step headings */
.notion-content h2[id^="step-"] {
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e5e5;
    color: #0066cc;
}

.notion-content h2[id^="step-"]:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ------------------------------------------------------- */
/* Help article rhythm normalization (Notion export fixes) */
/* Scoped to help layout only to avoid side effects.       */
/* ------------------------------------------------------- */

.help-main .notion-content {
    font-size: clamp(1rem, 0.98rem + 0.16vw, 1.06rem);
    line-height: 1.7;
    color: #2e3339;
    white-space: normal;
}

/* Notion sometimes injects display:contents / pre-wrap via inline style. */
.help-main .notion-content .page-body>div[style*="display:contents"] {
    display: block !important;
}

.help-main .notion-content .page-body,
.help-main .notion-content .page-body>div,
.help-main .notion-content p {
    white-space: normal !important;
}

.help-main .notion-content .page-body>div {
    margin: 0;
}

/* Keep paragraph rhythm stable between sections. */
.help-main .notion-content p {
    margin: 0.75em 0;
}

.help-main .notion-content .page-body>div> :first-child {
    margin-top: 0;
}

.help-main .notion-content .page-body>div> :last-child {
    margin-bottom: 0;
}

/* Section headers: stronger separation for h2, tighter for h3/h4. */
.help-main .notion-content h2 {
    margin-top: 2.15rem;
    margin-bottom: 0.55rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #e4e8ef;
    line-height: 1.28;
}

.help-main .notion-content h3 {
    margin-top: 1.35rem;
    margin-bottom: 0.32rem;
    line-height: 1.3;
}

.help-main .notion-content h4 {
    margin-top: 1.05rem;
    margin-bottom: 0.24rem;
    line-height: 1.35;
    color: #374252;
}

.help-main .notion-content :is(h2, h3, h4)+p {
    margin-top: 0.45em;
}

/* Step headings are a navigation anchor in setup guides. */
.help-main .notion-content h2[id^="step-"] {
    color: #0f66c3;
    font-weight: 700;
    margin-top: 2.35rem;
    padding-top: 0;
    border-top: none;
}

.help-main .notion-content h2[id^="step-"]:first-of-type {
    margin-top: 0.8rem;
}

/* Screenshot presentation: centered, consistent spacing, app-like frame. */
.help-main .notion-content figure,
.help-main .notion-content figure.image {
    margin: 1rem auto;
}

.help-main .notion-content figure.image>a {
    display: block;
    max-width: 720px;
    margin: 0 auto;
}

.help-main .notion-content figure.image img,
.help-main .notion-content img[style*="width"] {
    display: block;
    width: auto !important;
    /* neutralize Notion's inline width */
    max-width: min(100%, 720px) !important;
    height: auto !important;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid #d9e1ea;
    background-color: #fff;
}

.help-main .notion-content figure.image+figure.image {
    margin-top: 1rem;
}

/* Tip/Warning: visible but calm. */
.help-main .notion-content .tip-box,
.help-main .notion-content .warning-box {
    margin: 0.9rem 0;
    padding: 0.68rem 0.82rem;
    border-radius: 8px;
    border: 1px solid #dce4ee;
    border-left-width: 4px;
    font-size: 0.93rem;
    line-height: 1.58;
}

.help-main .notion-content .tip-box {
    background-color: #f5f9ff;
    border-left-color: #5b8fcc;
}

.help-main .notion-content .warning-box {
    background-color: #fff9ef;
    border-color: #efe3cf;
    border-left-color: #d2a35a;
}