/* ---- /help: the title, the search and the section buttons on the dotted hero in the highlight colour, then the questions
        as cards in one column (outside/help.html, apps/outside/help.js). Only this page loads it ---- */

.tw-help-hero-in { display: grid; justify-items: center; gap: var(--space-5); padding-block: var(--space-12); text-align: center; }
.tw-help-hero h1 { margin: 0; font-size: clamp(36px, 5cqw, 56px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }

.tw-help-search { position: relative; width: min(100%, 560px); }
.tw-help-search svg { position: absolute; left: 19px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.tw-help-search input { box-sizing: border-box; width: 100%; height: 56px; padding: 0 22px 0 50px; border: 0; border-radius: var(--radius-full); background: var(--paper); color: var(--ink); font: inherit; font-size: 17px; font-weight: 600; box-shadow: var(--edge); -webkit-appearance: none; appearance: none; }
.tw-help-search input::placeholder { color: var(--ink-3); opacity: 1; }
.tw-help-search input:focus { outline: none; box-shadow: 0 0 0 2.5px var(--ink); }
.tw-help-search input::-webkit-search-cancel-button { cursor: pointer; }

.tw-help-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tw-help-tab { height: 38px; padding: 0 16px; border: 0; border-radius: var(--radius-full); background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: var(--edge); }
.tw-help-tab:hover { box-shadow: 0 0 0 2.5px var(--ink); }
.tw-help-tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.tw-help-body { padding-block: var(--space-12) var(--space-14); }
.tw-help-list { display: grid; gap: var(--space-3); max-width: calc(820px + 2 * var(--space-8)); }
.tw-help-q { display: grid; gap: 8px; padding: 22px 24px; scroll-margin-top: 90px; }
.tw-help-q[hidden] { display: none; }
.tw-help-q h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.tw-help-q p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.tw-help-q a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tw-help-q a:hover { text-decoration-color: var(--yellow); }
.tw-help-q mark { padding: 0 2px; border-radius: 3px; background: var(--yellow); color: inherit; }
.tw-help-none { margin: 0; color: var(--ink-2); font-size: 17px; text-align: center; }
.tw-help-none[hidden] { display: none; }
.tw-help-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@container (max-width: 759px) {
    .tw-help-hero-in { gap: var(--space-4); padding-block: var(--space-8); }
    .tw-help-search input { height: 52px; font-size: 16px; }
    .tw-help-tab { height: 36px; padding: 0 13px; font-size: 13.5px; }
    .tw-help-body { padding-block: var(--space-8) var(--space-12); }
    .tw-help-q { padding: 18px; }
    .tw-help-q h2 { font-size: 17.5px; }
    .tw-help-q p { font-size: 15.5px; }
}