/**
 * help.pedi.ph — built on the Pedi design tokens in tokens.css (light, dark and system).
 * Components read semantic tokens only; the two values Figma doesn't define yet (Navy, focus ring) live here.
 */

:root {
    --help-navy: #1B2E4B;
    --help-focus: #1B2E4B;
    --help-gutter: var(--container-padding-mobile);
    --help-max: 1120px;
    --help-read: var(--paragraph-max-width, 720px);
}

:root[data-theme="dark"] {
    --help-focus: #9EC5FF;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --help-focus: #9EC5FF;
    }
}

@media (min-width: 768px) {
    :root {
        --help-gutter: var(--container-padding-desktop);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-family: var(--text-body-lg-family);
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-line-height);
    font-weight: var(--text-body-lg-weight);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p {
    margin: 0;
}

h1, h2, h3, h4 {
    color: var(--color-text-primary);
}

a {
    color: var(--color-text-brand-secondary);
    text-underline-offset: 3px;
}

:root[data-theme="dark"] a {
    color: var(--color-text-primary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) a {
        color: var(--color-text-primary);
    }
}

:focus-visible {
    outline: 2px solid var(--help-focus);
    outline-offset: 2px;
}

img, svg {
    display: block;
}

.help-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.help-skip {
    position: absolute;
    top: -100px;
    left: var(--help-gutter);
    z-index: 10;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

.help-skip:focus {
    top: var(--spacing-md);
}

body > main {
    flex: 1 0 auto;
}

body > main:focus {
    outline: none;
}

.help-container {
    width: 100%;
    max-width: calc(var(--help-max) + 2 * var(--help-gutter));
    margin: 0 auto;
    padding: 0 var(--help-gutter);
}

.help-container--narrow {
    max-width: calc(var(--help-read) + 2 * var(--help-gutter));
}

/* Every page is a vertical flow: blocks are spaced by the gap, never by their own margins. */
.help-flow {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xl);
    min-width: 0;
}

.help-flow--tight {
    gap: var(--spacing-xl);
}

.help-flow > .help-section-gap {
    margin-top: var(--spacing-xl);
}

/* ── Type roles ─────────────────────────────────────────────────────────── */

.help-h1 {
    font-family: var(--text-h1-family);
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-line-height);
    font-weight: var(--text-h1-weight);
    letter-spacing: var(--text-h1-tracking);
}

.help-h2 {
    font-family: var(--text-h2-family);
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
    font-weight: var(--text-h2-weight);
    letter-spacing: var(--text-h2-tracking);
}

.help-h3 {
    font-family: var(--text-h4-family);
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-line-height);
    font-weight: var(--text-h4-weight);
}

.help-lead {
    color: var(--color-text-tertiary);
}

.help-small {
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    color: var(--color-text-tertiary);
}

.help-code {
    font-family: var(--font-family-mono);
    font-size: 0.92em;
    letter-spacing: 0.02em;
}

/* ── Header and footer ──────────────────────────────────────────────────── */

.help-header {
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 1px solid var(--color-border-secondary);
    background: var(--color-bg-primary);
}

.help-header-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    min-height: 64px;
}

.help-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.help-brand img {
    width: 32px;
    height: 32px;
}

.help-brand span {
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-line-height);
}

.help-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: auto;
}

.help-nav a,
.help-nav button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-height: 40px;
    padding: 0 var(--spacing-lg);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--text-body-size);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.help-nav svg {
    flex: none;
    width: 18px;
    height: 18px;
}

.help-nav a:hover,
.help-nav button:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.help-nav a[aria-current="page"] {
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
}

.help-nav-label {
    display: none;
}

@media (min-width: 640px) {
    .help-nav-label {
        display: inline;
    }
}

.help-theme-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: var(--spacing-xs);
    padding: 0;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.help-theme-toggle:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.help-theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* The icon shows what a click switches to: a moon in light mode, a sun in dark mode. */
.help-theme-sun {
    display: none;
}

:root[data-theme="dark"] .help-theme-sun {
    display: block;
}

:root[data-theme="dark"] .help-theme-moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .help-theme-sun {
        display: block;
    }

    :root:not([data-theme="light"]) .help-theme-moon {
        display: none;
    }
}

