/* Help centre (/help/). Generated pages from build-help.js. */

.help-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.4;
    padding: 0.125rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
    background: rgba(10, 191, 104, 0.12);
    color: var(--brand-seed-dark);
}
.dark .help-badge { background: rgba(10, 191, 104, 0.18); color: #5CE3A0; }
.help-badge-pro { background: #EEE7FB; color: #6D3FD0; }
.dark .help-badge-pro { background: rgba(167, 139, 250, 0.18); color: #C4B2FF; }
.help-badge-ios { background: #FDF1DC; color: #9A5B00; }
.dark .help-badge-ios { background: rgba(242, 179, 91, 0.16); color: #F2C27B; }
.help-badge-since { background: #E6EEF9; color: #2F5E9E; }
.dark .help-badge-since { background: rgba(120, 160, 230, 0.16); color: #A9C4F0; }

/* Numbered steps */
.help-steps { counter-reset: help-step; list-style: none; padding: 0; margin: 0; }
.help-steps > li {
    counter-increment: help-step;
    position: relative;
    padding-left: 2.6rem;
    min-height: 1.9rem;
}
.help-steps > li::before {
    content: counter(help-step);
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--brand-seed);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    display: grid;
    place-items: center;
}

/* Sidebar */
.help-nav-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-muted);
    margin: 0 0 0.35rem;
}
.dark .help-nav-title { color: var(--brand-dark-sub); }
.help-nav-link {
    display: block;
    padding: 0.25rem 0.6rem;
    border-radius: 0.5rem;
    color: var(--brand-deep);
    line-height: 1.35;
}
.dark .help-nav-link { color: var(--brand-dark-text); }
.help-nav-link:hover { color: var(--brand-seed-dark); }
.help-nav-link.is-current {
    background: rgba(10, 191, 104, 0.12);
    color: var(--brand-seed-dark);
    font-weight: 700;
}
.dark .help-nav-link.is-current { color: #5CE3A0; }

/* Popular chips */
.help-chip {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(12, 59, 46, 0.12);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--brand-deep);
}
.dark .help-chip { background: var(--brand-dark-card); border-color: rgba(255, 255, 255, 0.1); color: var(--brand-dark-text); }
.help-chip:hover { border-color: var(--brand-seed); color: var(--brand-seed-dark); }

/* Search results */
.help-search-results li a {
    display: block;
    padding: 0.7rem 1rem;
    color: var(--brand-deep);
}
.dark .help-search-results li a { color: var(--brand-dark-text); }
.help-search-results li a:hover,
.help-search-results li a.is-active { background: rgba(10, 191, 104, 0.1); }
.help-search-results small { display: block; color: var(--brand-muted); font-size: 0.8rem; }
.dark .help-search-results small { color: var(--brand-dark-sub); }
.help-search-results .help-search-empty { padding: 0.7rem 1rem; color: var(--brand-muted); font-size: 0.9rem; }

/* Release notes (/whats-new/). Generated by build-whats-new.js. */
.rn-release { padding-top: 0.25rem; }
.rn-hero {
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: 1rem;
    background: rgba(10, 191, 104, 0.1);
    color: var(--brand-deep);
}
.dark .rn-hero { background: rgba(10, 191, 104, 0.15); color: var(--brand-dark-text); }
.rn-hero-title { font-weight: 800; font-size: 1.1rem; margin: 0 0 0.25rem; }
.dark .rn-hero-title { color: #fff; }
.rn-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.4rem;
}
.rn-new { color: var(--brand-seed-dark); }
.dark .rn-new { color: #5CE3A0; }
.rn-improved { color: #2F5E9E; }
.dark .rn-improved { color: #A9C4F0; }
.rn-fixed { color: #9A5B00; }
.dark .rn-fixed { color: #F2C27B; }
.rn-list { list-style: disc; padding-left: 1.4rem; margin: 0; color: var(--brand-muted); line-height: 1.6; }
.dark .rn-list { color: var(--brand-dark-sub); }
.rn-list > li { margin-bottom: 0.35rem; }
.rn-nav-link { display: flex; justify-content: space-between; gap: 0.5rem; font-variant-numeric: tabular-nums; }
.rn-nav-date { color: var(--brand-muted); font-size: 0.8em; }
.dark .rn-nav-date { color: var(--brand-dark-sub); }
/* Layout kept in this file (not new Tailwind utilities) so the page renders
   right even when a stale tailwind.css is served. */
.rn-main > * + * { margin-top: 2.5rem; }
.rn-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; row-gap: 0.25rem; margin-bottom: 0.75rem; }
.rn-nav-date { padding-left: 0.75rem; white-space: nowrap; }