/* api-docs.css — Hub360 Public API documentation (.apd-*)
   Brand: Deep Royal Green #1E6332 · Sherwood #214A3E · Emerald #2F8542 ·
   Beige #F4F0E9 · Caramel #C19A6B · Cocoa #6B4A28 · Slate #475453.
   Used in-app (#page-api-docs) and on the public page (app/api-docs.html).

   Layout: a fixed 264px contents rail + a fluid document column. The document
   is centred and capped at --apd-doc-max so a 2,000px+ monitor gets symmetric
   gutters instead of a dead band on the right. Endpoint cards are two columns
   (reference | code) with the code column sticky, and long examples are folded
   to a fixed height with a "Show all" control so the page stays scannable. */

.apd-root {
    --apd-green: #1E6332; --apd-green-dark: #214A3E; --apd-emerald: #2F8542;
    --apd-beige: #F4F0E9; --apd-caramel: #C19A6B; --apd-cocoa: #6B4A28; --apd-slate: #475453;
    --apd-line: #e6e0d6; --apd-line-soft: #efeae2; --apd-text: #1f2a26; --apd-body: #3b4441; --apd-muted: #6b716e;
    --apd-paper: #f1efe9; --apd-card: #ffffff;
    --apd-code-bg: #182620; --apd-code-bar: #1f312a; --apd-code-text: #e7efe9; --apd-code-muted: #93a69b; --apd-code-accent: #9fe0b0;
    --apd-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --apd-doc-max: 1560px;
    display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100%;
    color: var(--apd-text); font-family: 'Futura PT', 'Jost', system-ui, sans-serif; background: var(--apd-paper);
}
#page-api-docs.active { padding: 0; }
.api-docs-page { padding: 0; }

/* In-app: lock the page to the viewport (same pattern as Claims/Drafts —
   .main-content clips overflow, so a sticky rail can't work there; instead the
   rail stands still and .apd-main is the scroll container). The footer is
   hidden on this page, so only the 60px header is subtracted. */
@media (min-width: 901px) {
    .main-content:has(#page-api-docs.active) { overflow-y: hidden; padding-bottom: 0; }
    #page-api-docs.active { height: calc(100vh - 60px); height: calc(100dvh - 60px); overflow: hidden; }
    #page-api-docs .api-docs-page, #page-api-docs .apd-root { height: 100%; }
    #page-api-docs .apd-sidebar { position: static; height: 100%; }
    #page-api-docs .apd-main { height: 100%; overflow-y: auto; }
}

/* ── Contents rail ─────────────────────────────────────────────────────── */
.apd-sidebar { position: sticky; top: 0; align-self: start; height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--apd-line); background: var(--apd-card); padding: 14px 10px 40px; scrollbar-width: thin; }
.apd-search { position: relative; margin: 0 4px 12px; }
.apd-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--apd-muted); font-size: 12px; pointer-events: none; }
.apd-search input { width: 100%; padding: 8px 30px 8px 30px; border: 1px solid var(--apd-line); border-radius: 10px; font-size: 13px; background: var(--apd-beige); outline: none; font-family: inherit; color: var(--apd-text); }
.apd-search input::placeholder { color: var(--apd-muted); }
.apd-search input:focus { border-color: var(--apd-green); background: #fff; box-shadow: 0 0 0 3px rgba(30,99,50,.12); }
.apd-search-hint { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--apd-muted); border: 1px solid var(--apd-line); border-radius: 5px; padding: 1px 5px; background: #fff; font-family: var(--apd-mono); }
.apd-nav-toggle { display: none; }
.apd-nav-group { display: flex; align-items: center; gap: 8px; margin: 16px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--apd-muted); }
.apd-nav-group::after { content: ""; flex: 1; height: 1px; background: var(--apd-line-soft); }
.apd-nav-link { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--apd-text); text-decoration: none; line-height: 1.3; transition: background .12s; }
.apd-nav-link > i { width: 14px; text-align: center; color: var(--apd-caramel); font-size: 12px; }
.apd-nav-link:hover { background: var(--apd-beige); color: var(--apd-text); }
.apd-nav-link.active { background: var(--apd-green); color: #fff; }
.apd-nav-link.active > i { color: #fff; }
.apd-nav-res { font-weight: 700; margin-top: 6px; }
.apd-nav-count { margin-left: auto; font-size: 10.5px; background: var(--apd-beige); color: var(--apd-slate); padding: 1px 7px; border-radius: 999px; }
.apd-nav-link.active .apd-nav-count { background: rgba(255,255,255,.2); color: #fff; }
.apd-nav-ep { padding: 4px 8px 4px 12px; font-size: 12px; color: var(--apd-slate); }
.apd-nav-ep .apd-method { min-width: 46px; font-size: 9.5px; padding: 2px 4px; }
.apd-nav-ep span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--apd-mono); font-size: 11.5px; }
.apd-nav-link.active.apd-nav-ep { color: #fff; }

/* ── Document column ───────────────────────────────────────────────────── */
.apd-main { padding: 28px 44px 96px; min-width: 0; scrollbar-width: thin; }
.apd-main > * { max-width: var(--apd-doc-max); margin-left: auto; margin-right: auto; }

/* Hero */
.apd-hero { padding: 30px 34px 26px; border-radius: 18px; background: linear-gradient(135deg, #1E6332 0%, #214A3E 100%); color: #fff; margin-bottom: 22px; position: relative; overflow: hidden; }
.apd-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.05); pointer-events: none; }
.apd-hero-badge { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; position: relative; }
.apd-hero-badge span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.14); }
.apd-hero-badge .apd-live { display: inline-flex; align-items: center; gap: 7px; background: rgba(0,0,0,.22); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; padding: 4px 11px 4px 9px; }
.apd-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.apd-live.is-ok .apd-live-dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.apd-live.is-down .apd-live-dot { background: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.25); }
.apd-live.is-checking .apd-live-dot { animation: apdPulse 1.2s ease-in-out infinite; }
@keyframes apdPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.apd-hero h1 { font-size: 34px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; color: #fff; position: relative; }
.apd-lead { font-size: 17px; opacity: .92; margin: 0 0 20px; max-width: 760px; line-height: 1.5; position: relative; }
.apd-hero-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; position: relative; }
.apd-baseurl { display: inline-flex; align-items: center; gap: 10px; background: rgba(0,0,0,.24); border-radius: 12px; padding: 10px 14px; flex-wrap: wrap; }
.apd-baseurl span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.apd-baseurl code { color: var(--apd-code-accent); font-size: 14px; background: transparent; padding: 0; font-family: var(--apd-mono); }
.apd-baseurl .apd-copy { color: #fff; background: rgba(255,255,255,.14); }
.apd-hero-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.apd-hero-stats > div { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 8px 14px; min-width: 104px; }
.apd-hero-stats b { display: block; font-size: 21px; line-height: 1.1; }
.apd-hero-stats span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }

