/* Help centre. Everything visual comes from app.css tokens: sizes through the
   --fs-* scale (never a pixel value, nothing under --fs-xs except uppercase
   labels), colours through the palette tokens. This file lays out the
   landing, collection, article and FAQ views, the article typography, the
   print sheet, and the contextual side panel other pages get from help.js.
   Everything is scoped under .help, .helppanel or .helpbtn so loading it on
   another page changes nothing there. A hidden panel stays hidden: the
   [hidden] rule must keep beating the panel's display rule. */
main.help{grid-template-columns:minmax(0,1fr)}
.help .breadcrumb{font-size:var(--fs-sm);color:var(--fg3);display:flex;gap:6px;flex-wrap:wrap}.help .breadcrumb a{color:var(--link);text-decoration:none}.help .breadcrumb a:hover{text-decoration:underline}.help .breadcrumb .sep{color:var(--sep)}
.help .lead{font-size:var(--fs);color:var(--fg2);margin:0 0 10px;line-height:1.55}.help .card>.lead{padding:0 var(--in,24px)}
.help .empty{padding:14px var(--in,24px) 18px;color:var(--fg3);font-size:var(--fs-sm);margin:0}
/* ---- search -------------------------------------------------------------- */
.help .hero{padding-bottom:10px}.helpsearch{display:flex;gap:10px;padding:8px var(--in,24px) 8px}
.helpsearch input{flex:1;height:44px;padding:0 20px;border:1px solid var(--edge);border-radius:999px;background:var(--card);font-size:var(--fs);min-width:0}
.helpsearch input:focus{border-color:var(--focus)}
.help .results{padding:2px var(--in,24px) 8px}.help .results .muted{margin:8px 0 2px}
.help .hit{display:block;padding:12px 0;border-top:1px solid var(--border);text-decoration:none;color:var(--fg)}.help .hit b{font-weight:500;color:var(--link);font-size:var(--fs)}.help .hit .where{margin-left:8px;font-size:var(--fs-xs);color:var(--fg3)}.help .hit p{margin:3px 0 0;font-size:var(--fs-sm);color:var(--fg2);line-height:1.5}
.help mark,.helppanel mark{background:var(--mark-bg);color:inherit;padding:0 2px;border-radius:2px}
/* ---- landing ------------------------------------------------------------- */
.help .collections{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.help a.coll{display:flex;flex-direction:column;padding:0 0 18px;text-decoration:none;color:var(--fg);transition:border-color .12s}.help a.coll:hover{border-color:var(--c300)}.help a.coll:hover h3{color:var(--wash-ink)}
.help a.coll p{margin:6px var(--in,24px) 10px;font-size:var(--fs-sm);color:var(--fg2);line-height:1.5;flex:1}.help a.coll .count{display:block;padding:0 var(--in,24px);font-size:var(--fs-xs);color:var(--fg3)}
.help .landing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.help .card>ul,.help .card>ol{margin:0;padding:4px var(--in,24px) 16px 42px;font-size:var(--fs)}.help .card>ul li,.help .card>ol li{padding:5px 0}
.help .card li a{color:var(--link);font-weight:500;text-decoration:none}.help .card li a:hover{text-decoration:underline}
.help .card li .sum{display:block;color:var(--fg3);font-size:var(--fs-sm);line-height:1.45;margin-top:1px}.help .card time{color:var(--fg3);font-size:var(--fs-xs);margin-left:8px;font-variant-numeric:tabular-nums}
.help .more{display:inline-block;margin:0 var(--in,24px) 18px;font-size:var(--fs-sm);font-weight:500;color:var(--link)}
/* ---- collection ---------------------------------------------------------- */
.help .collection>.body{padding:0 var(--in,24px) 8px;color:var(--fg2)}.help .collection h4{margin:18px var(--in,24px) 4px;font-size:var(--fs);font-weight:500;color:var(--fg0)}
.help .collection .articles{margin:0;padding:4px var(--in,24px) 12px 42px;font-size:var(--fs)}.help .collection .articles li{padding:4px 0}
.help .collection .prose h2{font-size:var(--fs-title);margin:var(--in,24px) 0 6px}.help .collection .prose ul{padding-left:var(--in,24px)}.help .collection .prose li{padding:3px 0}
/* ---- article ------------------------------------------------------------- */
.help .article-layout{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:16px;align-items:start}
.help .article{padding:26px 32px var(--in,24px)}.help .article h1.title{margin:0 0 8px;font-size:var(--fs-kpi);font-weight:500;line-height:1.2;color:var(--fg0);letter-spacing:-.01em}

.help .article header .lead{font-size:var(--fs);color:var(--fg2);margin:0 0 12px}
.help .meta{font-size:var(--fs-sm);color:var(--fg3);display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--border)}.help .meta .btn{margin-left:auto}
.help .prose{font-size:var(--fs);line-height:1.65;color:var(--fg)}.help .prose h1{font-size:var(--fs-h1);font-weight:500;margin:26px 0 8px;color:var(--fg0)}.help .prose h2{font-size:var(--fs-h1);font-weight:500;margin:30px 0 10px;padding-top:4px;color:var(--fg0);letter-spacing:-.01em}.help .prose h3{font-size:var(--fs-title);font-weight:500;margin:var(--in,24px) 0 6px;color:var(--fg0)}.help .prose h4{font-size:var(--fs);font-weight:700;margin:18px 0 4px;color:var(--fg0)}
.help .prose p{margin:0 0 14px}.help .prose ul,.help .prose ol{margin:0 0 14px;padding-left:26px}.help .prose li{padding:3px 0}.help .prose li>ul,.help .prose li>ol{margin:4px 0 0}
.help .prose code,.helppanel code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;background:var(--tint);padding:1px 5px;border-radius:4px}
.help .prose pre,.helppanel pre{background:var(--panel);border:1px solid var(--border);border-radius:var(--rs);padding:12px 14px;overflow:auto;font-size:var(--fs-sm);line-height:1.5}.help .prose pre code,.helppanel pre code{background:none;padding:0}
.help .prose img,.helppanel img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:var(--rs);display:block;margin:8px 0 14px}
.help .prose .tablewrap,.helppanel .tablewrap{overflow:auto;margin:0 0 16px;border:1px solid var(--border);border-radius:var(--rs)}
.help .prose th,.helppanel th{cursor:default;position:static;height:auto;padding:10px 14px}.help .prose td,.helppanel td{white-space:normal;height:auto;padding:10px 14px;vertical-align:top;line-height:1.5}
.help .prose tbody tr,.helppanel tbody tr{cursor:auto}.help .prose tbody tr:hover,.helppanel tbody tr:hover{background:none}
.help .prose blockquote,.helppanel blockquote{margin:0 0 16px;padding:12px 16px;border-left:3px solid var(--c300);background:var(--panel);border-radius:0 var(--rs) var(--rs) 0;color:var(--fg2)}.help .prose blockquote p:last-child,.helppanel blockquote p:last-child{margin:0}
.help .prose blockquote.callout.note,.helppanel blockquote.callout.note{border-left-color:var(--gw-mint);background:var(--wash);color:var(--fg)}
.help .prose blockquote.callout.warning,.helppanel blockquote.callout.warning{border-left-color:var(--gw-coral);background:var(--tint);color:var(--fg)}
.help .prose hr{border:0;border-top:1px solid var(--border);margin:20px 0}.help .prose a,.helppanel a{color:var(--link)}
.help .tags{font-size:var(--fs-xs);color:var(--fg3);margin:18px 0 0}.help .tags span{display:inline-block;background:var(--tint);border-radius:999px;padding:2px 10px;margin:0 4px 4px 0}
.helpfeedback{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:var(--in,24px) 0 0;padding:16px 18px;border:1px solid var(--border);border-radius:var(--rs);background:var(--panel);font-size:var(--fs)}.helpfeedback>span:first-child{font-weight:500;color:var(--fg0)}
.helpfeedback textarea{flex:1 1 100%;min-height:56px;padding:8px 12px;border:1px solid var(--edge);border-radius:var(--rs);background:var(--card);resize:vertical;color:var(--fg);font-size:var(--fs-sm)}.helpfeedback .result{flex:1 1 100%;padding:0}
.help .prevnext{display:flex;justify-content:space-between;gap:12px;margin:18px 0 0;font-size:var(--fs)}.help .prevnext a{text-decoration:none;font-weight:500}.help .prevnext a span{display:block;color:var(--fg3);font-size:var(--fs-lbl);font-weight:500;letter-spacing:.06em;text-transform:uppercase}.help .prevnext .next{text-align:right;margin-left:auto}
.help .rail{position:sticky;top:calc(var(--top) + 18px);display:grid;gap:16px}.help .rail h3{font-size:var(--fs)}.help .rail h3::after{display:none}
.help .toc ol{list-style:none;padding:4px var(--in,24px) 14px;margin:0;font-size:var(--fs-sm)}.help .toc li{padding:4px 0}.help .toc li.l3{padding-left:14px}.help .toc a{text-decoration:none;color:var(--fg2)}.help .toc a:hover{color:var(--fg)}
.help .related ul{padding-left:38px;font-size:var(--fs-sm)}
/* ---- faq ----------------------------------------------------------------- */
.help .faq .intro{padding:0 var(--in,24px);color:var(--fg2)}.help .faq .intro.prose{font-size:var(--fs)}.help .faqnav{display:flex;gap:8px;flex-wrap:wrap;padding:6px var(--in,24px) 16px}.help .faqnav a{font-size:var(--fs-sm);font-weight:500;text-decoration:none;border:1px solid var(--edge);border-radius:var(--rs);padding:5px 14px;color:var(--fg2)}.help .faqnav a:hover{border-color:var(--fg3);color:var(--fg)}
.help .faqgroup{padding:10px var(--in,24px) 14px;border-top:1px solid var(--border)}.help .faqgroup h2{font-size:var(--fs-title);font-weight:500;margin:10px 0 6px;color:var(--fg0)}.help .faqgroup h4{margin:16px 0 4px;font-size:var(--fs-lbl);letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);font-weight:500}
.help details,.helppanel details{border-bottom:1px solid var(--border);padding:4px 0}.help summary,.helppanel summary{cursor:pointer;font-weight:500;padding:8px 0;color:var(--fg);font-size:var(--fs)}.help summary:hover,.helppanel summary:hover,.help details[open]>summary,.helppanel details[open]>summary{color:var(--fg0)}
.help details .answer,.helppanel details .answer{padding:2px 0 10px 18px;font-size:var(--fs);line-height:1.6;color:var(--fg2)}.help details .answer p,.helppanel details .answer p{margin:0 0 8px}.help .faqmeta{font-size:var(--fs-sm);padding-left:18px;margin:0 0 8px}
.help details:target{background:var(--sel)}
/* ---- the contextual button and panel (help.js adds them) ------------------ */
.helpbtn{width:32px;padding:0;justify-content:center;font-weight:700;color:var(--fg)}
.helppanel[hidden]{display:none}
/* Above the top bar and the phone's tab bar (z 1060 and up): at z 20 the console's
   bar slid over the panel's own Back and Close on an iPhone (Michel, 20 Oct 2026). */
