/* ============================================================
   OOWIA - API DOCS (api-docs.css)
   Page-specific styles on top of public.css (tokens, nav, buttons,
   reveal engine, footer and a11y live in public.css).
   The reference shell for the Oowia REST API.
   ============================================================ */

/* ============ HERO ============ */
.ahero{position:relative;overflow:hidden;padding-top:calc(var(--navh) + clamp(44px,7.5vh,96px));padding-bottom:clamp(36px,5vw,64px)}
.ahero-glyph{position:absolute;top:50%;right:-1vw;transform:translateY(-54%);z-index:0;pointer-events:none;user-select:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;line-height:.82;color:transparent;
  -webkit-text-stroke:1.5px rgba(11,11,12,.13);font-size:clamp(13rem,26vw,28rem);
  animation:dGlyphFloat 12s ease-in-out infinite}
@keyframes dGlyphFloat{0%,100%{transform:translateY(-58%) rotate(-2deg)}50%{transform:translateY(-48%) rotate(2deg)}}
.ahero .wrap{position:relative;z-index:1}
.akick{font-family:"Inter",sans-serif;font-size:.685rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-40);
  margin:0 0 clamp(14px,2vw,22px);display:flex;align-items:center;gap:.7em}
.akick .dot{width:5px;height:5px;border-radius:50%;background:var(--crimson);flex:none;transform:translateY(-1px)}
.ahero-h{font-size:clamp(2rem,5.3vw,6.4rem);margin:0;white-space:nowrap}
.ahero-lede{margin:clamp(16px,2.4vh,26px) 0 0;font-size:clamp(1rem,1.24vw,1.22rem);line-height:1.62;color:var(--ink-60);max-width:58ch}
.ahero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,3vw,48px);flex-wrap:wrap;
  margin-top:clamp(24px,3.4vh,40px);padding-bottom:clamp(8px,1vw,16px)}

/* base url pill */
.baseurl{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--line);border-radius:99px;
  background:rgba(253,252,250,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);max-width:100%;min-width:0;overflow:hidden}
.bu-label{font-family:"Inter Tight";font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-40);white-space:nowrap}
.baseurl code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bu-copy{margin-left:auto;flex:none}

/* hero fact badges */
.abadges{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0}
.abadges li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line);border-radius:99px;
  background:rgba(253,252,250,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:"Inter Tight",sans-serif;font-size:.78rem;font-weight:500;letter-spacing:-.01em;color:var(--ink-80);white-space:nowrap}
.abadges li b{font-weight:600;color:var(--ink)}
.abadges .bdot{width:5px;height:5px;border-radius:50%;background:var(--crimson);flex:none}

/* ============ LAYOUT ============ */
/* .toc-rail in public.css; api overrides */
.doc-wrap{padding-bottom:clamp(28px,4vw,60px)}
.doc-grid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start;padding-top:clamp(10px,2vh,24px)}
@media(max-width:1080px){.doc-grid{grid-template-columns:minmax(0,1fr)}}

/* --- docs column --- */
.docs{max-width:88ch;min-width:0}
.dsec{margin-bottom:clamp(46px,6vw,84px);scroll-margin-top:calc(var(--navh) + 20px)}
.dsec:last-child{margin-bottom:0}
.dsec-head{position:relative;margin-bottom:clamp(16px,2vw,24px)}
.dsec-no{position:absolute;top:-.16em;left:-.06em;z-index:0;font-family:"Instrument Serif";font-style:italic;
  font-size:clamp(3.2rem,4.6vw,4.3rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(200,16,46,.4);user-select:none}
.cl-t{position:relative;z-index:1;display:block;padding-left:clamp(42px,4.4vw,60px);overflow:hidden}
.cl-t .ln{padding-block:.08em .12em;margin-block:-.08em -.12em}
.dsec-head::after{content:"";display:block;width:56px;height:2px;background:var(--ink);
  margin:12px 0 0 clamp(42px,4.4vw,60px);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .25s}
.dsec.is-in .dsec-head::after{transform:scaleX(1)}

/* --- prose --- */
.docs p{margin:0 0 1.05em;font-size:.98rem;line-height:1.75;color:var(--ink-80)}
.docs p:last-child{margin-bottom:0}
.docs strong{color:var(--ink);font-weight:600}
.docs a{color:var(--crimson);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(200,16,46,.35);transition:text-decoration-color .3s}@media(hover:hover){
.docs a:hover{text-decoration-color:var(--crimson)}}
.docs p code,.docs li code,.docs h4 code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;color:var(--crimson);
  background:var(--crimson-soft);padding:2px 7px;border-radius:7px}
