/* "API Декларации и справки" on /integration/developers: every operation from openapi.json as a collapsible row,
   with language tabs for the code snippet (wwwroot/js/pages/integration-developers.js). */

.api-op-tools{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.api-op-tools .form-control{width:220px}

.api-op-group + .api-op-group{margin-top:22px}
.api-op-group-title{font:700 .78rem/1.2 var(--font-display); text-transform:uppercase; letter-spacing:.07em; color:var(--green-deep); margin:0 0 10px}

.api-op{border:1px solid var(--border); border-radius:12px; background:var(--card); margin-bottom:8px}
.api-op[open]{box-shadow:var(--shadow)}
.api-op > summary{
  display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; list-style:none;
  font:600 .93rem/1.35 var(--font-display); color:var(--text);
}
.api-op > summary::-webkit-details-marker{display:none}
.api-op > summary::after{content:"+"; margin-left:auto; font:400 1.3rem/1 var(--font-display); color:var(--muted)}
.api-op[open] > summary::after{content:"–"}
.api-op-name{flex:1 1 auto}
.api-op-path{font-size:.76rem; color:var(--muted); background:var(--bg-soft); padding:2px 8px; border-radius:6px; white-space:nowrap}
.api-op-body{padding:14px 16px 16px; border-top:1px solid var(--border)}

.lang-tabs{display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--border); margin-bottom:10px}
.lang-tabs button{
  border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; cursor:pointer;
  padding:6px 12px; font:600 .82rem/1.2 var(--font-display); color:var(--muted);
}
.lang-tabs button:hover{color:var(--text)}
.lang-tabs button[aria-selected="true"]{color:var(--blue); border-bottom-color:var(--blue)}

@media (max-width:560px){
  .api-op-tools, .api-op-tools .form-control{width:100%}
  .api-op > summary{flex-wrap:wrap}
  .api-op-path{white-space:normal; overflow-wrap:anywhere}
}

/* Page layout: section navigation on the left, the documentation on the right. */
.doc-layout{display:grid; grid-template-columns:250px minmax(0,1fr); gap:28px; align-items:start}
.doc-nav{position:sticky; top:96px; max-height:calc(100vh - 116px); overflow-y:auto; margin-top:24px; padding:18px 14px 14px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow)}
.doc-nav-title{font:700 .72rem/1.2 var(--font-display); text-transform:uppercase; letter-spacing:.08em; color:var(--green-deep); margin:0 0 10px 12px; padding-bottom:10px; border-bottom:1px solid var(--border)}
.doc-nav ul{list-style:none; margin:0; padding:0}
.doc-nav a{
  display:block; padding:6px 12px; border-left:2px solid var(--border); color:var(--muted);
  font:500 .86rem/1.35 var(--font-display); text-decoration:none!important;
}
.doc-nav a:hover{color:var(--text); border-left-color:var(--border-strong)}
.doc-nav a.active{color:var(--blue); border-left-color:var(--blue); font-weight:700}
.doc-nav-sub{display:block}
.doc-nav-sub a{padding:4px 12px 4px 24px; font-size:.8rem}

@media (max-width:980px){
  .doc-layout{grid-template-columns:minmax(0,1fr); gap:0}
  .doc-nav{position:static; max-height:none; margin-top:16px}
  .doc-nav-sub{display:none}
}
/* Request / response shown as annotated JSON: structure on the left, type and description on the right. */
.json-doc{margin:14px 0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--card)}
.jd-head{font:700 .8rem/1 var(--font-display); letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--blue-deep); padding:10px 14px}
.jd-empty{padding:10px 14px; font-size:.85rem; color:var(--muted); font-style:italic}
.jd-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); border-top:1px solid #EEF1F4}
.jd-row:hover{background:color-mix(in srgb,var(--blue) 5%,transparent)}
.jd-code{font:500 .82rem/1.5 ui-monospace,Consolas,monospace; white-space:pre; overflow:hidden; text-overflow:ellipsis; padding:6px 12px 6px calc(14px + var(--d) * 20px); border-right:1px solid #EEF1F4;
  background-image:repeating-linear-gradient(90deg, transparent 0 13px, #E6EAEF 13px 14px, transparent 14px 20px); background-size:calc(var(--d) * 20px) 100%; background-repeat:no-repeat; background-position:4px 0}
.jd-k{color:#A3195B}
.jd-t{color:var(--blue); font-style:italic}
.jd-p{color:#6B7380}
.jd-doc{padding:6px 12px; font-size:.82rem; line-height:1.45; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline}
.jd-type{font:600 .76rem/1.4 ui-monospace,Consolas,monospace; color:var(--blue-deep)}
.jd-req{font:700 .64rem/1 var(--font-display); letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--danger); border-radius:99px; padding:3px 7px}
.jd-desc{flex:1 1 100%}
.jd-desc:empty{display:none}
@media (max-width:700px){
  .jd-row{grid-template-columns:1fr}
  .jd-code{border-right:0}
  .jd-doc{padding:0 12px 8px calc(14px + var(--d) * 20px)}
}
.jd-always{font:700 .64rem/1 var(--font-display); letter-spacing:.04em; text-transform:uppercase; color:var(--blue-deep); background:color-mix(in srgb,var(--blue) 12%,#fff); border-radius:99px; padding:3px 7px}

/* Step 1 at a glance: what you send, what you get back and where the token goes. */
.token-glance{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:900px){.token-glance{grid-template-columns:1fr}}
.tg-card{position:relative; border:1px solid var(--border); border-radius:12px; background:var(--bg-soft); padding:16px 14px 14px; display:flex; flex-direction:column; gap:8px; min-width:0}
.tg-card b{font:700 .95rem/1.2 var(--font-display); color:var(--text); padding-left:34px; min-height:26px; display:flex; align-items:center}
.tg-n{position:absolute; top:14px; left:14px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--green-btn); font:800 .8rem/1 var(--font-display)}
.tg-card pre{margin:0; padding:10px 12px; border-radius:8px; background:#1F2630; color:#E6EDF3; font-size:.76rem; line-height:1.5; white-space:pre-wrap; word-break:break-all}
.tg-card small{color:var(--muted); font-size:.8rem}
.token-rules{padding-left:18px; margin:0}
.token-rules li{margin-bottom:6px}
.token-errors td:first-child{white-space:nowrap}

/* Notes on submitting a whole folder, shown inside the matching operations. */
.op-note{margin:0 0 14px; padding:10px 14px; border-radius:10px; background:color-mix(in srgb,var(--blue) 7%,#fff); border:1px solid color-mix(in srgb,var(--blue) 20%,transparent); font-size:.84rem; color:var(--text)}
.op-note-batch p{margin:6px 0 8px}
.op-note-batch ul{margin:0; padding-left:18px}
.op-note-batch li{margin-bottom:4px}

/* On phones these tables become one card per row: the short cells side by side, the explanation below. */
@media (max-width:600px){
  table.stack-sm thead{display:none}
  table.stack-sm tbody tr{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:10px 4px; border-top:1px solid var(--border)}
  table.stack-sm tbody td{display:block; border:0; padding:0; width:auto!important; background:transparent!important; box-shadow:none!important}
  table.stack-sm tbody td:last-child{flex:1 1 100%; color:var(--text)}
  table.stack-sm.token-errors tbody td:nth-child(2){flex:1 1 100%}
  table.stack-sm tbody td code{word-break:break-all}
}