.help-footer {
    padding: var(--spacing-3xl) 0;
    border-top: 1px solid var(--color-border-secondary);
    background: var(--color-bg-primary);
}

.help-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

.help-footer nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-3xl);
    font-size: var(--text-body-size);
}

.help-footer nav a {
    color: var(--color-text-tertiary);
    text-decoration: none;
}

.help-footer nav a:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
}

.help-footer form {
    display: contents;
}

.help-footer .help-btn--quiet {
    min-height: 0;
    padding: 0;
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-regular);
}

.help-footer .help-btn--quiet:hover {
    background: none;
    color: var(--color-text-primary);
    text-decoration: underline;
}

/* ── Hero and search ────────────────────────────────────────────────────── */

.help-hero {
    padding: var(--spacing-6xl) 0 var(--spacing-5xl);
    border-bottom: 1px solid var(--color-border-secondary);
    background: var(--color-bg-primary);
}

.help-hero .help-h1 {
    max-width: 18ch;
}

.help-hero .help-lead {
    margin-top: var(--spacing-md);
    max-width: 52ch;
}

@media (min-width: 768px) {
    .help-hero {
        padding: var(--spacing-7xl) 0 var(--spacing-6xl);
    }

    .help-hero .help-h1 {
        font-size: var(--text-display-size);
        line-height: var(--text-display-line-height);
        letter-spacing: var(--text-display-tracking);
    }
}

.help-search {
    position: relative;
    display: flex;
    max-width: 640px;
    margin-top: var(--spacing-3xl);
}

.help-search--block {
    max-width: none;
    margin-top: 0;
}

.help-search svg {
    position: absolute;
    top: 50%;
    left: var(--spacing-xl);
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--color-text-placeholder);
    pointer-events: none;
}

.help-search input {
    flex: 1;
    min-width: 0;
    min-height: 52px;
    padding: 0 var(--spacing-xl) 0 48px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font: inherit;
}

.help-search input::placeholder {
    color: var(--color-text-placeholder);
}

.help-search .help-btn {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    min-height: 44px;
    padding: 0 var(--spacing-2xl);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--text-body-size);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.help-btn svg {
    width: 18px;
    height: 18px;
}

.help-btn--primary {
    background: var(--color-button-primary-bg);
    color: var(--color-button-primary-fg);
}

.help-btn--primary:hover {
    background: var(--color-button-primary-bg-hover);
    color: var(--color-button-primary-fg);
}

.help-btn--secondary {
    border-color: var(--color-button-secondary-border, var(--color-border-primary));
    background: var(--color-button-secondary-bg, var(--color-bg-primary));
    color: var(--color-button-secondary-fg, var(--color-text-secondary));
}

.help-btn--secondary:hover {
    background: var(--color-button-secondary-bg-hover, var(--color-bg-tertiary));
    color: var(--color-button-secondary-fg-hover, var(--color-text-primary));
}

.help-btn--quiet {
    padding: 0 var(--spacing-md);
    background: none;
    color: var(--color-text-tertiary);
}

.help-btn--quiet:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.help-btn[disabled] {
    opacity: .6;
    cursor: progress;
}

/* ── Sections and cards ─────────────────────────────────────────────────── */

.help-main {
    padding-top: var(--spacing-5xl);
    padding-bottom: var(--spacing-7xl);
}

.help-hero + .help-main {
    padding-top: var(--spacing-6xl);
}

.help-main > .help-flow {
    gap: var(--spacing-6xl);
}

.help-main > .help-flow--page {
    gap: var(--spacing-4xl);
}

.help-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
}

.help-card {
    padding: var(--spacing-3xl);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-2xl);
    background: var(--color-bg-primary);
}

@media (max-width: 379.98px) {
    .help-card {
        padding: var(--spacing-xl);
    }
}

.help-grid {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.help-topic {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-2xl);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-xl);
    background: var(--color-bg-primary);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease;
}

.help-topic:hover {
    border-color: var(--color-border-brand);
}

.help-topic-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-md);
    background: var(--color-bg-tertiary);
    color: var(--color-fg-brand-primary);
}

.help-topic-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.help-topic-icon svg {
    width: 20px;
    height: 20px;
}

.help-topic-title {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.help-links {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-xl);
    background: var(--color-bg-primary);
}

