/* HELP CENTER — hub category grid + article template.
   Loaded only by /help pages (alongside styles.css). */

/* ---------- Hub ---------- */
.help-hub-hero {
    padding: 160px 0 8px;
}

.help-hub-hero h1 {
    font-family: 'Instrument Serif', serif;
    font-size: 64px;
    font-weight: 300;
    line-height: 68px;
    letter-spacing: -1px;
    color: var(--help-heading, rgb(10, 10, 10));
}

.help-hub-sub {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 26px;
    color: var(--help-muted, rgba(10, 10, 10, 0.65));
    margin: 20px 0 0;
    max-width: 620px;
}

.help-hub {
    padding: 24px 0 96px;
}

.help-cats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 48px;
    row-gap: 64px;
    border-top: 1px solid var(--help-line, rgba(10, 10, 10, 0.1));
    margin-top: 32px;
    padding-top: 56px;
}

.help-cat {
    display: block;
    text-decoration: none;
}

.help-cat > i {
    display: block;
    font-size: 30px;
    color: var(--help-accent, rgb(10, 10, 10));
    margin-bottom: 18px;
}

.help-cat h2 {
    font-family: 'Instrument Serif', serif;
    font-size: 26px;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: -0.2px;
    margin: 0 0 10px;
    color: var(--help-heading, rgb(10, 10, 10));
    transition: color 0.15s ease;
}

.help-cat:hover h2 {
    color: var(--help-accent, rgb(10, 10, 10));
}

.help-cat-desc {
    font-size: 14px;
    line-height: 21px;
    color: var(--help-muted, rgba(10, 10, 10, 0.6));
    margin: 0;
}

.help-cat-count {
    font-size: 13px;
    color: var(--help-dim, rgba(10, 10, 10, 0.4));
    margin: 12px 0 0;
}

/* ---------- Category page ---------- */
.help-catpage {
    max-width: 860px;
    padding: 128px 0 96px;
}

.help-catpage-icon {
    display: block;
    font-size: 34px;
    color: var(--help-accent, rgb(10, 10, 10));
    margin-bottom: 18px;
}

.help-catpage h1 {
    font-family: 'Instrument Serif', serif;
    font-size: 48px;
    font-weight: 300;
    line-height: 54px;
    letter-spacing: -0.6px;
    margin: 0 0 14px;
    color: var(--help-heading, rgb(10, 10, 10));
}

.help-catpage-sub {
    font-size: 16px;
    line-height: 25px;
    color: var(--help-muted, rgba(10, 10, 10, 0.65));
    margin: 0;
}

.help-catpage-count {
    color: var(--help-dim, rgba(10, 10, 10, 0.4));
    white-space: nowrap;
}

.help-cat-list {
    margin-top: 48px;
    border-top: 1px solid var(--help-line, rgba(10, 10, 10, 0.1));
}

.help-cat-row {
    display: block;
    padding: 36px 0;
    border-bottom: 1px solid var(--help-line, rgba(10, 10, 10, 0.1));
    text-decoration: none;
}

.help-cat-row h2 {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 25px;
    margin: 0 0 8px;
    color: var(--help-heading, rgb(10, 10, 10));
    transition: color 0.15s ease;
}

.help-cat-row:hover h2 {
    color: var(--help-accent, rgb(10, 10, 10));
}

/* One-line truncated lede */
.help-cat-row p {
    font-size: 14px;
    line-height: 21px;
    color: var(--help-muted, rgba(10, 10, 10, 0.6));
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1100px) {
    .help-cats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .help-hub-hero h1 {
        font-size: 42px;
        line-height: 46px;
    }
    .help-cats {
        grid-template-columns: 1fr;
        row-gap: 44px;
        padding-top: 40px;
    }
    .help-catpage {
        padding-top: 112px;
    }
    .help-catpage h1 {
        font-size: 36px;
        line-height: 42px;
    }
}

/* ---------- Article template ---------- */
/* Colour tokens — light defaults here, overridden dark under body.help-dark.
   Declared on the layout wrapper so both the article and the related rail
   inherit them. */
.help-layout {
    --help-heading: rgb(10, 10, 10);
    --help-text: rgba(10, 10, 10, 0.85);
    --help-muted: rgba(10, 10, 10, 0.65);
    --help-dim: rgba(10, 10, 10, 0.5);
    --help-eyebrow: rgba(10, 10, 10, 0.45);
    --help-line: rgba(10, 10, 10, 0.1);
    --help-accent: rgb(10, 10, 10);
    --help-accent-soft: rgba(10, 10, 10, 0.05);
    --help-panel: rgba(10, 10, 10, 0.02);
    --help-panel-line: rgba(10, 10, 10, 0.14);
    --help-btn-bg: rgb(254, 254, 252);

    display: grid;
    grid-template-columns: minmax(0, 760px);
    padding-top: 128px;
}

