/* IAPViewer support site — shared design system
   Light theme, single blue accent tied to the app (deepened for AA contrast).
   Callouts carry icon + label + shape, never colour alone (accessibility). */
:root{
  --page:#ffffff; --surface:#f6f8fb; --surface-2:#fbfcfe;
  --border:#e4e7ec; --border-soft:#eef1f5;
  --ink:#161a1e; --body:#3a4048; --muted:#697280;
  --accent:#0066cc; --accent-ink:#0052a3; --accent-wash:#eaf2fc;
  --tip-wash:#ecfdf3; --tip-edge:#12996a; --tip-ink:#0f7a54;
  --note-wash:#fff8e6; --note-edge:#d99000; --note-ink:#875600;
  --warn-wash:#fdeeee; --warn-edge:#d0453f; --warn-ink:#9b2c27;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --r-sm:6px; --r:10px; --r-lg:14px; --r-pill:999px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --icon-tip:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2018h6M10%2022h4%27%2F%3E%3Cpath%20d%3D%27M12%202a7%207%200%200%200-4%2012.7c.6.5%201%201.3%201%202.1h6c0-.8.4-1.6%201-2.1A7%207%200%200%200%2012%202z%27%2F%3E%3C%2Fsvg%3E");
  --icon-note:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%208h.01M11%2012h1v4h1%27%2F%3E%3C%2Fsvg%3E");
  --icon-warn:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10.3%203.9%201.8%2018a2%202%200%200%200%201.7%203h17a2%202%200%200%200%201.7-3L13.7%203.9a2%202%200%200%200-3.4%200z%27%2F%3E%3Cpath%20d%3D%27M12%209v4M12%2017h.01%27%2F%3E%3C%2Fsvg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--body);background:var(--page);line-height:1.7;font-size:17px}

/* skip-to-content link — hidden until keyboard-focused (WCAG 2.4.1) */
.skip-link{position:absolute;left:8px;top:-52px;z-index:40;background:var(--accent);color:#fff;
  padding:8px 14px;border-radius:var(--r-sm);font-weight:600;text-decoration:none;transition:top .15s}
.skip-link:focus{top:8px}

/* sticky top nav */
.site-nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(8px);-webkit-backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border)}
.nav-inner{max-width:1040px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:12px 24px}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);font-size:1.06rem;letter-spacing:-.01em;text-decoration:none}
.brand-mark{height:22px;width:auto;flex:none}
.brand .dot{color:var(--accent)}
.nav-links{margin-left:auto;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.94rem;font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--accent);font-weight:600}

/* reading column */
.wrap{max-width:720px;margin:0 auto;padding:48px 24px 24px}
.page-head{margin-bottom:34px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);
  color:var(--muted);font-size:.8rem;font-weight:600;padding:5px 12px;border-radius:var(--r-pill)}
.pill svg{width:14px;height:14px;flex:none}

/* type hierarchy (wide h1->h2 step for fast scanning) */
h1{font-size:2.7rem;line-height:1.12;color:var(--ink);font-weight:800;letter-spacing:-.022em;margin:0}
h2{font-size:1.5rem;line-height:1.28;color:var(--ink);font-weight:700;letter-spacing:-.01em;margin:48px 0 12px}
h3{font-size:1.18rem;color:var(--ink);font-weight:650;margin:32px 0 8px}
h4{font-size:1.02rem;color:var(--ink);font-weight:650;margin:24px 0 6px}
p{margin:0 0 16px}
em{font-style:italic}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
/* visible keyboard focus (WCAG 2.4.7) */
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
ul,ol{padding-left:1.35em;margin:0 0 16px}
li{margin:4px 0}
strong{color:var(--ink);font-weight:650}
hr{border:0;border-top:1px solid var(--border);margin:40px 0}

/* code */
code{font-family:var(--mono);font-size:.88em;background:var(--surface);border:1px solid var(--border-soft);
  color:var(--accent-ink);padding:2px 7px;border-radius:var(--r-sm)}
pre{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;overflow-x:auto;margin:0 0 20px}
pre code{background:none;border:0;padding:0;color:var(--ink);font-size:.9rem}

/* tables — elevated reference tables (API endpoints, quick-reference) */
table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.95rem;display:block;overflow-x:auto;
  border:1px solid var(--border);border-radius:var(--r)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border-soft);vertical-align:top}
thead th{color:var(--ink);font-weight:700;background:var(--surface);white-space:nowrap;
  letter-spacing:.01em;border-bottom:2px solid var(--border)}
tbody tr:nth-child(even){background:rgba(20,32,56,.02)}
tbody tr:last-child td{border-bottom:0}

/* callouts: colour + ICON + LABEL + SHAPE (never colour alone) */
.notice,.tip,.important{position:relative;padding:15px 18px 15px 52px;margin:20px 0;
  border-radius:var(--r);border:1px solid var(--border-soft);border-left-width:4px}
.notice::before,.tip::before,.important::before{content:"";position:absolute;left:17px;top:15px;width:22px;height:22px}
.tip{background:var(--tip-wash);border-left-color:var(--tip-edge)}
.tip::before{background-color:var(--tip-ink);-webkit-mask:var(--icon-tip) center/contain no-repeat;mask:var(--icon-tip) center/contain no-repeat}
.tip>strong:first-of-type{color:var(--tip-ink)}
.notice{background:var(--note-wash);border-left-color:var(--note-edge)}
.notice::before{background-color:var(--note-ink);-webkit-mask:var(--icon-note) center/contain no-repeat;mask:var(--icon-note) center/contain no-repeat}
.notice>strong:first-of-type{color:var(--note-ink)}
.important{background:var(--warn-wash);border-left-color:var(--warn-edge);border-left-width:5px}
.important::before{background-color:var(--warn-ink);-webkit-mask:var(--icon-warn) center/contain no-repeat;mask:var(--icon-warn) center/contain no-repeat}
.important>strong:first-of-type{color:var(--warn-ink)}

