/* File: help.css. Purpose: Touch-sized optional guidance with no blocking backdrop or motion. */
.tl-help-entry { min-height:44px; padding:8px 12px; }
.tl-help-offer { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:16px; margin:0 0 16px; border:1px solid var(--line,#d4d9df); border-left:4px solid #b20d20; border-radius:12px; background:var(--surface,#fff); color:var(--text,#20232b); }
.tl-help-offer p { margin:6px 0; max-width:58ch; }
#tl-help { position:static; }
.tl-help-panel { position:fixed; z-index:2147483000; box-sizing:border-box; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:16px; background:#fff; color:#20232b; border:2px solid #9d1024; border-radius:14px; box-shadow:0 4px 24px #0004; font-size:1rem; line-height:1.6; text-align:left; overflow-wrap:anywhere; }
.tl-help-panel h2 { margin:8px 0; font-size:19px; line-height:1.2; }
.tl-help-panel p { margin:8px 0 12px; color:#20232b; }
.tl-help-panel .tl-help-progress { margin:4px 0; font-size:13px; color:#535965; }
.tl-help-head { display:flex; align-items:center; justify-content:space-between; gap:8px; position:sticky; top:-16px; background:#fff; z-index:2; padding-block:6px; }
.tl-help-head > span { font-size:13px; font-weight:600; }
.tl-help-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tl-help-panel button,.tl-help-offer button { box-sizing:border-box; min-height:44px; min-width:44px; padding:8px 12px; border:1px solid #a3a9b3; border-radius:8px; background:#f5f6f8; color:#20232b; font:inherit; line-height:1.25; cursor:pointer; touch-action:manipulation; white-space:normal; text-align:left; }
.tl-help-panel button[data-help=next],.tl-help-offer button[data-help=start] { background:#a80f25; color:#fff; border-color:#a80f25; }
.tl-help-panel button:disabled { opacity:.5; cursor:default; }
.tl-help-panel button:focus-visible,.tl-help-panel a:focus-visible,.tl-help-offer button:focus-visible { outline:3px solid #2264c6; outline-offset:2px; }
.tl-help-status { padding:8px; background:#f2f4f7; border-radius:8px; }
.tl-help-paths { display:grid; gap:8px; }
.tl-help-panel > a { display:inline-flex; align-items:center; min-height:44px; padding:6px 8px; color:#9d1024; }
.tl-help-mini { display:flex; align-items:center; gap:8px; padding:8px; }
.tl-help-target { outline:3px solid #b20d20 !important; outline-offset:4px; scroll-margin-block:180px 100px; }
/* SECTION: Structured guided details and the full Help document share app colors and readable measures. */
.tl-help-panel h3 { font-size:1rem; margin:16px 0 6px; line-height:1.4; }
.tl-help-panel ol { padding-left:24px; margin:8px 0 16px; }
.tl-help-panel li { padding-left:2px; margin-bottom:10px; }
.tl-help-panel details,.hc-support details { border-block-start:1px solid #d4d9df; padding-block:8px; }
.tl-help-panel summary,.hc-support summary { min-height:44px; box-sizing:border-box; padding:10px 6px; cursor:pointer; font-weight:600; line-height:1.5; }
.tl-help-panel summary:focus-visible,.hc-support a:focus-visible,.hc-support summary:focus-visible { outline:3px solid #2264c6; outline-offset:2px; }
.tl-help-paths > div { padding:8px 0; border-bottom:1px solid #d4d9df; }
.tl-help-paths > div > button { width:100%; font-weight:600; }
.tl-help-paths > div > p { font-size:1rem; margin:6px 4px; }
.hc-related { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.hc-related button,.hc-related a { min-height:44px; box-sizing:border-box; padding:10px; }
.hc-support { max-width:80ch; margin:0 auto; padding:24px 20px; font-size:1rem; line-height:1.65; overflow-wrap:anywhere; }
.hc-support p,.hc-support li,.hc-support dd { max-width:72ch; }
.hc-support li { margin-block:10px; }
.hc-support h2 { margin-top:0; line-height:1.3; }
.hc-support h3 { line-height:1.4; }
.hc-support .hc-article { margin-block:32px; border-top:2px solid var(--line,#d4d9df); padding-top:24px; scroll-margin-top:16px; }
.hc-support .hc-related { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.hc-support a { color:var(--accent,#9d1024); text-decoration:underline; }
.hc-support dd { margin-inline-start:16px; margin-bottom:24px; }
.hc-support dt { font-weight:700; }
.hc-skip { position:absolute; left:-10000px; }
.hc-skip:focus { position:static; display:block; padding:12px; }
@media(max-width:600px) { .tl-help-panel { padding:12px; font-size:1rem; } .tl-help-panel h2 { font-size:20px; } .tl-help-head { top:-12px; } .tl-help-actions { gap:6px; } .tl-help-offer { padding:12px; } .hc-support { padding:20px 16px; } }
@media(prefers-reduced-motion:reduce) { .tl-help-panel,.tl-help-target { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }