/* Help pages (written by scripts/help.js). Colors and fonts come from app.css; the header and
   footer match the other site pages. */

.help-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; padding-top: 44px; padding-bottom: 64px; }
.help-nav { font-size: 14px; }
.help-nav-toggle > summary { display: none; }
.help-nav h2 { margin: 18px 0 6px; font: 600 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.help-nav h2:first-of-type { margin-top: 0; }
.help-nav ul { margin: 0; padding: 0; list-style: none; }
.help-nav a { display: block; padding: 4px 10px; border-radius: 6px; color: var(--text); text-decoration: none; line-height: 1.35; }
.help-nav a:hover { background: var(--tint); }
.help-nav a[aria-current="page"] { background: var(--amber-tint); color: var(--amber-dark); font-weight: 600; }

.help-article { min-width: 0; max-width: 70ch; font-size: 17px; line-height: 1.65; color: var(--text); }
.help-article .eyebrow a { color: inherit; text-decoration: none; }
.help-article h1 { font: clamp(32px, 4vw, 44px)/1.1 var(--serif); color: var(--ink-strong); margin: 0 0 22px; }
.help-article h2 { font: 27px/1.2 var(--serif); color: var(--ink-strong); margin: 38px 0 10px; }
.help-article h3 { font: 600 17px var(--sans); color: var(--ink-strong); margin: 26px 0 6px; }
.help-article p, .help-article li { margin: 0 0 14px; }
.help-article ul, .help-article ol { padding-left: 24px; margin: 0 0 16px; }
.help-article li { margin-bottom: 6px; }
.help-article li > p { margin-bottom: 6px; }
.help-article a { color: var(--amber-dark); }
.help-article strong { color: var(--ink-strong); }
.help-article code { font: 14.5px var(--mono); background: var(--tint); padding: 1px 5px; border-radius: 4px; }
.help-article table { width: 100%; border-collapse: collapse; margin: 6px 0 20px; font-size: 15.5px; line-height: 1.45; }
.help-article th, .help-article td { text-align: left; vertical-align: top; padding: 9px 10px; border-top: 1px solid var(--line); }
.help-article thead th { border-top: 0; border-bottom: 2px solid var(--rule); font: italic 15px var(--serif); color: var(--muted); }
.help-article blockquote { margin: 0 0 16px; padding: 2px 18px; border-left: 3px solid var(--rule); color: var(--muted); }

.callout { margin: 0 0 22px; padding: 14px 18px; border-radius: 8px; border-left: 4px solid var(--amber); background: var(--amber-tint); font-size: 16px; }
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }
.callout.tip { border-left-color: var(--green); background: var(--green-tint); }
.callout.note { border-left-color: var(--blue); background: var(--blue-tint); }

.demo-cta { margin: 6px 0 22px; }
.demo-link.btn { gap: 8px; color: var(--ink); text-decoration: none; font-size: 15px; white-space: normal; text-align: left; padding: 8px 16px; line-height: 1.35; }
.demo-link.btn::before { flex: none; }
.demo-link.btn::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>') center / contain no-repeat; color: var(--amber); }
.demo-link.btn:hover { border-color: var(--amber); }

.help-related { margin-top: 40px; padding-top: 6px; border-top: 1px solid var(--border); }
.help-related h2 { font: 600 15px var(--sans); margin: 14px 0 8px; }
.help-related ul { margin: 0; }
.help-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; }
.help-pager a { flex: 1 1 0; max-width: 48%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.35; }
.help-pager a:hover { border-color: var(--amber); }
.help-pager a span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.help-pager .next { text-align: right; margin-left: auto; }
.help-contact { margin-top: 32px; font-size: 14.5px; color: var(--muted); }

.help-home { padding-top: 52px; padding-bottom: 64px; }
.help-hero { max-width: 720px; margin-bottom: 18px; }
.help-hero h1 { font: clamp(38px, 5vw, 56px)/1.05 var(--serif); color: var(--ink-strong); margin: 0; }
.help-hero .lead { margin: 16px 0 22px; font-size: 18px; line-height: 1.55; color: var(--text); }
.help-search input { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font: 16px var(--sans); color: var(--ink); }
.help-search input:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
.help-results { margin: 10px 0 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.help-results li a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.help-results li a:hover, .help-results li a:focus { background: var(--tint); }
.help-results small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 1px; }
.help-results .none { padding: 9px 12px; color: var(--muted); }
.help-section { padding: 26px 0 8px; border-top: 1px solid var(--border); margin-top: 22px; }
.help-section h2 { font: 28px/1.2 var(--serif); color: var(--ink-strong); margin: 0 0 12px; }
.help-section ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 36px; margin: 0; padding: 0; list-style: none; }
.help-section li { padding: 8px 0; }
.help-section li a { font-weight: 600; color: var(--ink-strong); text-decoration: none; font-size: 16px; }
.help-section li a:hover { color: var(--amber-dark); text-decoration: underline; }
.help-section li span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }

@media (max-width: 900px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 20px; }
  .help-nav-toggle { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 0 12px; }
  .help-nav-toggle > summary { display: list-item; padding: 10px 0; font-weight: 600; color: var(--ink); cursor: pointer; }
  .help-nav-toggle[open] { padding-bottom: 12px; }
  .help-article { font-size: 16.5px; }
  .help-article table { display: block; overflow-x: auto; }
  .help-pager { flex-direction: column; }
  .help-pager a { max-width: none; }
}
.copy-email { margin-left: 6px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font: 12.5px var(--sans); color: var(--muted); cursor: pointer; }
.copy-email:hover { border-color: var(--amber); color: var(--ink); }
.help-helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 36px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 15px; }
.help-helpful > span { margin-right: 6px; font-weight: 600; color: var(--ink-strong); }
.help-helpful button { min-width: 64px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); font: 14px var(--sans); color: var(--ink); cursor: pointer; }
.help-helpful button:hover { border-color: var(--amber); }
.help-helpful:has(> span:only-child) > span { font-weight: 400; }
.shot-figure { margin: 4px 0 22px; }
.shot { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgb(var(--shadow-rgb) / .07); background: var(--surface); }
/* The screenshots are of the light look; in dark, tone them down so they don't glare. */
:root[data-theme='dark'] .shot { filter: brightness(0.86); border-color: var(--rule); }