/* PitchStation Apps documentation. Self-contained on purpose: this folder
   (HTML + this file + apps-docs.js) must be movable to another origin as a
   unit if Apps is ever hosted separately — see architecture.html §4. */
:root{--bg:#0B0D12;--panel:#131722;--panel2:#0E1420;--border:rgba(122,220,180,.16);--fg:#EEF2F7;--mut:#9AA7BD;--dim:#65718A;
  --grn:#7ADCB4;--grn2:#B7F0D4;--blue:#5EA8FF;--amber:#E8A23D;--red:#F87171}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:15.5px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
.ad-top{position:sticky;top:0;z-index:5;background:rgba(11,13,18,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.ad-top-in{max-width:980px;margin:0 auto;padding:10px 26px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ad-brand{font-weight:800;color:var(--fg);text-decoration:none;letter-spacing:-.01em}
.ad-brand span{color:var(--grn)}
.ad-nav{display:flex;gap:4px;flex-wrap:wrap}
.ad-nav a{color:var(--mut);text-decoration:none;font-size:13.5px;padding:6px 11px;border-radius:8px}
.ad-nav a:hover{color:var(--fg);background:rgba(122,220,180,.07)}
.ad-nav a[aria-current="page"]{color:var(--grn2);background:rgba(122,220,180,.12)}
.ad-out{margin-left:auto;font-size:13px;color:var(--grn);text-decoration:none;border:1px solid rgba(122,220,180,.3);border-radius:8px;padding:5px 10px;white-space:nowrap}
.ad-out:hover{background:rgba(122,220,180,.07)}
.ad-md{font-size:12px;color:var(--dim)}
.wrap{max-width:980px;margin:0 auto;padding:46px 26px 90px}
.kicker{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grn);border:1px solid rgba(122,220,180,.4);border-radius:999px;padding:5px 14px;background:rgba(122,220,180,.07);margin-bottom:18px}
h1{font-size:32px;line-height:1.2;letter-spacing:-.015em;margin-bottom:12px}
h1 em{font-style:normal;background:linear-gradient(100deg,var(--grn2),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--mut);max-width:76ch;font-size:16.5px}
h2{font-size:22px;margin:56px 0 10px;letter-spacing:-.01em;scroll-margin-top:70px}
h2 .sec{color:var(--dim);font-size:13px;font-weight:600;margin-right:10px;font-family:ui-monospace,Menlo,monospace}
h3{font-size:16.5px;margin:26px 0 6px;color:var(--grn2);scroll-margin-top:70px}
p{color:var(--mut);margin:9px 0}
p b,li b,td b,p strong,li strong{color:var(--fg)}
code{font-family:ui-monospace,Menlo,monospace;font-size:.87em;background:rgba(122,220,180,.09);border:1px solid rgba(122,220,180,.2);border-radius:5px;padding:1px 6px;color:var(--grn2)}
:not(pre)>code{overflow-wrap:anywhere}
pre{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin:14px 0;font:13px/1.65 ui-monospace,Menlo,monospace;overflow-x:auto;color:#D6E2F5}
pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
ul,ol{margin:9px 0 9px 22px;color:var(--mut)}
li{margin:6px 0}
.prompt{position:relative;background:var(--panel2);border:1px solid rgba(94,168,255,.3);border-radius:12px;padding:18px 76px 16px 18px;margin:16px 0;font:13px/1.65 ui-monospace,Menlo,monospace;color:#C9D8F2;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.prompt .lbl{position:absolute;top:-9px;left:14px;background:var(--bg);color:var(--blue);font:800 10px/1 -apple-system,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:99px;border:1px solid rgba(94,168,255,.3);white-space:nowrap}
.prompt button{position:absolute;top:9px;right:9px;border:1px solid rgba(94,168,255,.35);background:rgba(94,168,255,.1);color:#AFCBFF;font:700 11px/1 -apple-system,sans-serif;border-radius:7px;padding:7px 11px;cursor:pointer}
.prompt button:hover{background:rgba(94,168,255,.2)}
.ph{color:var(--amber);font-weight:700}
.callout{background:rgba(122,220,180,.05);border:1px solid rgba(122,220,180,.28);border-radius:12px;padding:14px 18px;margin:16px 0;font-size:14.5px;color:var(--mut)}
.callout.warn{background:rgba(232,162,61,.06);border-color:rgba(232,162,61,.32)}
.callout.blue{background:rgba(94,168,255,.06);border-color:rgba(94,168,255,.3)}
.callout.red{background:rgba(248,113,113,.06);border-color:rgba(248,113,113,.32)}
.callout b{color:var(--fg)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:min(620px,100%)}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);border-bottom:1px solid var(--border);padding:8px 10px}
td{border-bottom:1px solid rgba(122,220,180,.08);padding:9px 10px;vertical-align:top;color:var(--mut)}
td:first-child{color:var(--fg)}
td.m{font-family:ui-monospace,Menlo,monospace;font-size:12px;white-space:nowrap}
.yes{color:var(--grn)} .no{color:var(--dim)} .part{color:var(--amber)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin:18px 0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.card b{display:block;margin-bottom:4px;color:var(--fg);font-size:14.5px}
.card p{font-size:13.5px;margin:0;line-height:1.6}
.card a.more{display:inline-block;margin-top:8px;font-size:13px}
.steps{counter-reset:st;margin:18px 0}
.step{display:flex;gap:16px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin:10px 0}
.step::before{counter-increment:st;content:counter(st);flex:0 0 28px;height:28px;border-radius:999px;background:rgba(122,220,180,.14);color:var(--grn2);font:800 13px/28px -apple-system,sans-serif;text-align:center}
.step div{flex:1;min-width:0}
.step>div>b{display:block;margin-bottom:2px;color:var(--fg)}
.step p{font-size:14px;margin:3px 0 0}
figure{margin:22px 0;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 14px 8px;overflow-x:auto}
figure svg{display:block;width:100%;height:auto;min-width:640px}
figcaption{font-size:13px;color:var(--dim);padding:8px 4px 4px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px;padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:12px}
.toc a{font-size:13px;color:var(--mut);text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:4px 11px}
.toc a:hover{color:var(--fg);border-color:rgba(122,220,180,.4)}
.tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;white-space:nowrap;vertical-align:1px}
.t-live{background:rgba(122,220,180,.14);color:var(--grn)} .t-soon{background:rgba(232,162,61,.14);color:var(--amber)} .t-plan{background:rgba(94,168,255,.14);color:var(--blue)} .t-no{background:rgba(101,113,138,.18);color:var(--mut)}
.foot{margin-top:70px;padding-top:18px;border-top:1px solid var(--border);font-size:12.5px;color:var(--dim)}
.foot a{color:var(--grn)}
/* Screenshots: the frame is exactly the image, so a callout marker's left/top
   (in % of the image) place the marker's centre on the control it names. */
figure.shot{padding:10px 10px 6px;overflow:visible}
.shot-frame{position:relative;container-type:inline-size}
figure img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--border);background:var(--panel2)}
figure.shot.narrow .shot-frame{max-width:400px;margin:0 auto}
.shot-frame>.callout{all:unset;position:absolute;left:0;top:0;transform:translate(-50%,-50%);box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  width:clamp(18px,2.4cqw,24px);height:clamp(18px,2.4cqw,24px);border-radius:999px;background:#7ADCB4;border:2px solid #0B0D12;color:#0B0D12;
  font:700 clamp(10.5px,1.3cqw,13px)/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none}
/* The numbered legend under a screenshot uses the same badge. */
ol.legend{list-style:none;margin:10px 0 20px;padding:0;counter-reset:lg}
ol.legend li{position:relative;padding-left:34px;margin:7px 0;font-size:14.5px}
ol.legend li::before{counter-increment:lg;content:counter(lg);position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:999px;background:var(--grn);color:var(--bg);font:700 12px/22px -apple-system,BlinkMacSystemFont,sans-serif;text-align:center}
/* Diagrams come in two drawings: wide from 980 px up, where the figure is at its full width, and tall below,
   so labels stay 11 px or more everywhere. The tall drawing never shrinks below 330 px: on a smaller phone
   the figure scrolls sideways a little instead. */
figure .dg-tall{display:none}
/* A step list split by command boxes keeps counting: .s3 starts at 3. */
.steps.s2{counter-reset:st 1}.steps.s3{counter-reset:st 2}.steps.s4{counter-reset:st 3}.steps.s5{counter-reset:st 4}.steps.s6{counter-reset:st 5}
.steps.s7{counter-reset:st 6}.steps.s8{counter-reset:st 7}.steps.s9{counter-reset:st 8}.steps.s10{counter-reset:st 9}
@media(max-width:979px){figure svg.dg-wide{display:none}figure svg.dg-tall{display:block;min-width:330px;max-width:440px;margin:0 auto}}
/* Screenshots on small screens. Markers keep a fixed minimum size (18 px), so a screenshot shrunk to a phone's
   width would have them cover its labels. Up to 760 px a wide screenshot keeps at least 750 px, the width at
   which its markers cover no more of it than on a desktop, and its figure scrolls sideways. A form screenshot
   (figure.shot.narrow) keeps its width, and once it is narrower than 400 px its markers sit on the image's
   left edge, beside the labels instead of on them. */
@media(max-width:760px){figure.shot:not(.narrow){overflow-x:auto;-webkit-overflow-scrolling:touch}figure.shot:not(.narrow) .shot-frame{min-width:750px}
  figure.shot:not(.narrow)>figcaption::before{content:"Scroll sideways to see the whole screenshot. ";color:var(--mut)}}
@media(max-width:479px){figure.shot.narrow .shot-frame>.callout{left:0!important}}
/* Below about 1,000 px the sticky header wraps to two rows (108 px): keep jump targets clear of it. Below
   720 px it can wrap to three rows (up to 152 px), so there it scrolls away with the page instead. */
@media(max-width:1100px){h2,h3{scroll-margin-top:124px}}
@media(max-width:719px){.ad-top{position:static}h2,h3{scroll-margin-top:16px}}
/* Phones: brand and Apps home share the header's first row, and the navigation takes the second. */
@media(max-width:640px){h1{font-size:26px}.wrap{padding:34px 18px 70px}.ad-md{display:none}figure{padding:10px 10px 6px}
  .prompt{padding:40px 14px 14px}.prompt .lbl{white-space:normal;max-width:calc(100% - 96px);line-height:1.3;border-radius:9px}
  .ad-top-in{gap:8px 14px;padding:10px 18px}.ad-out{order:1}.ad-nav{order:2;width:100%;margin-left:-11px}
  /* Tables become one small card per row: the first cell is the title, the others carry their column heading (data-label). */
  .tbl-wrap table,.tbl-wrap tbody,.tbl-wrap tr,.tbl-wrap td,.tbl-wrap th{display:block;width:auto;min-width:0}
  .tbl-wrap tr:first-child{display:none}
  .tbl-wrap tr{padding:9px 0;border-bottom:1px solid rgba(122,220,180,.12)}
  .tbl-wrap td{border:0;padding:2px 0}
  .tbl-wrap td:first-child{color:var(--fg);font-weight:600}
  .tbl-wrap td.m{white-space:normal;overflow-wrap:anywhere}
  .tbl-wrap td[data-label]:not(:first-child)::before{content:attr(data-label);margin-right:8px;font:700 10.5px/1 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
  .tbl-wrap td[data-label]:nth-child(2):last-child::before{content:none}
  .tbl-wrap th{padding:14px 0 2px;border:0}}