/* ===========================================================================
   Alerra.ai - documentation surfaces (Integrate, Protocol).

   Extends app.css rather than restating it: every colour, rule and font here
   comes from the tokens already defined there. Reference documentation wants
   less decoration than the simulator pages, not more, so this file adds
   density and hierarchy and nothing else.
   ========================================================================= */

/* ---------- page frame: contents rail beside the content ---------- */

.doc-layout{display:grid;gap:clamp(24px,4vw,56px);
  grid-template-columns:minmax(0,1fr) 210px;align-items:start}
.doc-main{min-width:0}
@media (max-width:1080px){
  .doc-layout{grid-template-columns:1fr}
  .doc-rail-mount{display:none}
}

.doc-rail{position:sticky;top:calc(var(--nav-h) + 22px);display:flex;flex-direction:column;gap:9px;
  padding-left:14px;border-left:1px solid var(--line)}
.doc-rail .eyebrow{margin-bottom:3px}
.doc-rail a{font-size:12.5px;color:var(--dim-2);line-height:1.35;transition:color .18s}
.doc-rail a:hover{color:var(--ink)}
.doc-rail a[aria-current="true"]{color:var(--mark-green)}

.doc-sec{scroll-margin-top:calc(var(--nav-h) + 20px);padding-block:clamp(34px,5vh,62px)}
.doc-sec + .doc-sec{border-top:1px solid var(--line)}
.doc-sec > * + *{margin-top:18px}

/* ---------- code ---------- */

.doc-code-wrap{position:relative;background:var(--surface-3);
  border:1px solid var(--line);border-radius:5px;overflow:hidden}
.doc-code-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface);
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim-2)}
.doc-code{font-family:var(--mono);font-size:12.5px;line-height:1.7;
  padding:14px 15px;overflow-x:auto;white-space:pre;color:var(--ink);
  -webkit-overflow-scrolling:touch}
.doc-code .k{color:var(--cyan)}
.doc-code .s{color:var(--mark-green)}
.doc-code .nm{color:var(--gold)}
.doc-code .kw{color:var(--mark-red)}
.doc-code .cm{color:var(--dim-2);font-style:italic}
.doc-code .p{color:var(--dim-2)}

.doc-copy{position:absolute;top:8px;right:8px;z-index:2;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);background:var(--surface-2);border:1px solid var(--line);
  border-radius:3px;padding:5px 9px;transition:color .18s,border-color .18s}
.doc-code-head .doc-copy{position:static}
.doc-copy:hover{color:var(--ink);border-color:var(--line-strong)}
.doc-copy[data-done="true"]{color:var(--mark-green);border-color:rgba(46,230,168,.4)}

/* ---------- tabs ---------- */

.doc-tabgroup{border:1px solid var(--line);border-radius:5px;overflow:hidden;
  background:var(--surface)}
.doc-tabs{display:flex;flex-wrap:wrap;gap:2px;padding:6px 6px 0;
  border-bottom:1px solid var(--line)}
.doc-tab{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim-2);padding:8px 13px;border-radius:4px 4px 0 0;
  border:1px solid transparent;border-bottom:none;transition:color .18s,background .18s}
.doc-tab:hover{color:var(--ink)}
.doc-tab[aria-selected="true"]{color:var(--mark-green);background:var(--surface-3);
  border-color:var(--line)}
.doc-panel{padding:0}
.doc-panel .doc-code-wrap{border:0;border-radius:0}

/* ---------- endpoint cards ---------- */

.ep{border:1px solid var(--line);border-radius:6px;background:var(--surface);
  padding:clamp(14px,2vw,20px);display:flex;flex-direction:column;gap:13px}
.ep + .ep{margin-top:14px}
.ep-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ep-method{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  border-radius:3px;padding:4px 8px;flex:0 0 auto}
.ep-method.is-get{color:var(--cyan);border:1px solid rgba(90,214,255,.35);background:rgba(90,214,255,.07)}
.ep-method.is-post{color:var(--mark-green);border:1px solid rgba(46,230,168,.35);background:rgba(46,230,168,.07)}
.ep-method.is-put{color:var(--gold);border:1px solid rgba(255,189,89,.35);background:rgba(255,189,89,.07)}
.ep-method.is-del{color:var(--mark-red);border:1px solid rgba(255,79,94,.35);background:rgba(255,79,94,.07)}
.ep-path{font-family:var(--mono);font-size:13.5px;color:var(--ink);word-break:break-all}
.ep-name{font-size:12.5px;color:var(--dim);margin-left:auto}
.ep-desc{font-size:14px;color:var(--dim);line-height:1.6;max-width:70ch}
.ep-meta{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:620px){.ep-name{margin-left:0;width:100%}}

/* ---------- tables ---------- */

.doc-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px;
  background:var(--surface)}