.helppanel{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(460px,100vw);background:var(--card);border-left:1px solid var(--border);box-shadow:var(--shadow);z-index:var(--z-modal,1190);display:flex;flex-direction:column;font-size:var(--fs);color:var(--fg);padding-top:env(safe-area-inset-top);overscroll-behavior:contain}
.helppanel .pbody{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.helppanel .head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);min-height:var(--top)}.helppanel .head b{flex:1;font-weight:500;font-size:var(--fs-title);color:var(--fg0);min-width:0}
.helppanel .pbody{padding:14px 18px calc(20px + env(safe-area-inset-bottom));overflow:auto;flex:1;line-height:1.55}.helppanel .pbody input[type=search]{width:100%;height:38px;padding:0 16px;border:1px solid var(--edge);border-radius:999px;background:var(--card);margin-bottom:6px;font-size:var(--fs-sm)}
.helppanel h4{margin:18px 0 4px;font-size:var(--fs-lbl);letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);font-weight:500}.helppanel .plist{list-style:none;margin:0;padding:0}.helppanel .plist li{padding:8px 0;border-bottom:1px solid var(--border)}.helppanel .plist a{font-weight:500;text-decoration:none}.helppanel .plist .sum{display:block;color:var(--fg3);font-size:var(--fs-sm);line-height:1.45}
.helppanel .pfoot{margin:18px 0 0;font-size:var(--fs-sm)}.helppanel .article-body h1{font-size:var(--fs-title);font-weight:500;margin:6px 0 8px;color:var(--fg0)}.helppanel .article-body h2{font-size:var(--fs);font-weight:700;margin:16px 0 4px;color:var(--fg0)}.helppanel .article-body h3{font-size:var(--fs);font-weight:500;margin:12px 0 4px;color:var(--fg0)}.helppanel .article-body p{margin:0 0 10px}.helppanel .article-body ul,.helppanel .article-body ol{margin:0 0 10px;padding-left:var(--in,24px)}
.helppanel .psearch .hit{display:block;padding:8px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--fg)}.helppanel .psearch .hit b{font-weight:500}.helppanel .psearch .hit p{margin:2px 0 0;color:var(--fg2);font-size:var(--fs-sm)}.helppanel .psearch .where{font-size:var(--fs-xs);color:var(--fg3);margin-left:6px}.helppanel .muted{color:var(--fg3)}
@media(max-width:1100px){.help .article-layout{grid-template-columns:1fr}.help .rail{position:static}}
@media(max-width:800px){.help .article{padding:18px 16px}.help .article h1.title{font-size:var(--fs-h1)}.helpsearch{flex-wrap:wrap}
.help .card>.lead,.help .empty,.help .collection>.body,.help .faq .intro,.help .faqgroup,.helpsearch,.help .results,.help .faqnav{padding-left:16px;padding-right:16px}
.help .card>ul,.help .card>ol,.help .collection .articles{padding-left:34px;padding-right:16px}.help .collection h4,.help a.coll p{margin-left:16px;margin-right:16px}.help a.coll .count,.help .more{padding-left:16px;margin-left:0}.help .more{margin-left:16px}
.helppanel .head{min-height:auto}}
/* ---- print: the article alone, links spelled out ------------------------- */
@media print{.side,.top,.helpfeedback,.help .rail,.help .prevnext,.help .breadcrumb,.help .hero,.help .collections,.help .tags,.helppanel,.helpbtn,.sosstrip,.help .faqnav,.help .faqmeta,.help .meta .btn{display:none!important}
body{display:block;background:var(--gw-white);color:var(--gw-charcoal)}main.help{padding:0;display:block}
.help .article,.help .card{border:0;box-shadow:none;max-width:none;padding:0}.help .article-layout{display:block}
.help .prose{font-size:var(--fs)}.help .prose a::after{content:" (" attr(href) ")";font-size:.85em;color:var(--fg3)}.help .prose a[href^="#"]::after{content:""}
.help .prose pre,.help .prose blockquote,.help .prose .tablewrap,.help .prose img{break-inside:avoid}.help .prose h2,.help .prose h3{break-after:avoid}
.help details{break-inside:avoid;border:0}.help summary{list-style:none}}
/* Search button on the box's middle line (Gokul, 23 Oct 2026). */
.helpsearch{align-items:center}