/*
 * 4league developer docs (/developers/) — shared layout and components.
 * Served from /developers/css/, NOT assets/: assets/ has the 1-year immutable cache
 * and this file changes with the docs. Page-specific rules stay in each page's <style>.
 */

/* Layout: sidebar + content. The sidebar becomes a scrollable chip row below 992px. */
.dev-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px; align-items: start; }
.dev-main { min-width: 0; }
/* Bootstrap's .container clearfix ::before/::after would become grid items and shift the columns. */
.dev-layout::before, .dev-layout::after { display: none; }
.dev-sidebar { position: sticky; top: 110px; font-size: 14px; }
.dev-sidebar__title { margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #777; }
.dev-sidebar__list { list-style: none; margin: 0; padding: 0; }
.dev-sidebar__list a { display: block; padding: 6px 10px; color: #555; border-left: 2px solid transparent; }
.dev-sidebar__list a:hover, .dev-sidebar__list a:focus { color: #1f4e79; text-decoration: none; }
.dev-sidebar__list a.is-active { color: #1f4e79; font-weight: 700; border-left-color: #1f4e79; background: #f3f7fb; }
@media (max-width: 991px) {
  .dev-layout { display: block; }
  .dev-sidebar { position: static; margin-bottom: 24px; }
  .dev-sidebar__title { display: none; }
  .dev-sidebar__list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .dev-sidebar__list a { white-space: nowrap; border: 1px solid #ddd; border-radius: 16px; padding: 6px 14px; }
  .dev-sidebar__list a.is-active { border-color: #1f4e79; }
}

/* Method badge */
.dev-method { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 12px; font-weight: 700; color: #fff; background: #27ae60; vertical-align: middle; }
.dev-method-head { background: #7f8c8d; }

/* Scope chip */
.dev-scope { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #eaf2fb; color: #1f4e79; font-family: Menlo, Consolas, monospace; }
.dev-scope-none { background: #f0f0f0; color: #666; }

/* Endpoint heading (h3[data-endpoint] from render-developer-docs.js) */
.dev-doc h3[data-endpoint] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid #eee; }
.dev-doc h3[data-endpoint] code { font-size: 16px; word-break: break-all; }
.dev-endpoint-meta code { word-break: break-all; }

/* Code tabs (ARIA tablist). Without JS: tablist hidden, every panel stacked with its heading. */
.dev-code-tabs { margin: 24px 0; }
.dev-code-nav { display: none; }
.js .dev-code-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid #ddd; }
.dev-code-nav [role="tab"] { padding: 8px 14px; margin-bottom: -1px; border: 1px solid transparent; border-radius: 4px 4px 0 0; background: none; color: #555; font-size: 14px; }
.dev-code-nav [role="tab"]:hover { color: #1f4e79; }
.dev-code-nav [role="tab"][aria-selected="true"] { color: #1f4e79; font-weight: 700; background: #fff; border-color: #ddd #ddd #fff; }
.dev-code-nav [role="tab"]:focus-visible, .dev-code-panel:focus-visible { outline: 2px solid #1f4e79; outline-offset: 2px; }
.dev-code-panel + .dev-code-panel { margin-top: 20px; }
.js .dev-code-panel + .dev-code-panel { margin-top: 0; }
.dev-code-panel[hidden] { display: none; }

/* Code blocks are always left-to-right, also inside an RTL page or widget. */
.dev-doc pre, .dev-doc code { direction: ltr; unicode-bidi: isolate; text-align: left; }
.dev-doc pre { position: relative; overflow-x: auto; }
/* Bootstrap 3 sets code { white-space: nowrap }: long inline code (JSON details, SHA-256 hashes, URLs) would push the page sideways on phones. */
.dev-main :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }

/* Copy buttons: wiki.js initCopyCode adds .wiki-code-copy-btn to .wiki-content pre;
   .dev-copy is the per-row button in the HMAC vectors table. */
.wiki-code-copy-btn { position: absolute; top: 8px; right: 8px; padding: 3px 10px; font-size: 12px; line-height: 1.5; color: #555; background: #fff; border: 1px solid #ccc; border-radius: 4px; opacity: 0; transition: opacity .15s; }
.dev-doc pre:hover .wiki-code-copy-btn, .wiki-code-copy-btn:focus { opacity: 1; }
.wiki-code-copy-btn.copied { color: #1e7e34; border-color: #1e7e34; }
@media (hover: none), (pointer: coarse) {
  .wiki-code-copy-btn { opacity: 1; }
}
.dev-copy { white-space: nowrap; }
/* The vectors table has its own per-row .dev-copy buttons. */
.dev-vectors .wiki-code-copy-btn { display: none; }

/* Overview page */
.dev-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; }
.dev-card { display: block; padding: 18px; border: 1px solid #e5e5e5; border-radius: 6px; color: inherit; }
.dev-card:hover, .dev-card:focus { border-color: #1f4e79; text-decoration: none; color: inherit; }
.dev-card h3 { margin: 0 0 6px; font-size: 18px; color: #1f4e79; }
.dev-card p { margin: 0; color: #555; }