.help-links li + li {
    border-top: 1px solid var(--color-border-secondary);
}

.help-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl) var(--spacing-2xl);
    color: var(--color-text-primary);
    text-decoration: none;
}

.help-links a:hover {
    background: var(--color-bg-secondary);
}

.help-links svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--color-text-placeholder);
}

.help-cta {
    display: grid;
    gap: var(--spacing-xl);
    align-items: center;
    padding: var(--spacing-4xl) var(--spacing-3xl);
    border-radius: var(--radius-2xl);
    background: var(--help-navy);
    color: #E8ECF2;
}

.help-cta h2 {
    color: #FFFFFF;
}

.help-cta .help-btn--secondary {
    border-color: rgba(255, 255, 255, .35);
    background: transparent;
    color: #FFFFFF;
}

.help-cta .help-btn--secondary:hover {
    background: rgba(255, 255, 255, .1);
}

.help-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.help-cta :focus-visible {
    outline-color: #9EC5FF;
}

@media (min-width: 768px) {
    .help-cta {
        grid-template-columns: 1fr auto;
        padding: var(--spacing-4xl) var(--spacing-5xl);
    }
}

/* ── FAQ accordions ─────────────────────────────────────────────────────── */

.help-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-4xl);
}

@media (min-width: 960px) {
    .help-layout {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

.help-sidenav-title {
    margin-bottom: var(--spacing-md);
    padding: 0 var(--spacing-lg);
    color: var(--color-text-placeholder);
    font-size: var(--text-small-size);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

@media (max-width: 959.98px) {
    .help-sidenav-title {
        display: none;
    }
}

.help-sidenav {
    display: flex;
    gap: var(--spacing-xs);
    overflow-x: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    scrollbar-width: none;
}

.help-sidenav::-webkit-scrollbar {
    display: none;
}

@media (min-width: 960px) {
    .help-sidenav {
        position: sticky;
        top: 88px;
        flex-direction: column;
        overflow: visible;
    }
}

.help-sidenav a {
    display: block;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-tertiary);
    font-size: var(--text-body-size);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.help-sidenav a:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* The current topic sits raised on the canvas, like the selected tab in a segmented control. */
.help-sidenav a[aria-current="page"] {
    border-color: var(--color-border-primary);
    background: var(--color-bg-primary);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

:root[data-theme="dark"] .help-sidenav a[aria-current="page"] {
    border-color: var(--color-border-primary);
    background: var(--color-bg-tertiary);
    box-shadow: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .help-sidenav a[aria-current="page"] {
        border-color: var(--color-border-primary);
        background: var(--color-bg-tertiary);
        box-shadow: none;
    }
}

.help-faq {
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-xl);
    background: var(--color-bg-primary);
}

.help-faq + .help-faq {
    margin-top: var(--spacing-lg);
}

.help-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl) var(--spacing-2xl);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    list-style: none;
    cursor: pointer;
}

.help-faq-question {
    display: grid;
    gap: 2px;
}

.help-faq summary::-webkit-details-marker {
    display: none;
}

.help-faq summary svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--color-text-placeholder);
    transition: transform .2s ease;
}

.help-faq[open] summary svg {
    transform: rotate(180deg);
}

.help-faq summary:focus-visible {
    border-radius: var(--radius-xl);
    outline-offset: -2px;
}

.help-answer {
    padding: 0 var(--spacing-2xl) var(--spacing-2xl);
    color: var(--color-text-secondary);
}

.help-answer > * + * {
    margin-top: var(--spacing-md);
}

.help-answer ul,
.help-answer ol {
    padding-left: var(--spacing-3xl);
}

.help-faq-group + .help-faq-group {
    margin-top: var(--spacing-5xl);
}

.help-faq-group > h2 {
    margin-bottom: var(--spacing-xl);
}

/* ── Article page ───────────────────────────────────────────────────────── */

.help-article {
    max-width: var(--help-read);
}

.help-answer--page {
    padding: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-body-lg-size);
    line-height: 1.7;
}

.help-answer-link {
    font-size: var(--text-body-size);
}

.help-sidenav--wrap a {
    white-space: normal;
}

@media (max-width: 959.98px) {
    .help-aside {
        order: 2;
    }

    .help-aside .help-sidenav-title {
        display: block;
    }

    .help-sidenav--wrap {
        flex-direction: column;
    }
}

