/* The help pages (/help and /help/<slug>), on top of legal.css. Help.astro
loads both. On desktop the help menu is a left column that stays in view; on
phones it follows the article as a plain list. Tokens only, from
src/styles/tokens.css: no colour literals here. */

/* Layout. The page column keeps legal.css's reading width. */
.help{flex:1;width:100%;max-width:720px;margin:0 auto;padding-top:24px}
.help-main{min-width:0}
@media (min-width:960px){
  .help:not(.help--index){display:grid;grid-template-columns:220px minmax(0,720px);grid-template-areas:"nav main";column-gap:56px;max-width:996px}
  .help:not(.help--index) .help-main{grid-area:main}
  .help-nav{grid-area:nav;align-self:start;position:sticky;top:calc(var(--island-h) + var(--island-gap) * 2);max-height:calc(100vh - var(--island-h) - var(--island-gap) * 4);overflow-y:auto;padding-top:6px}
}

/* The help menu */
.help-nav{margin-top:56px}
.help-nav h2{margin:0 0 8px;font:500 var(--text-label)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.help-nav h2 a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none}
.help-nav ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.help-nav li{margin:0;max-width:none;border-bottom:1px solid var(--line)}
.help-nav li a{display:flex;align-items:center;min-height:48px;padding:6px 0;color:var(--fg);font-size:var(--text-small);line-height:1.35;text-decoration:none}
.help-nav li a[aria-current="page"]{color:var(--accent);font-weight:700}
@media (min-width:960px){
  .help-nav{margin-top:0}
  .help-nav ul,.help-nav li{border:0}
  .help-nav li a{min-height:40px;padding:6px 12px;margin-left:-12px;border-radius:var(--r-btn);color:var(--muted)}
  .help-nav li a[aria-current="page"]{background:var(--panel);color:var(--fg);font-weight:600}
}
@media (hover:hover){
  .help-nav h2 a:hover,.help-nav li a:hover{color:var(--accent)}
}

/* Article */
.crumb{margin:0 0 4px;font:500 var(--text-label)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none}
@media (hover:hover){.crumb a:hover{color:var(--accent)}}
.help-main .updated{margin-bottom:28px}
.prose > :first-child{margin-top:0}
.prose h2{scroll-margin-top:calc(var(--island-h) + var(--island-gap) * 2)}
.prose ol,.prose ul{padding-left:24px;margin:0 0 16px}
.prose ol li{padding-left:4px;margin-bottom:10px}
.prose ol li::marker{color:var(--accent);font-weight:700}
.prose code{font:.88em/1.4 var(--mono);padding:1px 5px;border-radius:var(--r-tile);background:var(--panel);overflow-wrap:anywhere}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:var(--text-small);line-height:1.45}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.prose th{font:500 var(--text-label)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.prose td code{word-break:break-all}
/* Phones: a table becomes one block per row, so long paths never push the page sideways */
@media (max-width:559px){
  .prose thead{display:none}
  .prose table,.prose tbody,.prose tr,.prose td{display:block}
  .prose tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .prose td{padding:2px 0;border:0}
  .prose td:first-child{font-weight:700}
}

/* One app screenshot, in the theme of the page */
.shot{margin:8px 0 24px}
.shot img{display:block;width:100%;height:auto;border-radius:var(--r-inner);box-shadow:0 0 0 1px var(--line),var(--shadow-card)}
.shot figcaption{margin-top:10px;color:var(--muted);font-size:var(--text-fine)}
.shot-dark{display:none!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .shot-light{display:none!important}
  :root:not([data-theme="light"]) .shot-dark{display:block!important}
}
:root[data-theme="dark"] .shot-light{display:none!important}
:root[data-theme="dark"] .shot-dark{display:block!important}

/* Was it useful, and the next and previous articles */
.useful{margin:48px 0 0;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--text-small)}
.pager{display:grid;gap:12px;margin:24px 0 0}
.pager a{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:64px;padding:12px 16px;border:1.5px solid var(--line);border-radius:var(--r-card);color:var(--fg);font-weight:600;text-decoration:none}
.pager small{font:500 var(--text-label)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pager .next{text-align:right}
@media (min-width:560px){
  .pager{grid-template-columns:1fr 1fr}
  .pager .next{grid-column:2}
}
@media (hover:hover){.pager a:hover{border-color:var(--accent)}}

/* /help: the article list and the questions */
.help-list{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.help-list li{margin:0;max-width:none;border-bottom:1px solid var(--line)}
.help-list a{display:flex;flex-direction:column;gap:2px;padding:16px 32px 16px 0;position:relative;color:var(--fg);text-decoration:none}
.help-list a::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:translateY(-50%) rotate(45deg)}
.help-list b{font-size:var(--text-lede);line-height:1.3}
.help-list span{color:var(--muted);font-size:var(--text-small);line-height:1.45}
@media (hover:hover){
  .help-list a:hover b{color:var(--accent)}
  .help-list a:hover::after{border-color:var(--accent)}
}
.help-faq{margin-top:56px}
.qa{max-width:720px}
details{border-top:1px solid var(--line);padding:12px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;font-weight:700;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--panel);font:400 18px/1 var(--mono);color:var(--fg)}
details[open] summary::after{content:"\2212"}
details p{color:var(--muted);padding-top:6px;max-width:60ch}
summary:focus-visible,.help a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (hover:hover){summary:hover{color:var(--accent)}}