.sub-h{font-family:"Inter Tight";font-weight:600;font-size:1.18rem;letter-spacing:-.03em;margin:clamp(22px,3vw,32px) 0 8px;color:var(--ink)}
.sub-p{margin:0 0 16px;font-size:.94rem;color:var(--ink-60)}
.doc-list{list-style:none;margin:0 0 1.1em;padding:0;display:flex;flex-direction:column;gap:.55em}
.doc-list li{position:relative;padding-left:22px;font-size:.95rem;line-height:1.65;color:var(--ink-80)}
.doc-list li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:2px;background:var(--crimson)}
.callout{margin:1.25em 0 1.1em;padding:14px 18px;border-radius:14px;background:var(--crimson-soft);
  border:1px solid rgba(200,16,46,.2);font-size:.84rem;line-height:1.6;color:var(--ink-80)}
.callout b{font-weight:600;color:var(--crimson)}
.pub-tag{display:inline-block;padding:1px 9px;border-radius:99px;background:var(--ink);color:var(--ivory);
  font-family:"Inter Tight";font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* ============ CODE CARDS ============ */
.codecard{margin:clamp(14px,1.8vw,22px) 0 clamp(18px,2.4vw,28px);border-radius:18px;overflow:hidden;border:1px solid rgba(11,11,12,.14);
  background:var(--ink);box-shadow:0 30px 60px -34px rgba(11,11,12,.55)}
.code-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(247,244,239,.12);
  background:rgba(255,255,255,.02)}