.doc-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.doc-table th{text-align:left;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);
  padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.doc-table td{padding:12px 14px;border-bottom:1px solid var(--line);
  color:var(--dim);line-height:1.55;vertical-align:top}
.doc-table tr:last-child td{border-bottom:0}
.doc-table code,.doc-table .mono{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.doc-table .req{color:var(--mark-green);font-family:var(--mono);font-size:11px}
.doc-table .opt{color:var(--dim-2);font-family:var(--mono);font-size:11px}

/* On a phone a wide table becomes stacked rows: the header is repeated per
   cell through data-label, so no column loses its meaning. */
@media (max-width:640px){
  .doc-table,.doc-table tbody,.doc-table tr,.doc-table td{display:block;width:100%;min-width:0}
  .doc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .doc-table tr{border-bottom:1px solid var(--line);padding:6px 0}
  .doc-table tr:last-child{border-bottom:0}
  .doc-table td{border-bottom:0;padding:5px 14px;display:grid;
    grid-template-columns:minmax(88px,34%) 1fr;gap:10px}
  .doc-table td::before{content:attr(data-label);font-family:var(--mono);font-size:10px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--dim-2);padding-top:2px}
}

/* ---------- ledger (does / does not cross) ---------- */

.doc-ledger{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:760px){.doc-ledger{grid-template-columns:1fr}}
.doc-ledger .ledger-col{border:1px solid var(--line);border-radius:6px;
  background:var(--surface);padding:clamp(14px,2vw,20px)}
.doc-ledger .ledger-col.stays{border-color:rgba(255,79,94,.26)}
.doc-ledger .ledger-col.moves{border-color:rgba(46,230,168,.26)}
.doc-ledger .ledger-title{font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;font-family:var(--mono);margin-bottom:12px}
.doc-ledger .stays .ledger-title{color:var(--mark-red)}
.doc-ledger .moves .ledger-title{color:var(--mark-green)}
.doc-ledger ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.doc-ledger li{display:flex;gap:10px;font-size:13.5px;color:var(--dim);line-height:1.5}
.doc-ledger .ic{font-family:var(--mono);font-size:13px;flex:0 0 auto;line-height:1.5}
.doc-ledger .stays .ic{color:var(--mark-red)}
.doc-ledger .moves .ic{color:var(--mark-green)}

/* ---------- numbered steps ---------- */

.doc-steps{list-style:none;display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--line);border-radius:6px;background:var(--surface);overflow:hidden}
.doc-steps li{display:flex;gap:14px;padding:15px clamp(14px,2vw,18px);
  border-bottom:1px solid var(--line)}
.doc-steps li:last-child{border-bottom:0}
.doc-steps .n{font-size:11px;color:var(--mark-green);flex:0 0 auto;padding-top:2px;letter-spacing:.08em}
.doc-steps .t{font-size:14.5px;font-weight:700;color:var(--ink)}
.doc-steps .d{font-size:13px;margin-top:3px;line-height:1.55;max-width:66ch}
.doc-steps .chip{margin-top:8px}

/* ---------- layer stack (protocol L0..L3) ---------- */

.layer-stack{display:flex;flex-direction:column;gap:10px}
.layer{display:grid;gap:14px;grid-template-columns:62px minmax(0,1fr) minmax(0,236px);
  align-items:start;border:1px solid var(--line);border-radius:6px;
  background:var(--surface);padding:clamp(14px,2vw,18px);
  transition:border-color .25s var(--ease)}
.layer:hover{border-color:var(--line-strong)}
.layer .lv{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--mark-green)}
.layer .ln{font-size:15.5px;font-weight:700;color:var(--ink)}
.layer .lshort{font-family:var(--mono);font-size:11px;color:var(--dim-2);
  letter-spacing:.09em;text-transform:uppercase;margin-top:3px}
.layer .ld{font-size:13.5px;color:var(--dim);line-height:1.6;margin-top:9px;max-width:64ch}
.layer .lc{display:flex;flex-direction:column;gap:6px}
.layer .lc span{font-family:var(--mono);font-size:11px;color:var(--dim-2);
  display:flex;gap:7px;line-height:1.45}
.layer .lc span::before{content:'';width:4px;height:4px;border-radius:50%;flex:0 0 auto;
  background:var(--mark-green);margin-top:6px;opacity:.7}
@media (max-width:860px){
  .layer{grid-template-columns:48px minmax(0,1fr)}
  .layer .lc{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;gap:6px 16px}
}

/* ---------- message vocabulary ---------- */

.verb-group{margin-top:20px}
.verb-group > .eyebrow{display:block;margin-bottom:10px}
.verb{display:grid;gap:5px 14px;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  padding:12px 0;border-bottom:1px solid var(--line)}
.verb:last-child{border-bottom:0}
.verb .vn{font-family:var(--mono);font-size:13px;color:var(--mark-green);word-break:break-all}
.verb .vd{font-size:13.5px;color:var(--dim);line-height:1.55}
.verb .vmeta{grid-column:1;font-family:var(--mono);font-size:10.5px;color:var(--dim-2)}
.verb .vpay{grid-column:2;font-family:var(--mono);font-size:11px;color:var(--dim-2);
  line-height:1.5;word-break:break-word}