/* feature cards — for lists of discrete capabilities (e.g. What's new) */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin:20px 0 26px}
.feature-card{display:block;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 20px;text-decoration:none;
  box-shadow:0 2px 4px rgba(16,24,40,.05),0 8px 20px rgba(16,24,40,.07);
  transition:background .15s,border-color .15s,box-shadow .2s,transform .08s ease-out;will-change:transform}
.feature-card .fc-title{display:block;color:var(--ink);font-weight:700;font-size:1.02rem;margin:0 0 6px;transition:color .15s}
.feature-card p{margin:0;color:var(--body);font-size:.95rem;line-height:1.6;transition:color .15s}
.feature-card:hover{background:var(--accent);border-color:var(--accent);text-decoration:none;
  box-shadow:0 16px 34px rgba(0,102,204,.30)}
.feature-card:hover .fc-title,.feature-card:hover p{color:#fff}

/* checklist — verification lists: circled check marker (shape) + text, never colour alone */
ul.checklist{list-style:none;padding-left:0;margin:16px 0 22px}
ul.checklist li{position:relative;padding-left:36px;margin:11px 0}
ul.checklist li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:var(--tip-wash);border:1px solid var(--tip-edge)}
ul.checklist li::after{content:"";position:absolute;left:8px;top:5px;width:5px;height:9px;
  border:solid var(--tip-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* FAQ — compact Q&A: scannable question headers, answers visible + tight */
.faq{margin:6px 0}
.faq h3{position:relative;font-size:1.06rem;color:var(--ink);font-weight:700;
  margin:0;padding:16px 0 8px 20px;border-top:1px solid var(--border-soft)}
.faq>h3:first-child,
.faq>.reveal:first-child h3{border-top:0;padding-top:4px}
.faq h3::before{content:"";position:absolute;left:0;top:21px;width:9px;height:9px;
  border-radius:2px;background:var(--accent)}
.faq>h3:first-child::before,
.faq>.reveal:first-child h3::before{top:9px}
.faq p{margin:0 0 10px 20px}
.faq ul,.faq ol{margin:0 0 10px 20px}
.faq h4{margin:12px 0 6px 20px;font-size:.98rem}
.faq .tip,.faq .notice,.faq .important{margin:12px 0 14px 20px}

/* footer */
.site-footer{border-top:1px solid var(--border);margin-top:64px;padding:32px 24px 48px;text-align:center;color:var(--muted);font-size:.92rem}
.site-footer .footer-links{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-bottom:14px}
.site-footer .footer-links a{color:var(--muted);text-decoration:none;font-weight:500}
.site-footer .footer-links a:hover{color:var(--ink)}
.site-footer p{margin:4px 0}

@media (max-width:640px){
  h1{font-size:2.05rem}
  h2{font-size:1.35rem;margin-top:38px}
  .nav-links{gap:14px}
  .nav-links a{font-size:.85rem}
  .wrap{padding:32px 18px 18px}
  .brand{font-size:1rem}
}

/* scroll-reveal — subtle fade-up. Hidden state applies ONLY under .js-reveal
   (added by JS), so no-JS shows everything. Reduced-motion disables it entirely. */
.js-reveal .reveal{ opacity:0; transform:translateY(10px);
  transition:opacity .3s ease-out, transform .3s ease-out; }
.js-reveal .reveal.is-revealed{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js-reveal .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---- TOC sidebar + scroll-spy (documentation + support pages) ---- */
:root{ --toc-w:190px; --toc-top:76px; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
.wrap h2, .wrap h3{ scroll-margin-top:84px; }
.doc-toc{ margin:0 0 26px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface-2); }
.doc-toc>summary{ cursor:pointer; list-style:none; padding:11px 16px; font-weight:650; color:var(--ink); display:flex; align-items:center; gap:9px; }
.doc-toc>summary::-webkit-details-marker{ display:none; }
.doc-toc>summary::before{ content:""; width:8px; height:8px; border:solid var(--muted); border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .15s; }
.doc-toc[open]>summary::before{ transform:rotate(-135deg); }
.doc-toc .toc-title{ display:none; }
.doc-toc .toc-list{ list-style:none; margin:0; padding:4px 8px 12px; }
.doc-toc .toc-list li{ margin:0; }
.doc-toc .toc-list a{ display:block; padding:6px 10px; border-radius:var(--r-sm); color:var(--muted); text-decoration:none; font-size:.9rem; line-height:1.35; }
.doc-toc .toc-list a:hover{ color:var(--ink); background:var(--surface); }
.doc-toc .toc-list a[aria-current]{ color:var(--accent); font-weight:700; }
@media (min-width:1180px){
  .doc-toc{ position:fixed; top:var(--toc-top); left:max(20px, calc((100% - 720px)/2 - var(--toc-w) - 24px)); width:var(--toc-w); max-height:calc(100vh - var(--toc-top) - 24px); overflow-y:auto; margin:0; background:transparent; border:0; border-radius:0; }
  .doc-toc>summary{ display:none; }
  .doc-toc .toc-title{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; margin:0 0 8px 10px; }
  .doc-toc .toc-list{ padding:0; }
}