/* "How it works" strip under the hero */
.apd-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 40px; }
.apd-principle { background: var(--apd-card); border: 1px solid var(--apd-line); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.apd-principle h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--apd-green-dark); display: flex; align-items: center; gap: 8px; }
.apd-principle h3 i { color: var(--apd-caramel); font-size: 14px; }
.apd-principle p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--apd-body); }

/* Sections */
.apd-section { margin-bottom: 44px; scroll-margin-top: 80px; }
.apd-section h2 { font-size: 24px; font-weight: 700; color: var(--apd-green-dark); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid rgba(30,99,50,.18); display: flex; align-items: center; gap: 10px; }
.apd-section h2 i { color: var(--apd-caramel); font-size: 18px; }
.apd-section h3 { font-size: 15px; font-weight: 700; margin: 14px 0 6px; color: var(--apd-green-dark); }
.apd-section p { line-height: 1.6; font-size: 14.5px; color: var(--apd-body); }
.apd-section code, .apd-table code, .apd-callout code, .apd-ep-desc code { background: var(--apd-beige); color: var(--apd-green-dark); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; font-family: var(--apd-mono); }
.apd-muted { color: var(--apd-muted); }
.apd-ol, .apd-ul { line-height: 1.65; font-size: 14.5px; padding-left: 22px; color: var(--apd-body); }
.apd-support a { color: var(--apd-green); font-weight: 600; }
.apd-note { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 10px 14px; background: var(--apd-beige); border-radius: 10px; font-size: 13.5px; line-height: 1.5; color: var(--apd-body); }
.apd-note i { color: var(--apd-caramel); margin-top: 3px; }

/* Getting started — a real sequence, so numbered */

/* Keys, sessions & usage (mirrors My Profile → API Access) */
.apd-access { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.apd-access-cards { display: grid; gap: 10px; }
.apd-access-card { display: flex; gap: 14px; background: var(--apd-card); border: 1px solid var(--apd-line); border-radius: 14px; padding: 14px 16px; }
.apd-access-card > i { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--apd-beige); color: var(--apd-green); display: flex; align-items: center; justify-content: center; font-size: 15px; margin-top: 2px; }
.apd-access-card h3 { margin: 0 0 3px; font-size: 14.5px; }
.apd-access-card p { margin: 0; font-size: 13.5px; color: var(--apd-body); line-height: 1.55; }
.apd-limits { background: var(--apd-green-dark); color: #fff; border-radius: 14px; padding: 16px 18px; }
.apd-limits h3 { color: #fff; margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.apd-limits h3 i { color: var(--apd-caramel); }
.apd-limit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.12); }
.apd-limit:first-of-type { border-top: 0; padding-top: 0; }
.apd-limit b { font-size: 20px; line-height: 1; color: var(--apd-code-accent); font-variant-numeric: tabular-nums; min-width: 90px; }
.apd-limit span { font-size: 13px; opacity: .92; line-height: 1.45; }
.apd-limit small { display: block; font-size: 12px; opacity: .7; margin-top: 2px; }