.dots{display:flex;gap:6px;flex:none}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(247,244,239,.22)}
.dots i:first-child{background:var(--crimson)}
.dots i:nth-child(2){background:rgba(247,244,239,.35)}
.code-title{font-family:"Inter Tight";font-size:.72rem;font-weight:500;letter-spacing:.05em;color:rgba(247,244,239,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.code-head .ccopy{margin-left:auto}
.code{display:block;margin:0;padding:18px 20px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.82rem;line-height:1.7;color:#E8E4DC;tab-size:2;-webkit-overflow-scrolling:touch}

/* syntax tinting */
.c-kw{color:#FF8AA0}
.c-str{color:#F0C36B}
.c-var{color:#9CC5FF}
.c-key{color:#FF8AA0}
.c-num{color:#9CC5FF}

/* copy button */
.ccopy{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;border:1px solid var(--line);
  font-family:"Inter Tight";font-size:.68rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);
  background:rgba(255,255,255,.5);transition:color .3s,border-color .3s,background .3s}@media(hover:hover){
.ccopy:hover{color:var(--ink);border-color:var(--ink-40)}}
.ccopy.done{color:#fff;background:var(--ink);border-color:var(--ink)}
.code-head .ccopy{border-color:rgba(247,244,239,.2);color:rgba(247,244,239,.7);background:rgba(255,255,255,.04)}@media(hover:hover){
.code-head .ccopy:hover{color:#fff;border-color:rgba(247,244,239,.5)}}
.code-head .ccopy.done{background:var(--crimson);border-color:var(--crimson);color:#fff}

/* ============ ENDPOINTS ============ */
.endpoints{list-style:none;margin:clamp(18px,2.4vw,28px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px)}
@media(max-width:820px){.endpoints{grid-template-columns:1fr}}
.ep{position:relative;border:1px solid var(--line);border-radius:18px;padding:18px 20px;background:var(--ivory-pure);overflow:hidden;
  transition:transform .5s var(--ease),border-color .35s,box-shadow .5s var(--ease)}
.ep::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .6s var(--ease);z-index:0}@media(hover:hover){
.ep:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 26px 48px -30px rgba(11,11,12,.45)}}@media(hover:hover){
.ep:hover::before{transform:translateY(0)}}
.ep>*{position:relative;z-index:1;transition:color .45s}
.ep-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.http-m{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:46px;padding:3px 10px;border-radius:99px;
  font-family:"Inter Tight";font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.m-get{background:var(--ink-08);color:var(--ink);border:1px solid var(--line)}
.m-post{background:var(--crimson);color:#fff}
.m-put{background:var(--crimson-soft);color:var(--crimson);border:1px solid rgba(200,16,46,.28)}
.m-delete{background:transparent;color:var(--crimson);border:1px solid rgba(200,16,46,.5)}
.m-patch{background:var(--ink);color:var(--ivory)}
.ep-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-arrow{margin-left:auto;color:var(--ink-40);font-size:.8rem;transition:transform .4s var(--ease),color .4s}@media(hover:hover){
.ep:hover .ep-arrow{transform:translateX(4px);color:#fff}}
.ep h3{font-family:"Inter Tight";font-weight:600;font-size:1.02rem;letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.ep p{margin:0;font-size:.82rem;line-height:1.55;color:var(--ink-60)}
.ep-meta{display:flex;align-items:center;gap:8px;margin-top:12px;font-family:"Inter Tight";font-size:.66rem;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.ep-meta i{width:3px;height:3px;border-radius:50%;background:var(--crimson)}@media(hover:hover){
.ep:hover .ep-meta{color:rgba(247,244,239,.5)}}@media(hover:hover){
.ep:hover h3{color:var(--ivory)}}@media(hover:hover){
.ep:hover .ep-path{color:#fff}}@media(hover:hover){
.ep:hover p{color:rgba(247,244,239,.6)}}@media(hover:hover){
.ep:hover .m-get{background:rgba(247,244,239,.14);border-color:rgba(247,244,239,.2);color:#fff}}

/* ============ ERROR TABLE ============ */
.errtable{margin:clamp(14px,1.8vw,20px) 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--ivory-pure)}
.er-row{display:grid;grid-template-columns:74px minmax(0,1fr) 66px;align-items:center;gap:14px;padding:11px 18px;border-bottom:1px solid var(--line)}
.er-row:last-child{border-bottom:0}
.er-head{background:var(--ink);border-bottom:2px solid var(--ink);padding:11px 18px}
.er-head span{font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,244,239,.55)}
.er-row code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;color:var(--crimson);font-weight:500}
.er-row span{font-size:.88rem;line-height:1.55;color:var(--ink-80)}
.er-row b{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-40)}
@media(max-width:620px){.er-row{grid-template-columns:56px minmax(0,1fr)}.er-row b{grid-column:2;justify-self:start}}

/* ============ RATE LIMIT CARDS ============ */
.lim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);margin:clamp(16px,2vw,24px) 0}
@media(max-width:820px){.lim-grid{grid-template-columns:1fr}}
.limcard{border:1px solid var(--line);border-radius:18px;padding:20px 22px;background:var(--ivory-pure)}
.lim-n{display:block;font-family:"Inter Tight";font-weight:600;letter-spacing:-.045em;font-size:clamp(2.1rem,3vw,2.8rem);line-height:1;color:var(--crimson);margin-bottom:12px}
.limcard h4{margin:0 0 6px;font-family:"Inter Tight";font-weight:600;font-size:.98rem;letter-spacing:-.02em;color:var(--ink)}
.limcard p{margin:0;font-size:.82rem;line-height:1.55;color:var(--ink-60)}

/* ============ WEBHOOK CARDS ============ */
.wh-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px);margin:clamp(16px,2vw,24px) 0}
@media(max-width:820px){.wh-grid{grid-template-columns:1fr}}
.whcard{border:1px solid var(--line);border-radius:18px;padding:20px 22px;background:var(--ivory-pure);position:relative;overflow:hidden;
  transition:transform .5s var(--ease),border-color .35s,box-shadow .5s var(--ease)}@media(hover:hover){
.whcard:hover{transform:translateY(-4px);border-color:rgba(200,16,46,.35);box-shadow:0 24px 44px -30px rgba(200,16,46,.4)}}
.wh-ev{display:inline-block;margin-bottom:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;color:var(--crimson);
  background:var(--crimson-soft);padding:3px 10px;border-radius:8px}
.whcard h4{margin:0 0 6px;font-family:"Inter Tight";font-weight:600;font-size:1rem;letter-spacing:-.02em;color:var(--ink)}
.whcard p{margin:0;font-size:.84rem;line-height:1.55;color:var(--ink-60)}

/* ============ TABS ============ */
.tabs{display:flex;align-items:center;gap:6px;margin:clamp(16px,2vw,24px) 0 0}
.tab{padding:9px 18px;border-radius:99px;border:1px solid var(--line);background:var(--ivory-pure);
  font-family:"Inter Tight";font-size:.78rem;font-weight:500;color:var(--ink-60);transition:color .3s,border-color .3s,background .3s}@media(hover:hover){
.tab:hover{color:var(--ink);border-color:var(--ink-40)}}
.tab.is-on{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.tab:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.sample{display:none}
.sample.is-on{display:block}

/* ============ BAND ============ */
/* band in public.css */
.sec-band{padding-block:0 clamp(80px,10vw,140px)}

/* ============ RESPONSIVE ============ */
@media(max-width:720px){
  .ahero-glyph{right:-9vw;opacity:.6}
  .dsec-no{font-size:2.9rem}
  .errtable{overflow-x:auto}
}