.help-article {
    max-width: 760px;
    padding: 0 0 96px;
}

/* Sticky related rail — desktop only; the grid grows a second column. */
.help-rail {
    display: none;
}

@media (min-width: 1160px) {
    .help-layout {
        grid-template-columns: minmax(0, 760px) 264px;
        column-gap: 96px;
        /* Push the rail to the container's right edge */
        justify-content: space-between;
    }
    .help-rail {
        display: block;
    }
}

.help-related {
    position: sticky;
    top: 148px;
    padding-left: 28px;
    border-left: 1px solid var(--help-line);
}

.help-related h2 {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--help-eyebrow);
    margin: 0 0 16px;
}

.help-related ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.help-related li {
    margin: 0 0 12px;
}

.help-related li a {
    display: block;
    font-size: 13.5px;
    line-height: 20px;
    color: var(--help-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.help-related li a:hover {
    color: var(--help-heading);
}

.help-related-all {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--help-dim);
    text-decoration: none;
    transition: color 0.15s ease;
}

.help-related-all:hover {
    color: var(--help-accent);
}

.help-breadcrumb {
    /* Reset the global `nav { padding: 24px; justify-content: space-between }`
       rule (meant for the header) — that was the indent + the wide gaps. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    max-width: none;
    margin: 0 0 36px;
    padding: 0;
    font-size: 13px;
}

.help-breadcrumb a {
    color: var(--help-dim);
    text-decoration: none;
    transition: color 0.15s ease;
}

.help-breadcrumb a:hover {
    color: var(--help-accent);
}

.help-breadcrumb .help-sep {
    margin: 0 9px;
    color: var(--help-dim);
    font-size: 15px;
    line-height: 1;
    transform: translateY(-0.5px);
}

/* Current page — brighter and non-interactive, so hierarchy reads at a glance. */
.help-breadcrumb .help-current {
    color: var(--help-muted);
}

.help-article h1 {
    font-family: 'Instrument Serif', serif;
    font-size: 44px;
    font-weight: 300;
    line-height: 50px;
    letter-spacing: -0.5px;
    margin: 0 0 20px;
    color: var(--help-heading);
}

.help-lede {
    font-size: 18px;
    line-height: 28px;
    color: var(--help-muted);
    margin: 0;
}

/* Roomy, even rhythm between the how / tips / prompt subsections. */
.help-section {
    margin-top: 88px;
}

.help-section h2 {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--help-eyebrow);
    margin: 0 0 26px;
}

.help-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: help-step;
}

.help-steps li {
    position: relative;
    padding: 0 0 22px 36px;
    counter-increment: help-step;
    font-size: 16px;
    line-height: 25px;
    color: var(--help-text);
}

.help-steps li:last-child {
    padding-bottom: 0;
}

.help-steps li::before {
    content: counter(help-step);
    position: absolute;
    left: 0;
    top: 0;
    min-width: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--help-accent);
}

.help-tips {
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-tips li {
    position: relative;
    padding: 0 0 12px 24px;
    font-size: 16px;
    line-height: 25px;
    color: var(--help-text);
}

.help-tips li:last-child {
    padding-bottom: 0;
}

.help-tips li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--help-accent);
}

.help-prompt {
    position: relative;
    border: 1px solid var(--help-panel-line);
    border-left: 2px solid var(--help-accent);
    border-radius: 6px;
    background: var(--help-panel);
    padding: 20px 26px 24px 28px;
}

.help-prompt + .help-prompt {
    margin-top: 16px;
}

/* Simple / Advanced chip above each prompt */
.help-prompt-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--help-dim);
    margin-bottom: 12px;
}

/* Rendered as a literal prompt: monospace, with a terminal-style caret,
   so it reads as something to paste rather than another paragraph. */
.help-prompt p {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    line-height: 23px;
    color: var(--help-text);
    margin: 0;
    max-width: 600px;
}

.help-prompt p::before {
    content: "\203A";
    color: var(--help-accent);
    font-weight: 600;
    margin-right: 10px;
}

.help-copy {
    position: absolute;
    top: 12px;
    right: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--help-muted);
    background: var(--help-btn-bg);
    border: 1px solid var(--help-line);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.help-copy:hover {
    color: var(--help-accent);
    border-color: var(--help-accent);
}

/* FAQ — set apart as its own block: a divider above it, extra air, and a
   full section-level serif heading rather than another eyebrow label. */
.help-faq-section {
    margin-top: 120px;
    padding-top: 60px;
    border-top: 1px solid var(--help-line);
}

.help-faq-section > h2 {
    font-family: 'Instrument Serif', serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 34px;
    letter-spacing: -0.3px;
    text-transform: none;
    color: var(--help-heading);
    margin: 0 0 24px;
}