.apd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.apd-card { background: var(--apd-card); border: 1px solid var(--apd-line); border-left: 4px solid var(--apd-emerald); border-radius: 12px; padding: 12px 16px; min-width: 0; }
.apd-card h3 { margin: 0 0 4px; font-size: 14px; }
.apd-card p { margin: 0; font-size: 13.5px; color: var(--apd-body); }

.apd-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.apd-rule { display: flex; gap: 12px; background: var(--apd-card); border: 1px solid var(--apd-line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.apd-rule-icon { color: var(--apd-caramel); font-size: 16px; padding-top: 3px; }
.apd-rule h3 { margin: 0 0 4px; }
.apd-rule p { margin: 0; font-size: 13.5px; color: var(--apd-body); }

/* Tables */
.apd-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--apd-card); border: 1px solid var(--apd-line); border-radius: 10px; overflow: hidden; margin: 8px 0 4px; }
.apd-table th { text-align: left; background: var(--apd-beige); color: var(--apd-slate); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 8px 12px; font-weight: 700; }
.apd-table td { padding: 8px 12px; border-top: 1px solid var(--apd-line-soft); vertical-align: top; line-height: 1.45; color: var(--apd-body); }
.apd-req { font-size: 10.5px; font-weight: 700; color: #b00000; background: #fbe9e9; padding: 1px 7px; border-radius: 999px; }
.apd-errors td:nth-child(3), .apd-errors td:nth-child(4) { font-size: 12.5px; }
.apd-errors tr:target td { background: #fff8ea; }

/* Endpoint cards */
.apd-resource-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.apd-resource-count { font-size: 12px; font-weight: 600; color: var(--apd-slate); background: var(--apd-card); border: 1px solid var(--apd-line); padding: 2px 10px; border-radius: 999px; }
.apd-endpoint { background: var(--apd-card); border: 1px solid var(--apd-line); border-radius: 16px; padding: 18px 22px 20px; margin: 14px 0; scroll-margin-top: 78px; box-shadow: 0 1px 2px rgba(31,42,38,.04); }
.apd-endpoint:target { box-shadow: 0 0 0 3px rgba(30,99,50,.18); }
.apd-ep-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apd-path { font-size: 15px; color: var(--apd-green-dark); background: var(--apd-beige); padding: 4px 10px; border-radius: 8px; word-break: break-all; font-family: var(--apd-mono); }
.apd-ep-title { margin: 8px 0 2px; font-size: 19px; font-weight: 700; color: var(--apd-text); }
.apd-ep-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.apd-module-chip { font-size: 11px; font-weight: 600; color: var(--apd-cocoa); background: #f6efe4; border: 1px solid #ead9c0; padding: 2px 9px; border-radius: 999px; }
.apd-chip-public { color: var(--apd-green); background: #e7f0ea; border-color: #cfe3d6; }
.apd-ep-desc { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--apd-body); max-width: 900px; }
.apd-callout { display: flex; gap: 12px; margin: 12px 0 4px; padding: 12px 14px; background: #fbf6ee; border: 1px solid #ead9c0; border-left: 4px solid var(--apd-caramel); border-radius: 10px; font-size: 13.5px; line-height: 1.55; color: #4b3a26; max-width: 900px; }
.apd-callout-icon { color: var(--apd-caramel); font-size: 16px; padding-top: 2px; }
.apd-callout-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--apd-cocoa); margin-bottom: 2px; }
.apd-ep-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 16px; align-items: start; }
.apd-ep-left, .apd-ep-right { min-width: 0; }
.apd-ep-right { position: sticky; top: 8px; }
.apd-block { margin-bottom: 14px; }
.apd-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--apd-muted); margin-bottom: 6px; }
.apd-response { margin-top: 8px; }
.apd-response-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; color: var(--apd-body); }
.apd-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; font-family: var(--apd-mono); }
.apd-status-2 { background: #e7f0ea; color: var(--apd-green); }
.apd-status-3 { background: #e0ecff; color: #1d4ed8; }
.apd-status-4 { background: #f6efe4; color: #8a6536; }
.apd-status-5 { background: #fbe9e9; color: #b00000; }
.apd-ep-errors { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.apd-ep-errors .apd-label { width: 100%; }
.apd-err-chip { font-size: 12px; text-decoration: none; color: var(--apd-slate); background: var(--apd-beige); border: 1px solid var(--apd-line); padding: 3px 9px; border-radius: 999px; font-family: var(--apd-mono); }
.apd-err-chip b { color: #8a6536; margin-right: 4px; font-family: inherit; }
.apd-err-chip:hover { border-color: var(--apd-caramel); color: var(--apd-slate); }

/* Method pills */
.apd-method { display: inline-block; min-width: 58px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: 7px; font-family: var(--apd-mono); }
.apd-method-get { background: #e7f0ea; color: var(--apd-green); }
.apd-method-post { background: #e0ecff; color: #1d4ed8; }
.apd-method-put, .apd-method-patch { background: #f6efe4; color: #8a6536; }
.apd-method-delete { background: #fbe9e9; color: #b00000; }

/* Code */
.apd-code { background: var(--apd-code-bg); border-radius: 10px; margin: 6px 0 10px; overflow: hidden; position: relative; }
.apd-code-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 8px 5px 12px; background: var(--apd-code-bar); color: var(--apd-code-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.apd-code pre { margin: 0; padding: 12px 14px; overflow-x: auto; font-size: 12.5px; line-height: 1.55; color: var(--apd-code-text); font-family: var(--apd-mono); tab-size: 2; }
.apd-code code { background: transparent; color: inherit; padding: 0; font-size: inherit; font-family: inherit; }
.apd-code-shell pre { white-space: pre-wrap; word-break: break-all; }
.apd-code-shell pre code { display: block; padding-left: 2ch; text-indent: -2ch; }
.apd-code-tall pre { max-height: 360px; overflow-y: hidden; }
.apd-code-tall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 34px; height: 56px; background: linear-gradient(180deg, rgba(24,38,32,0), var(--apd-code-bg)); pointer-events: none; }
.apd-code-tall.is-open pre { max-height: none; overflow-y: auto; }
.apd-code-tall.is-open::after { display: none; }
.apd-code-more { display: flex; justify-content: center; padding: 6px 8px 8px; background: var(--apd-code-bg); position: relative; z-index: 1; }
.apd-code-more button { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--apd-code-text); font-family: inherit; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.apd-code-more button:hover { background: rgba(255,255,255,.12); }
.apd-copy { border: 0; background: var(--apd-beige); color: var(--apd-green-dark); font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 7px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.apd-copy:hover { background: #e8e0d3; }
.apd-code-bar .apd-copy { background: rgba(255,255,255,.1); color: var(--apd-code-text); }
.apd-code-bar .apd-copy:hover { background: rgba(255,255,255,.18); }
.apd-copy-path { padding: 4px 7px; }
.apd-tabs { margin-bottom: 8px; }
.apd-tab-bar { display: inline-flex; gap: 2px; background: var(--apd-beige); padding: 3px; border-radius: 9px; margin-bottom: 6px; }
.apd-tab { border: 0; background: transparent; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 7px; cursor: pointer; color: var(--apd-slate); font-family: inherit; }
.apd-tab.active { background: #fff; color: var(--apd-green); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Downloads */
.apd-downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin-bottom: 14px; }
.apd-dl { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--apd-card); border: 1px solid var(--apd-line); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; font-family: inherit; color: var(--apd-text); }
.apd-dl:hover { box-shadow: 0 6px 18px rgba(30,99,50,.12); border-color: var(--apd-emerald); }
.apd-dl i { font-size: 22px; color: var(--apd-green); }
.apd-dl b { display: block; font-size: 14px; }
.apd-dl small { color: var(--apd-muted); }
.apd-empty { padding: 30px; text-align: center; color: var(--apd-muted); }
.apd-search-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13.5px; color: var(--apd-body); }
.apd-search-summary button { border: 1px solid var(--apd-line); background: #fff; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; color: var(--apd-slate); }

/* ── Implementation guide ──────────────────────────────────────────────── */
/* A sticky stepper (left) and one step at a time (right). The stepper is the
   progress record; the panel is where the reading happens. */
.apd-gd { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 20px; align-items: start; }
.apd-gd-side { position: sticky; top: 12px; }
.apd-gd-progress { background: var(--apd-card); border: 1px solid var(--apd-line); border-radius: 14px; padding: 14px 16px 16px; margin-bottom: 10px; }
.apd-gd-progress-top { display: flex; align-items: baseline; gap: 6px; }
.apd-gd-progress-top b { font-size: 20px; line-height: 1; color: var(--apd-green-dark); }
.apd-gd-progress-top span { font-size: 12.5px; color: var(--apd-muted); }
.apd-gd-reset { margin-left: auto; border: 0; background: transparent; color: var(--apd-muted); font: inherit; font-size: 12px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.apd-gd-reset:hover { color: var(--apd-green-dark); background: var(--apd-beige); }
.apd-gd-bar { height: 6px; border-radius: 6px; background: var(--apd-beige); overflow: hidden; margin-top: 10px; }
.apd-gd-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--apd-emerald), var(--apd-green)); transition: width .35s ease; }
.apd-gd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.apd-gd-step button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--apd-card); border: 1px solid var(--apd-line); border-radius: 12px; padding: 10px 12px; font: inherit; cursor: pointer; color: var(--apd-text); transition: border-color .15s, background .15s, box-shadow .15s; }
.apd-gd-step button:hover { border-color: var(--apd-emerald); background: var(--apd-beige); }
.apd-gd-num { position: relative; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--apd-beige); border: 1.5px solid var(--apd-line); color: var(--apd-green-dark); font-weight: 700; font-size: 13px; }
.apd-gd-num i { display: none; font-size: 12px; }
.apd-gd-step.is-current button { border-color: var(--apd-green); box-shadow: 0 0 0 3px rgba(30,99,50,.12); background: var(--apd-card); }
.apd-gd-step.is-current .apd-gd-num { background: var(--apd-green); border-color: var(--apd-green); color: #fff; }
.apd-gd-step.is-done .apd-gd-num { background: var(--apd-emerald); border-color: var(--apd-emerald); color: #fff; }
.apd-gd-step.is-done .apd-gd-num span { display: none; }
.apd-gd-step.is-done .apd-gd-num i { display: block; }
.apd-gd-step-text { min-width: 0; }
.apd-gd-step-text b { display: block; font-size: 14px; line-height: 1.25; }
.apd-gd-step-text small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--apd-muted); }
.apd-gd-step.is-done:not(.is-current) .apd-gd-step-text b { color: var(--apd-muted); }

.apd-gd-panel { min-width: 0; background: var(--apd-card); border: 1px solid var(--apd-line); border-radius: 16px; padding: 24px 26px 20px; }
.apd-gd-panel.is-entering { animation: apdGdIn .28s ease both; }
@keyframes apdGdIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.apd-gd-kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--apd-caramel); }
.apd-gd-panel h3 { display: flex; align-items: center; gap: 12px; margin: 8px 0 6px; font-size: 24px; line-height: 1.2; color: var(--apd-text); }
.apd-gd-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--apd-beige); color: var(--apd-green); font-size: 17px; }
.apd-gd-goal { font-size: 16px; color: var(--apd-body); margin: 0 0 14px; }
.apd-gd-why { display: flex; gap: 12px; background: var(--apd-beige); border-radius: 12px; padding: 12px 14px; margin: 0 0 18px; }
.apd-gd-why i { color: var(--apd-caramel); margin-top: 3px; }
.apd-gd-why p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--apd-body); }
.apd-gd-flow { margin: 0 0 18px; }
.apd-gd-flow ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.apd-gd-flow li button { display: grid; grid-template-columns: 24px auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; width: 100%; text-align: left; background: var(--apd-paper); border: 1px solid var(--apd-line); border-radius: 10px; padding: 8px 10px; font: inherit; color: var(--apd-text); cursor: pointer; }
.apd-gd-flow li button:hover { border-color: var(--apd-emerald); background: var(--apd-beige); }
.apd-gd-flow-n { grid-row: 1 / span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--apd-green); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.apd-gd-flow li code { background: transparent; padding: 0; font-size: 12.5px; color: var(--apd-text); }
.apd-gd-flow li small { grid-column: 2 / span 2; color: var(--apd-muted); font-size: 12px; }
.apd-gd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.apd-gd-left h4 { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 14px; color: var(--apd-green-dark); }
.apd-gd-left h4:first-child { margin-top: 0; }
.apd-gd-left h4 i { color: var(--apd-caramel); font-size: 13px; }
.apd-gd-todo { list-style: none; margin: 0; padding: 0; counter-reset: gd; }
.apd-gd-todo li { position: relative; padding: 0 0 10px 34px; font-size: 14px; line-height: 1.6; color: var(--apd-body); counter-increment: gd; }
.apd-gd-todo li::before { content: counter(gd); position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--apd-beige); color: var(--apd-green-dark); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.apd-gd-result { margin: 0; font-size: 14px; line-height: 1.6; color: var(--apd-body); }
.apd-gd-watch { display: grid; gap: 8px; }
.apd-gd-watch-item { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--apd-line-soft); border-radius: 10px; background: var(--apd-paper); }
.apd-gd-watch-item p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--apd-body); }
.apd-gd-checklist { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.apd-gd-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--apd-body); }
.apd-gd-checklist button { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--apd-line); background: var(--apd-card); color: transparent; display: grid; place-items: center; font-size: 12px; cursor: pointer; transition: background .15s, border-color .15s; }
.apd-gd-checklist button:hover { border-color: var(--apd-emerald); }
.apd-gd-checklist li.is-on button { background: var(--apd-emerald); border-color: var(--apd-emerald); color: #fff; }
.apd-gd-checklist li.is-on span { color: var(--apd-muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.apd-gd-right { min-width: 0; }
.apd-gd-req-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.apd-gd-right > .apd-label { display: flex; align-items: center; gap: 6px; margin: 14px 0 6px; }
.apd-gd-ref { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; border: 1px solid var(--apd-line); background: var(--apd-card); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--apd-green-dark); cursor: pointer; }
.apd-gd-ref:hover { border-color: var(--apd-emerald); background: var(--apd-beige); }
.apd-gd-related { margin-top: 16px; display: grid; gap: 6px; }
.apd-gd-ep { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--apd-line); background: var(--apd-paper); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 13px; color: var(--apd-text); cursor: pointer; }
.apd-gd-ep:hover { border-color: var(--apd-emerald); background: var(--apd-beige); }
.apd-gd-ep code { background: transparent; padding: 0; font-size: 12.5px; color: var(--apd-text); }
.apd-gd-ep span { flex: 1; min-width: 0; font-size: 12px; color: var(--apd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apd-gd-ep i { margin-left: auto; color: var(--apd-caramel); font-size: 11px; }
.apd-gd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--apd-line-soft); }
.apd-gd-nav { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--apd-line); background: var(--apd-card); border-radius: 12px; padding: 9px 14px; font: inherit; color: var(--apd-text); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.apd-gd-nav:hover { border-color: var(--apd-emerald); background: var(--apd-beige); }
.apd-gd-nav small { display: block; font-size: 11px; color: var(--apd-muted); text-transform: uppercase; letter-spacing: .05em; }
.apd-gd-nav span { font-size: 13.5px; font-weight: 600; }
.apd-gd-nav i { color: var(--apd-caramel); }
.apd-gd-next { background: var(--apd-green); border-color: var(--apd-green); color: #fff; }
.apd-gd-next:hover { background: var(--apd-green-dark); border-color: var(--apd-green-dark); }
.apd-gd-next small { color: rgba(255,255,255,.75); }
.apd-gd-next i { color: #fff; }
.apd-gd-done { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--apd-line); background: var(--apd-paper); border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--apd-body); cursor: pointer; transition: background .15s, border-color .15s; }
.apd-gd-done i { color: var(--apd-caramel); }
.apd-gd-done:hover { border-color: var(--apd-emerald); }
.apd-gd-done.is-done { background: #e7f2ea; border-color: #bfe0c8; color: var(--apd-green-dark); }
.apd-gd-done.is-done i { color: var(--apd-emerald); }

/* Guide — dark theme (in-app) */
body.dark-theme .apd-gd-progress, body.dark-theme .apd-gd-panel, body.dark-theme .apd-gd-step button,
body.dark-theme .apd-gd-nav, body.dark-theme .apd-gd-ref, body.dark-theme .apd-gd-checklist button { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-theme .apd-gd-step button:hover, body.dark-theme .apd-gd-nav:hover, body.dark-theme .apd-gd-ref:hover { background: #0f172a; }
body.dark-theme .apd-gd-step.is-current button { box-shadow: 0 0 0 3px rgba(74,222,128,.18); border-color: #4ade80; }
body.dark-theme .apd-gd-num { background: #0f172a; border-color: #334155; color: #cbd5e1; }
body.dark-theme .apd-gd-progress-top b, body.dark-theme .apd-gd-left h4, body.dark-theme .apd-gd-ref, body.dark-theme .apd-gd-nav span { color: #86efac; }
body.dark-theme .apd-gd-panel h3, body.dark-theme .apd-gd-step-text b, body.dark-theme .apd-gd-flow li code, body.dark-theme .apd-gd-ep code, body.dark-theme .apd-gd-nav { color: #e2e8f0; }
body.dark-theme .apd-gd-goal, body.dark-theme .apd-gd-why p, body.dark-theme .apd-gd-todo li, body.dark-theme .apd-gd-result, body.dark-theme .apd-gd-watch-item p, body.dark-theme .apd-gd-checklist li { color: #cbd5e1; }
body.dark-theme .apd-gd-bar, body.dark-theme .apd-gd-why, body.dark-theme .apd-gd-icon, body.dark-theme .apd-gd-todo li::before { background: #0f172a; }
body.dark-theme .apd-gd-icon, body.dark-theme .apd-gd-todo li::before { color: #86efac; }
body.dark-theme .apd-gd-flow li button, body.dark-theme .apd-gd-watch-item, body.dark-theme .apd-gd-ep, body.dark-theme .apd-gd-done { background: #0f172a; border-color: #334155; color: #cbd5e1; }
body.dark-theme .apd-gd-flow li button:hover, body.dark-theme .apd-gd-ep:hover { border-color: #4ade80; }
body.dark-theme .apd-gd-next { background: #1E6332; border-color: #1E6332; color: #fff; }
body.dark-theme .apd-gd-next span { color: #fff; }
body.dark-theme .apd-gd-done.is-done { background: rgba(74,222,128,.14); border-color: rgba(74,222,128,.4); color: #86efac; }
body.dark-theme .apd-gd-checklist li.is-on button { background: #2F8542; border-color: #2F8542; }
body.dark-theme .apd-gd-checklist li.is-on span { text-decoration-color: rgba(255,255,255,.3); }


/* Keyboard focus — visible everywhere */
.apd-root a:focus-visible, .apd-root button:focus-visible, .apd-root input:focus-visible { outline: 2px solid var(--apd-emerald); outline-offset: 2px; }

/* Standalone (public) page chrome */
.apd-public-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px; background: #fff; border-bottom: 1px solid #e8e3da; }
.apd-public-brand { display: flex; align-items: center; gap: 12px; }
.apd-public-brand img { height: 34px; }
.apd-public-brand span { font-weight: 700; color: #214A3E; font-size: 15px; }
.apd-public-brand small { display: block; font-weight: 500; color: #6b7280; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.apd-public-signin { font-size: 13px; font-weight: 700; color: #fff; background: #1E6332; padding: 8px 14px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
.apd-public-signin:hover { background: #214A3E; color: #fff; }
.apd-public-footer { padding: 20px 24px 30px; text-align: center; font-size: 12.5px; color: #6b7280; border-top: 1px solid #e8e3da; background: #fff; }
.apd-public-footer a { color: #1E6332; font-weight: 600; }
body.apd-public-body { margin: 0; background: #f1efe9; font-family: 'Futura PT', 'Jost', system-ui, sans-serif; }
body.apd-public-body .apd-standalone .apd-sidebar { top: 56px; height: calc(100dvh - 56px); }

/* Dark theme (in-app) */
body.dark-theme .apd-root { --apd-beige: #0f172a; --apd-line: #334155; --apd-line-soft: #263449; --apd-text: #e2e8f0; --apd-body: #cbd5e1; --apd-muted: #94a3b8; --apd-paper: #0b1220; --apd-card: #1e293b; --apd-green-dark: #86efac; --apd-code-bg: #0f172a; --apd-code-bar: #1a2536; }
body.dark-theme .apd-sidebar { background: #1e293b; }
body.dark-theme .apd-search input { color: #e2e8f0; }
body.dark-theme .apd-search input:focus { background: #0f172a; }
body.dark-theme .apd-search-hint { background: #1e293b; color: #94a3b8; }
body.dark-theme .apd-nav-link:hover { background: #0f172a; }
body.dark-theme .apd-section code, body.dark-theme .apd-table code, body.dark-theme .apd-callout code, body.dark-theme .apd-ep-desc code { background: #0f172a; color: #86efac; }
body.dark-theme .apd-callout { background: #2a2217; border-color: #4a3a22; color: #f1e6d3; }
body.dark-theme .apd-table th { background: #0f172a; color: #94a3b8; }
body.dark-theme .apd-errors tr:target td { background: #2a2217; }
body.dark-theme .apd-ep-title { color: #e2e8f0; }
body.dark-theme .apd-path { color: #86efac; }
body.dark-theme .apd-copy { background: #0f172a; color: #cbd5e1; }
body.dark-theme .apd-tab-bar { background: #0f172a; }
body.dark-theme .apd-tab.active { background: #334155; color: #86efac; }
body.dark-theme .apd-err-chip { color: #cbd5e1; }
body.dark-theme .apd-dl { color: #e2e8f0; }
body.dark-theme .apd-limits { background: #0f172a; border: 1px solid #334155; }
body.dark-theme .apd-code-tall::after { background: linear-gradient(180deg, rgba(15,23,42,0), #0f172a); }
body.dark-theme .apd-search-summary button { background: #1e293b; color: #cbd5e1; }
body.dark-theme .apd-access-card > i { background: #0f172a; color: #86efac; }

/* Responsive */
@media (max-width: 1300px) { .apd-ep-grid { grid-template-columns: 1fr; } .apd-ep-right { position: static; } .apd-access { grid-template-columns: 1fr; } .apd-principles { grid-template-columns: 1fr; } .apd-gd { grid-template-columns: minmax(0, 1fr); } .apd-gd-side { position: static; min-width: 0; } .apd-gd-steps { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .apd-gd-step { flex: 0 0 auto; } .apd-gd-step button { min-width: 210px; } }
@media (max-width: 1100px) { .apd-rules { grid-template-columns: 1fr; } .apd-main { padding: 24px 28px 80px; } .apd-gd-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
    .apd-root { grid-template-columns: 1fr; }
    .apd-sidebar { position: static; height: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--apd-line); padding-bottom: 10px; }
    body.apd-public-body .apd-standalone .apd-sidebar { height: auto; }
    .apd-nav-toggle { display: flex; align-items: center; gap: 8px; width: calc(100% - 8px); margin: 0 4px; padding: 9px 12px; border: 1px solid var(--apd-line); border-radius: 10px; background: var(--apd-card); color: var(--apd-green-dark); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
    .apd-nav-toggle i:first-child { color: var(--apd-caramel); }
    .apd-nav-toggle-caret { margin-left: auto; transition: transform .2s; }
    .apd-sidebar.open .apd-nav-toggle-caret { transform: rotate(180deg); }
    .apd-nav { display: none; max-height: 60vh; overflow-y: auto; margin-top: 8px; }
    .apd-sidebar.open .apd-nav { display: block; }
    .apd-search-hint { display: none; }
    .apd-main { padding: 18px 16px 60px; }
    .apd-hero { padding: 22px 18px; }
    .apd-hero h1 { font-size: 26px; }
    .apd-lead { font-size: 15px; }
    .apd-hero-stats { margin-left: 0; width: 100%; }
    .apd-hero-stats > div { min-width: calc(50% - 5px); flex: 1; }
    .apd-table { display: block; overflow-x: auto; }
    .apd-public-header { padding: 10px 16px; }
    .apd-public-brand { min-width: 0; }
    .apd-public-brand img { height: 26px; }
    .apd-public-brand span { font-size: 14px; white-space: nowrap; }
    .apd-public-brand small { display: none; }
    .apd-public-signin span { display: none; }
    .apd-public-signin { padding: 8px 11px; }
    .apd-baseurl code { font-size: 12.5px; word-break: break-all; }
    .apd-path { font-size: 13px; }
    .apd-ep-line .apd-copy-path { margin-left: auto; }
    .apd-code pre { font-size: 12px; }
    .apd-endpoint { padding: 16px; }
    .apd-gd-panel { padding: 16px; }
    .apd-gd-panel h3 { font-size: 20px; }
    .apd-gd-step button { min-width: 180px; padding: 8px 10px; }
    .apd-gd-foot { flex-direction: column; align-items: stretch; }
    .apd-gd-nav, .apd-gd-done { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .apd-live.is-checking .apd-live-dot { animation: none; } .apd-nav-link, .apd-dl { transition: none; } }
@media print {
    .apd-sidebar, .apd-copy, .apd-tab-bar, .apd-public-signin, .apd-code-more { display: none !important; }
    .apd-root { display: block; }
    .apd-endpoint { break-inside: avoid; }
    .apd-code pre { white-space: pre-wrap; max-height: none; }
    .apd-code-tall::after { display: none; }
}

/* ── Coming from EFF Hub Platinum (the last section: only legacy integrators need it) ── */
.apd-migration h3 { margin: 22px 0 6px; font-size: 15px; color: var(--apd-green-dark); }
.apd-mig-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 4px; font-size: 12.5px; color: var(--apd-slate); }
.apd-mig-legend span:not(.apd-mig-pill) { margin-right: 6px; }
.apd-mig-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.apd-mig-same { background: #e7f0ea; color: var(--apd-green); }
.apd-mig-changed { background: #f6efe4; color: #8a6536; }
.apd-mig-retired { background: #eceeef; color: #475453; }
.apd-mig-table td:first-child { width: 26%; }
.apd-mig-table td:nth-child(2) { width: 26%; }
.apd-mig-table td:nth-child(3) { width: 9%; white-space: nowrap; }
.apd-mig-table td code { white-space: normal; word-break: break-word; }
.apd-mig-table td:nth-child(2) a { color: inherit; text-decoration: none; }
.apd-mig-table td:nth-child(2) a:hover code { text-decoration: underline; }
@media (max-width: 760px) {
    .apd-mig-table td:first-child, .apd-mig-table td:nth-child(2), .apd-mig-table td:nth-child(3) { width: auto; }
}
body.dark-theme .apd-mig-same { background: rgba(74,222,128,.14); color: #4ade80; }
body.dark-theme .apd-mig-changed { background: rgba(193,154,107,.18); color: #e2c49a; }
body.dark-theme .apd-mig-retired { background: #334155; color: #cbd5e1; }