.help-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-lg) var(--spacing-xl);
    padding: var(--spacing-2xl) 0;
    border-top: 1px solid var(--color-border-secondary);
    border-bottom: 1px solid var(--color-border-secondary);
}

.help-feedback-title {
    font-size: var(--text-body-lg-size);
    font-weight: var(--font-weight-semibold);
}

.help-feedback-actions {
    display: flex;
    gap: var(--spacing-md);
}

.help-feedback-actions .help-btn {
    min-width: 72px;
}

.help-feedback-thanks {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: 0;
}

.help-feedback-thanks svg {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--color-fg-success-primary);
}

/* ── Suggested articles on the contact form ─────────────────────────────── */

.help-suggest {
    display: grid;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.help-suggest[hidden] {
    display: none;
}

.help-suggest-title {
    color: var(--color-text-primary);
    font-size: var(--text-body-size);
    font-weight: var(--font-weight-semibold);
}

.help-suggest ul {
    display: grid;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-suggest a {
    font-size: var(--text-body-size);
}

.help-suggest .help-small {
    margin-left: var(--spacing-sm);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

/* minmax(0, 1fr) lets a track shrink below its content (inputs, long words) so narrow phones never scroll sideways. */
.help-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-2xl);
}

.help-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-2xl);
}

@media (min-width: 640px) {
    .help-form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.help-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--spacing-sm);
}

.help-field > label,
.help-field > legend {
    padding: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-body-size);
    font-weight: var(--font-weight-medium);
}

.help-field .help-optional {
    color: var(--color-text-placeholder);
    font-weight: var(--font-weight-regular);
}

.help-input,
.help-select,
.help-textarea {
    width: 100%;
    min-height: 44px;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font: inherit;
}

.help-textarea {
    min-height: 160px;
    resize: vertical;
}

.help-input::placeholder,
.help-textarea::placeholder {
    color: var(--color-text-placeholder);
}

.help-input:focus,
.help-select:focus,
.help-textarea:focus {
    border-color: var(--help-focus);
    outline: 2px solid var(--help-focus);
    outline-offset: 0;
}

.help-input[aria-invalid="true"],
.help-select[aria-invalid="true"],
.help-textarea[aria-invalid="true"] {
    border-color: var(--color-border-error-solid);
}

.help-hint {
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    color: var(--color-text-tertiary);
}

.help-error {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    color: var(--color-text-error-primary);
}

.help-error svg {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 2px;
}

fieldset.help-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.help-topic-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-xs);
}

@media (min-width: 640px) {
    .help-topic-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.help-topic-option {
    position: relative;
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.help-topic-option:hover {
    border-color: var(--color-border-brand);
}

.help-topic-option input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--color-button-primary-bg);
}

.help-topic-option:has(input:checked) {
    border-color: var(--color-fg-brand-primary);
    box-shadow: inset 0 0 0 1px var(--color-fg-brand-primary);
}

.help-topic-option:has(input:focus-visible) {
    outline: 2px solid var(--help-focus);
    outline-offset: 2px;
}

.help-topic-option-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.help-topic-option-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-primary);
    font-size: var(--text-body-size);
    font-weight: var(--font-weight-semibold);
}

.help-tag {
    padding: 0 var(--spacing-sm);
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    font-weight: var(--font-weight-medium);
}

/* Country code + number read as one field. */
.help-phone {
    display: flex;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
}

.help-phone:focus-within {
    border-color: var(--help-focus);
    outline: 2px solid var(--help-focus);
    outline-offset: 0;
}

.help-phone--invalid {
    border-color: var(--color-border-error-solid);
}

/* Shows just the code; the native select sits invisibly on top so it opens the full country list. */
.help-phone-code {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-md) 0 var(--spacing-lg);
    border-right: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.help-phone-code svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-placeholder);
}

.help-phone-code select {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    font: inherit;
}

.help-phone-code:hover {
    background: var(--color-bg-tertiary);
}

.help-phone-number {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 var(--spacing-lg);
    border: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.help-phone-number::placeholder {
    color: var(--color-text-placeholder);
}

.help-phone-code select:focus,
.help-phone-number:focus {
    outline: none;
}

.help-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border: 1px dashed var(--color-border-primary);
    border-radius: var(--radius-md);
}