@media (max-width:700px){
  .verb{grid-template-columns:1fr}
  .verb .vmeta,.verb .vpay{grid-column:1}
}

/* ---------- conformance tiers ---------- */

.tiers{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tier{border:1px solid var(--line);border-radius:6px;background:var(--surface);
  padding:clamp(14px,2vw,18px);display:flex;flex-direction:column;gap:11px}
.tier .tn{display:flex;align-items:baseline;gap:9px}
.tier .tnum{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--mark-green);
  line-height:1}
.tier .tname{font-size:15px;font-weight:700;color:var(--ink)}
.tier .td{font-size:12.5px;color:var(--dim);line-height:1.55}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.tier li{font-size:11.5px;color:var(--dim-2);display:flex;gap:7px;line-height:1.45}
.tier li::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--dim-2);
  flex:0 0 auto;margin-top:6px}
.tier .tlabel{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim-2)}

/* ---------- compliance ---------- */

.comp{border:1px solid var(--line);border-radius:6px;background:var(--surface);
  overflow:hidden}
.comp + .comp{margin-top:12px}
.comp-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%;
  padding:15px clamp(14px,2vw,18px);text-align:left;
  border-bottom:1px solid transparent;transition:background .18s}
.comp-head:hover{background:var(--surface-2)}
.comp[data-open="true"] .comp-head{border-bottom-color:var(--line)}
.comp-law{font-size:15px;font-weight:700;color:var(--ink)}
.comp-body-wrap{padding:0 clamp(14px,2vw,18px) clamp(14px,2vw,18px)}
.comp-scope{font-size:13px;color:var(--dim);line-height:1.6;margin:14px 0}
.comp-cols{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:760px){.comp-cols{grid-template-columns:1fr}}
.comp-col h4{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:9px}
.comp-col.afix h4{color:var(--mark-green)}
.comp-col.member h4{color:var(--gold)}
.comp-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.comp-col li{font-size:13px;color:var(--dim);line-height:1.55;display:flex;gap:9px}
.comp-col li::before{content:'';width:4px;height:4px;border-radius:50%;flex:0 0 auto;margin-top:7px}
.comp-col.afix li::before{background:var(--mark-green)}
.comp-col.member li::before{background:var(--gold)}
.comp-toggle{margin-left:auto;font-family:var(--mono);font-size:16px;color:var(--dim-2);
  flex:0 0 auto;transition:transform .22s var(--ease)}
.comp[data-open="true"] .comp-toggle{transform:rotate(45deg)}

/* ---------- callouts ---------- */

.callout{border:1px solid var(--line);border-left:2px solid var(--gold);
  border-radius:0 5px 5px 0;background:var(--surface);
  padding:14px clamp(14px,2vw,18px);font-size:13px;color:var(--dim);line-height:1.62}
.callout strong{color:var(--ink)}
.callout.is-red{border-left-color:var(--mark-red)}
.callout.is-green{border-left-color:var(--mark-green)}
.callout.is-cyan{border-left-color:var(--cyan)}
.callout .ct{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px;color:var(--gold)}
.callout.is-red .ct{color:var(--mark-red)}
.callout.is-green .ct{color:var(--mark-green)}
.callout.is-cyan .ct{color:var(--cyan)}

/* ---------- trademark strip ---------- */

.tm-strip{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  border:1px solid var(--line);border-radius:6px;background:var(--surface-3);
  padding:14px clamp(14px,2vw,18px)}
.tm-mark{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;flex:0 0 auto}
.tm-mark sup{font-size:10px;vertical-align:super;color:var(--dim-2)}
.tm-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.tm-full{font-size:13.5px;color:var(--ink)}
.tm-status{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold)}

/* ---------- key/value stat strip ---------- */

.kv-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.kv{border:1px solid var(--line);border-radius:5px;background:var(--surface);padding:13px 15px}
.kv .kvv{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--ink);line-height:1.2}
.kv .kvk{font-size:11.5px;color:var(--dim);margin-top:5px;line-height:1.4}
.kv .kvn{font-family:var(--mono);font-size:10px;color:var(--dim-2);margin-top:3px;
  letter-spacing:.08em;text-transform:uppercase}

/* ---------- absent-capability list ---------- */

.absent{display:flex;flex-wrap:wrap;gap:8px}
.absent code{font-family:var(--mono);font-size:12.5px;color:var(--dim-2);
  border:1px solid rgba(255,79,94,.24);border-radius:3px;padding:6px 10px;
  background:rgba(255,79,94,.05);text-decoration:line-through;
  text-decoration-color:rgba(255,79,94,.5)}