/* Help mode — PhoneCallHelpView.swift. 1 pt = 1 px. Page 820 wide at most, centred. */

.help-page { overflow-y: auto; min-height: 0; background: var(--window-bg); }
.hl-page { width: 820px; max-width: calc(100% - 64px); margin: 0 auto; padding: 28px 0 32px; display: flex; flex-direction: column; align-items: flex-start; }
.hl-list { gap: 14px; }
.hl-section { margin: 0; font-size: 20px; font-weight: 700; line-height: 24px; }
.hl-list > .hl-video, .hl-list > .hl-card:not(:last-child) { margin-bottom: 16px; }
.hl-accent { color: var(--accent); }
.hl-accent.semibold { font-weight: 600; }

/* video card */
.hl-video { width: calc(50% - 8px); height: 212px; padding: 0; border: 1px solid var(--card-border); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; text-align: left; background: var(--control-bg); font: inherit; color: inherit; }
.hl-video-art { flex: 1; position: relative; background: linear-gradient(125deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); }
.hl-video:hover .hl-video-art { background: linear-gradient(125deg, color-mix(in srgb, var(--accent) 95%, #fff), color-mix(in srgb, var(--accent) 55%, #000)); }
.hl-video-glyph { position: absolute; top: 18px; right: 22px; color: #fff; opacity: .14; display: flex; }
.hl-video-glyph svg.ic { width: 64px; height: 64px; }
.hl-video-title { position: absolute; left: 20px; right: 84px; bottom: 18px; color: #fff; font-size: 17px; font-weight: 700; line-height: 21px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hl-video-play { position: absolute; right: 18px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff; display: flex; align-items: center; justify-content: center; padding-left: 3px; }
.hl-video:hover .hl-video-play { background: rgba(255, 255, 255, .32); }
.hl-video-play svg.ic { width: 18px; height: 18px; }
.hl-video-foot { flex: none; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 18px; font-size: 14px; background: var(--control-bg); }
.hl-video:hover .hl-video-foot { background: var(--hover-fill); }
.hl-video-foot span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-video-foot svg.ic { width: 12px; height: 12px; }
.hl-video:focus-visible { outline: 3px solid rgba(66, 112, 192, .4); outline-offset: 2px; }

/* cards and rows (PhoneCallHelpRow) */
.hl-card { width: 100%; border: 1px solid var(--card-border); border-radius: var(--r-xl); display: flex; flex-direction: column; }
.hl-card-line { height: 1px; margin: 0 18px; background: var(--card-border); }
.hl-row { position: relative; display: flex; align-items: center; min-height: 52px; padding: 14px 20px; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; color: var(--label); width: 100%; }
.hl-row.big { min-height: 72px; padding-left: 18px; }
.hl-row::before { content: ""; position: absolute; inset: 3px 4px; border-radius: var(--r-l); background: transparent; }
.hl-row:hover::before { background: var(--hover-fill); }
.hl-row > * { position: relative; }
.hl-row-circle { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; margin-right: 16px; }
.hl-row-circle svg.ic { width: 18px; height: 18px; }
.hl-row-title { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; margin-right: 12px; }
.hl-row-title.trial { font-size: 16px; font-weight: 600; }
.hl-row-chevron { flex: none; display: flex; }
.hl-row-chevron svg.ic { width: 13px; height: 13px; }

/* answer */
.hl-detail { gap: 0; }
.hl-back { font-size: 14px; font-weight: 500; margin-bottom: 18px; }
.hl-answer-card { width: 100%; border: 1px solid var(--card-border); border-radius: var(--r-xl); padding: 24px 28px 26px; }
.hl-answer { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hl-answer-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; line-height: 27px; user-select: text; }
.hl-text { margin: 0; font-size: 15px; line-height: 22px; user-select: text; width: 100%; }
.hl-step { display: flex; align-items: flex-start; gap: 12px; width: 100%; }
.hl-step-badge { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hl-step .hl-text { margin-top: 1px; flex: 1; min-width: 0; }
.hl-picture { width: 618px; max-width: min(640px, 100%); border: 1px solid var(--card-border); border-radius: var(--r-l); overflow: hidden; line-height: 0; }
.hl-picture img { width: 100%; height: auto; display: block; }
.hl-mobile { min-width: 160px; }

/* video sheet (PhoneCallHelpVideoSheet) */
.hl-video-sheet-box { max-height: 90vh; overflow: hidden; }
.hl-video-sheet { max-width: 100%; display: flex; flex-direction: column; }
.hl-video-head { height: 56px; flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 0 16px; }
.hl-video-head-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-done { min-width: 72px; }
.hl-player-box { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.hl-player { width: 100%; height: 100%; display: block; background: #000; }
.hl-unavailable { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; }
.hl-cue-box { height: 76px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0 24px; }
.hl-cue { font-size: 15px; font-weight: 500; line-height: 19px; text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 900px) {
    .hl-page { max-width: calc(100% - 32px); padding: 20px 0 28px; }
    .hl-video { width: 100%; }
    .hl-answer-card { padding: 20px 16px 22px; }
    .hl-answer-title { font-size: 20px; line-height: 25px; }
    .hl-row { padding: 12px 14px; }
    .hl-row.big { padding-left: 14px; }
    .hl-cue-box { height: auto; min-height: 76px; padding: 10px 14px; }
}