.help-faq-item {
    border-top: 1px solid var(--help-line);
    padding: 22px 0;
}

.help-faq-item:last-child {
    border-bottom: 1px solid var(--help-line);
}

.help-faq-q {
    font-size: 16px;
    font-weight: 500;
    color: var(--help-heading);
    margin: 0 0 8px;
}

.help-faq-a {
    font-size: 15px;
    line-height: 24px;
    color: var(--help-muted);
    margin: 0;
}

@media (max-width: 700px) {
    .help-layout {
        padding-top: 112px;
    }
    .help-article h1 {
        font-size: 34px;
        line-height: 40px;
    }
    .help-lede {
        font-size: 16px;
        line-height: 25px;
    }
    .help-section {
        margin-top: 68px;
    }
    .help-faq-section {
        margin-top: 92px;
        padding-top: 48px;
    }
}

/* ---------- Dark theme (hub + article template) ---------- */
/* Tokens at body level so the hub (which has no .help-layout wrapper)
   inherits them; the .help-layout blocks re-declare for the article. */
body.help-dark {
    --help-heading: #ffffff;
    --help-text: rgba(255, 255, 255, 0.82);
    --help-muted: rgba(255, 255, 255, 0.62);
    --help-dim: rgba(255, 255, 255, 0.42);
    --help-eyebrow: #7cf5c5;
    --help-line: rgba(255, 255, 255, 0.12);
    --help-accent: #7cf5c5;
    --help-accent-soft: rgba(124, 245, 197, 0.1);
    --help-panel: #111827;
    --help-panel-line: rgba(255, 255, 255, 0.1);
    --help-btn-bg: rgba(255, 255, 255, 0.06);

    background: #0a0d1a;
}

/* Subtle dot grid — texture only, matches the architecture page. */
body.help-dark .help-grid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
}

body.help-dark .fade-section {
    position: relative;
    z-index: 1;
}

body.help-dark .help-layout {
    --help-heading: #ffffff;
    --help-text: rgba(255, 255, 255, 0.82);
    --help-muted: rgba(255, 255, 255, 0.62);
    --help-dim: rgba(255, 255, 255, 0.42);
    --help-eyebrow: #7cf5c5;
    --help-line: rgba(255, 255, 255, 0.12);
    --help-accent: #7cf5c5;
    --help-accent-soft: rgba(124, 245, 197, 0.1);
    --help-panel: #111827;
    --help-panel-line: rgba(255, 255, 255, 0.1);
    --help-btn-bg: rgba(255, 255, 255, 0.06);
}

/* Header inversion (shared partial) — mirrors body.arch-page. */
body.help-dark #header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    background: rgba(10, 13, 26, 0.90);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.help-dark #header nav a,
body.help-dark #header nav button {
    color: #ffffff;
}

body.help-dark #header nav a:hover {
    opacity: 0.7;
}

body.help-dark .logo-mark--dark {
    display: none !important;
}

body.help-dark .logo-mark--light {
    display: inline !important;
}

body.help-dark #header .cta-btn,
body.help-dark footer .cta-btn {
    background: #ffffff;
    color: #0a0d1a;
    border-color: #ffffff;
}

body.help-dark #header .cta-btn:hover,
body.help-dark footer .cta-btn:hover {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.88);
    color: #0a0d1a;
}

/* Light dropdown/lang cards keep dark links. */
body.help-dark #header .lang-switcher-menu .lang-switcher-link {
    color: rgba(10, 10, 10, 0.7);
}

body.help-dark #header .lang-switcher-menu .lang-switcher-link:hover,
body.help-dark #header .lang-switcher-menu .lang-switcher-link.is-current {
    color: rgb(10, 10, 10);
}

body.help-dark #header .nav-dropdown-menu a {
    color: rgba(10, 10, 10, 0.7);
}

body.help-dark #header .nav-dropdown-menu a:hover {
    color: rgb(10, 10, 10);
}

body.help-dark .cta-btn-secondary {
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
}

body.help-dark .cta-btn-secondary:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

body.help-dark .menu-toggle span {
    background: #ffffff;
}

/* Footer inversion (shared partial). */
body.help-dark footer {
    border-top-color: rgba(255, 255, 255, 0.12);
    background: #111827;
    color: rgba(255, 255, 255, 0.6);
}

body.help-dark .footer-intro p {
    color: rgba(255, 255, 255, 0.6);
}

body.help-dark .footer-nav-links a,
body.help-dark .footer-dot {
    color: rgba(255, 255, 255, 0.35);
}

body.help-dark .footer-nav-links a:hover {
    color: #ffffff;
}

body.help-dark .footer-link {
    color: rgba(255, 255, 255, 0.6);
}