/* Data directory and category pages: shared responsive card system. */
.api-root { margin:0; color:#252331; background:#faf9f7; font-family:Arial,sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; }
.api-root *, .api-root *::before, .api-root *::after { box-sizing:border-box; }
.api-root a { color:#6847d5; }
.api-root-header { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1200px; padding:24px; margin:auto; border-bottom:1px solid #e8e5ed; }
.api-root-header img { object-fit:contain; }
.api-root-header nav { display:flex; gap:24px; flex-wrap:wrap; font-size:.875rem; }
.api-root-header nav a { text-decoration:none; color:#514b60; }
.api-root-header nav a[aria-current] { color:#6847d5; font-weight:600; }
.api-reference { max-width:1200px; margin:52px auto 72px; padding:0 24px; }
.api-reference h1 { max-width:900px; margin:12px 0 20px; font-size:clamp(2rem,4vw,3.25rem); line-height:1.12; letter-spacing:-.035em; overflow-wrap:anywhere; }
.api-reference > p { max-width:770px; color:#6d677a; margin:12px 0; font-size:1rem; }
.api-reference .api-eyebrow { color:#7953cb; text-transform:uppercase; font-size:.72rem; font-weight:700; letter-spacing:.15em; }
.api-reference > nav { font-size:.82rem; color:#777082; margin-bottom:30px; }
.api-reference .api-caption { font-size:.8rem; }
.api-reference [hidden] { display:none !important; }
.api-directory { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.api-reference .api-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:22px; border:1px solid #e6e2ec; border-radius:18px; background:#fff; color:#282332; text-decoration:none; box-shadow:0 2px 3px #28203e03,0 8px 26px #28203e03; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.api-reference .api-card:hover { border-color:var(--card-accent,#7953cb); transform:translateY(-4px); box-shadow:0 12px 32px #28203e0c; }
.api-card-top { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }
.api-category-icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid color-mix(in srgb,var(--card-accent) 14%,transparent); border-radius:14px; background:var(--card-soft,#f1edfb); color:var(--card-accent,#7953cb); font-weight:800; font-size:1.35rem; letter-spacing:-.055em; }
.api-category-icon.api-icon--word { font-size:1rem; letter-spacing:-.045em; }
.api-category-icon--brand { background:#fff; border-color:#eeeaf2; overflow:hidden; }
.api-category-icon img { display:block; width:40px; height:40px; object-fit:contain; border-radius:8px; }
.api-category-icon svg { width:26px; height:26px; }
.api-count-badge { padding:4px 10px; border:1px solid #e9e5ef; border-radius:100px; color:#786e88; background:#fbfafc; font-size:.7rem; font-weight:600; white-space:nowrap; }
.api-platform-label { display:block; margin-bottom:6px; color:var(--card-accent,#7953cb); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }
.api-card h3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:0 0 12px; color:#282332; font-size:1.05rem; letter-spacing:-.02em; line-height:1.35; }
.api-card p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; margin:0 0 20px; color:#7a7287; font-size:.82rem; line-height:1.7; }
.api-card-content { flex:1; }
.api-card-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:15px; margin-top:auto; border-top:1px solid #f0edf4; color:#655973; font-size:.78rem; font-weight:600; }
.api-card-actions > svg { width:26px; height:26px; padding:5px; border:1px solid #ece8f1; border-radius:50%; color:#8a7c9d; transition:background .18s,color .18s; }
.api-card:hover .api-card-actions { color:var(--card-accent,#7953cb); }
.api-card:hover .api-card-actions > svg { color:var(--card-accent); background:var(--card-soft); border-color:transparent; }
.api-filters { margin:30px 0 0; padding:18px 20px; border:1px solid #e6e2ec; border-radius:14px; background:#fff; box-shadow:0 4px 20px #28203e03; }
.api-filters label { display:block; margin-bottom:9px; color:#554c65; font-size:.78rem; font-weight:600; }
.api-filters input { display:block; width:100%; min-height:44px; padding:10px 14px; border:1px solid #e0dae9; border-radius:9px; background:#fcfbfe; color:#302a3c; font:inherit; font-size:.9rem; }
.api-filters input::placeholder { color:#a297b2; }
.api-reference [data-api-count] { margin:22px 0 16px; color:#8a8098; font-size:.78rem; }
.api-reference a:focus-visible,.api-filters input:focus-visible { outline:3px solid #ac96ed; outline-offset:4px; }
.api-root-footer { padding:28px 24px; text-align:center; border-top:1px solid #e6e2ec; font-size:.8rem; color:#7a7287; }
@media(max-width:950px) { .api-directory { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:580px) { .api-root-header { flex-direction:column; align-items:flex-start; gap:16px; padding:20px; } .api-root-header nav { gap:16px; font-size:.78rem; } .api-reference { margin-top:32px; padding:0 20px; } .api-directory { grid-template-columns:minmax(0,1fr); gap:14px; } .api-reference .api-card { padding:20px; } .api-card-top { margin-bottom:18px; } }
@media(prefers-reduced-motion:reduce) { .api-reference .api-card,.api-card-actions > svg { transition:none; } .api-reference .api-card:hover { transform:none; } }

/* Platform filters and cross-category discovery. */
.api-platform-filters { display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; }
.api-platform-filters button,.api-view-switch button,.api-search-row button,.api-empty button { font:inherit; cursor:pointer; }
.api-platform-filters button { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:8px 12px; border:1px solid #e3deec; border-radius:100px; color:#63596f; background:white; font-size:.75rem; transition:border-color .15s,background .15s; }
.api-platform-filters button[aria-pressed="true"] { color:#5d3abb; border-color:#a58adf; background:#f2ecff; box-shadow:0 0 0 1px #a58adf33; }
.api-platform-filters button img { object-fit:contain; border-radius:4px; }
.api-platform-filters button span { font-size:.65rem; opacity:.65; }
.api-platform-filters button:hover { border-color:#a58adf; }
.api-search-row { display:flex; gap:10px; align-items:center; }
.api-search-row input { min-width:0; }
.api-search-row button { padding:8px 10px; color:#6847d5; background:transparent; border:0; font-size:.8rem; }
.api-view-switch { display:flex; gap:6px; margin:0 0 20px; padding:4px; width:fit-content; border:1px solid #e6e1ee; border-radius:11px; background:#f0edf4; }
.api-view-switch button { border:0; border-radius:7px; padding:8px 14px; background:transparent; color:#80758d; font-size:.78rem; }
.api-view-switch button span { margin-left:7px; opacity:.65; font-size:.7rem; }
.api-view-switch button[aria-pressed="true"] { color:#4f376e; background:#fff; box-shadow:0 2px 5px #362a4810; }
.api-card .api-main-link { color:inherit; text-decoration:none; }
.api-card .api-main-link:hover h3 { color:var(--card-accent); }
.api-card-actions a { color:#6847d5; text-decoration:none; }
.api-empty { padding:36px 20px; text-align:center; border:1px dashed #d9cde7; border-radius:16px; background:#fcfaff; color:#897398; }
.api-empty h2 { font-size:1.15rem; color:#625074; }
.api-empty button { padding:10px 18px; border:1px solid #b9a5d0; border-radius:8px; color:#70518e; background:white; font-size:.8rem; }
.api-reference button:focus-visible { outline:3px solid #ac96ed; outline-offset:3px; }
@media(max-width:580px) { .api-platform-filters { gap:7px; } .api-platform-filters button { min-height:40px; padding:7px 10px; } }

@media(max-width:580px) { .api-platform-filters { flex-wrap:nowrap; overflow-x:auto; padding:3px 1px 10px; scrollbar-width:thin; } .api-platform-filters button { flex:0 0 auto; } }
.api-operation-card .api-main-link { display:flex; flex:1; flex-direction:column; }

.api-usage{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 0 auto;color:#89828f;font-size:12px;line-height:1}
.api-usage-metric{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;line-height:1;cursor:help}
.api-card-actions .api-usage-metric svg{display:block;width:16px;height:16px;flex:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit}
.api-usage-metric:hover{color:#5e477e}
.api-card-actions > svg{flex:none;margin-left:auto}
.api-card:focus-within{border-color:var(--card-accent,#7953cb);box-shadow:0 0 0 3px var(--card-soft,#f1edfb)}
.api-usage strong{font-variant-numeric:tabular-nums;color:inherit;font-size:12px;font-weight:600;line-height:1}
.api-usage-note{font-size:12px!important;line-height:1.6;color:#777185;max-width:920px;margin:16px 0 24px}

.api-card-cta{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:12px;color:#6c52a3;font-weight:600}
.api-card-actions{gap:10px;min-height:40px;padding-top:14px}
.api-card-actions{flex-wrap:wrap;row-gap:12px}
.api-credit-range{color:#795ab2}
.api-card:hover .api-card-cta{color:var(--card-accent,#7953cb)}
@media(max-width:370px){.api-card-actions{flex-wrap:wrap;row-gap:14px}.api-usage{gap:10px}}
@media(max-width:400px){.api-card-actions{display:grid;grid-template-columns:minmax(0,1fr);row-gap:12px}.api-usage{justify-self:end}}

.api-directory-title{font-size:1.15rem;line-height:1.4;margin:0 0 20px}
.api-selection-help,.api-faq{margin-top:44px;padding-top:28px;border-top:1px solid #e8e3ef}
.api-selection-help h2,.api-faq h2{font-size:1.25rem;line-height:1.35;margin:0 0 18px}
.api-selection-help ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:0;list-style:none}
.api-selection-help li{padding:18px;border:1px solid #e8e3ef;border-radius:12px;background:white;font-size:13px;color:#766b82}
.api-selection-help li strong{display:block;color:#342b40;margin-bottom:6px}
.api-selection-help p{font-size:13px}
.api-faq details{border-bottom:1px solid #e8e3ef;padding:16px 0}
.api-faq summary{cursor:pointer;font-size:14px;font-weight:600;color:#44374f}
.api-faq p{max-width:850px;margin:12px 0 0;font-size:14px;color:#766b82}
@media(max-width:580px){.api-selection-help ol{grid-template-columns:1fr;gap:12px}}