.help-file input {
    max-width: 100%;
    color: var(--color-text-tertiary);
    font: inherit;
    font-size: var(--text-body-size);
}

.help-file input::file-selector-button {
    margin-right: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.help-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-lg);
}

.help-code-input {
    max-width: 220px;
    font-family: var(--font-family-mono);
    font-size: var(--text-h3-size);
    letter-spacing: .4em;
    text-align: center;
}

/* ── Callouts ───────────────────────────────────────────────────────────── */

.help-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) var(--spacing-2xl);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-lg);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
}

.help-callout svg {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.help-callout strong {
    color: var(--color-text-primary);
}

.help-callout--success svg {
    color: var(--color-fg-success-primary);
}

.help-callout--error {
    border-color: var(--color-border-error);
}

.help-callout--error svg {
    color: var(--color-text-error-primary);
}

.help-callout--info svg {
    color: var(--color-text-tertiary);
}

/* ── Status badges (text + dot, never colour alone) ─────────────────────── */

.help-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 2px 10px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.help-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.help-badge--danger { color: var(--color-text-error-primary); border-color: var(--color-border-error); }
.help-badge--warning { color: var(--color-text-warning-primary); }
.help-badge--info { color: var(--color-text-secondary); }
.help-badge--success { color: var(--color-text-success-primary); }
.help-badge--secondary { color: var(--color-text-tertiary); }

/* ── Ticket page ────────────────────────────────────────────────────────── */

.help-page-head {
    display: grid;
    gap: var(--spacing-md);
}

.help-page-head .help-lead {
    max-width: 60ch;
}

.help-page-head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

.help-page-head--split > div {
    display: grid;
    gap: var(--spacing-md);
}

.help-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
}

.help-crumbs a {
    color: var(--color-text-tertiary);
    text-decoration: none;
}

.help-crumbs a:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
}

.help-crumbs svg {
    width: 14px;
    height: 14px;
    color: var(--color-text-placeholder);
}

.help-crumbs [aria-current] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.help-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md) var(--spacing-lg);
    font-size: var(--text-body-size);
    color: var(--color-text-tertiary);
}

.help-thread {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-message {
    padding: var(--spacing-xl) var(--spacing-2xl);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-xl);
    background: var(--color-bg-primary);
}

.help-message--support {
    border-color: transparent;
    background: var(--color-bg-tertiary);
}

.help-message-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-xs) var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.help-message-author {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.help-message-time {
    margin-left: auto;
    font-size: var(--text-small-size);
    color: var(--color-text-placeholder);
}

.help-message-body {
    overflow-wrap: anywhere;
}

.help-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0 0;
    padding: 0;
    list-style: none;
}

.help-attachments a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    max-width: 260px;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-body-size);
    text-decoration: none;
}

.help-attachments a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-attachments svg {
    flex: none;
    width: 16px;
    height: 16px;
}


.help-reply-close {
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border-secondary);
}

.help-reply-close .help-btn--quiet {
    padding: 0;
}

/* ── Ticket list ────────────────────────────────────────────────────────── */

.help-tickets {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-xl);
    background: var(--color-bg-primary);
}

.help-tickets li + li {
    border-top: 1px solid var(--color-border-secondary);
}

.help-tickets a {
    display: grid;
    gap: var(--spacing-xs);
    padding: var(--spacing-xl) var(--spacing-2xl);
    color: inherit;
    text-decoration: none;
}

.help-tickets a:hover {
    background: var(--color-bg-secondary);
}

.help-tickets-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.help-tickets-subject {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.help-empty {
    padding: var(--spacing-5xl) var(--spacing-3xl);
    border: 1px dashed var(--color-border-primary);
    border-radius: var(--radius-xl);
    text-align: center;
}

.help-empty > * + * {
    margin-top: var(--spacing-md);
}

.help-pagination {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-xl);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

@media (forced-colors: active) {
    .help-badge::before {
        background: CanvasText;
    }
}

/* ── Inside the Pedi app (WebView hand-off) ─────────────────────────────── */

.help-embedded .help-main {
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-5xl);
}

.help-embedded .help-hero {
    padding: var(--spacing-4xl) 0 var(--spacing-3xl);
}