/* ═══════════════════════════════════════════════════════════════
   Home page polish — hero card actions, detail copy + reveal,
   API reference links, playground copy, approach-section rhythm.
   Loaded only on / via $pageCss. Both themes: uses shared vars
   and the same rgba(56,189,248,…) accent tints as shared.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero IP card: JSON / cURL / export toolbar ─────────────── */
.ip-card-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 16px;border-top:1px solid var(--border-default)}
.ip-card-action{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;font-family:var(--font-body);font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--text-tertiary);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:color .15s ease,border-color .15s ease,background .15s ease,transform .15s ease}
.ip-card-action svg{flex-shrink:0;opacity:.85}
.ip-card-action:hover{color:var(--accent);border-color:rgba(56,189,248,.5);background:var(--accent-subtle);transform:translateY(-1px)}
.ip-card-action:active{transform:none}
@media (max-width:640px){
    .ip-card-actions{justify-content:center;flex-wrap:wrap;padding:10px 12px}
}

/* ── Hero details grid: hover-reveal per-field copy ─────────── */
.ip-detail{position:relative}
.ip-detail-copy{position:absolute;top:8px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-tertiary);cursor:pointer;opacity:0;transition:opacity .15s ease,color .15s ease,border-color .15s ease,background .15s ease}
.ip-detail:hover .ip-detail-copy,.ip-detail-copy:focus-visible{opacity:1}
.ip-detail-copy:hover{color:var(--accent);border-color:rgba(56,189,248,.5);background:var(--accent-subtle)}
@media (hover:none){.ip-detail-copy{opacity:.5}}

/* ── Hero details grid: one-time staggered reveal ───────────── */
@media (prefers-reduced-motion:no-preference){
    .ip-detail-reveal{animation:homeDetailIn .45s var(--ease-smooth) both;animation-delay:var(--reveal-delay,0ms)}
    @keyframes homeDetailIn{
        from{opacity:0;transform:translateY(6px)}
        to{opacity:1;transform:none}
    }
}

/* ── #api section: full-reference links ─────────────────────── */
.api-ref-link{display:inline-flex;align-items:center;gap:7px;margin-top:20px;padding:8px 15px;font-size:13px;font-weight:600;color:var(--accent);background:var(--accent-subtle);border:1px solid rgba(56,189,248,.35);border-radius:var(--radius-sm);text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease}
.api-ref-link:hover{border-color:rgba(56,189,248,.65);box-shadow:0 0 18px -6px rgba(56,189,248,.45)}
.api-ref-link .api-ref-arrow{transition:transform .15s var(--ease-smooth)}
.api-ref-link:hover .api-ref-arrow{transform:translateX(3px)}
.endpoints-footer{margin-top:20px;text-align:center;font-size:13px;color:var(--text-tertiary);line-height:1.6}
.endpoints-footer a{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
.endpoints-footer a:hover{text-decoration:underline}

/* ── Playground: response header copy button ────────────────── */
.response-meta{display:flex;align-items:center;gap:10px}

/* ── Approach section: rhythm + soft divider/glow polish ────── */
/* Soft top divider + faint accent glow behind the section header */
.approach-section::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(760px,92%);height:1px;background:linear-gradient(90deg,transparent,rgba(56,189,248,.45),transparent);pointer-events:none}
.approach-section::after{content:'';position:absolute;top:-110px;left:50%;transform:translateX(-50%);width:640px;max-width:100%;height:300px;background:radial-gradient(ellipse at center,rgba(56,189,248,.06),transparent 70%);pointer-events:none}
.approach-section .container{position:relative;z-index:1}

/* Tighter header rhythm with a fading rule under the intro */
.approach-section .section-header{position:relative;margin-bottom:40px;padding-bottom:26px}
.approach-section .section-header::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,rgba(56,189,248,.35),transparent 65%)}

/* Icon chips: soft glow ring, gentle lift with the card hover */
.approach-icon{box-shadow:inset 0 0 0 1px rgba(56,189,248,.18),0 0 22px -8px rgba(56,189,248,.35);transition:transform .2s var(--ease-smooth),box-shadow .2s var(--ease-smooth)}
.approach-card:hover .approach-icon{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(56,189,248,.3),0 0 26px -6px rgba(56,189,248,.5)}

/* Typography: tighter measure and calmer body rhythm */
.approach-card h3{font-size:17px;margin-bottom:8px}
.approach-card p{font-size:13.5px;line-height:1.65;max-width:52ch}
.approach-icon{margin-bottom:16px}

/* Benchmark strip: soften and align with the cards above */
.approach-bench-stat strong{font-variant-numeric:tabular-nums}
.approach-bench-stat span{font-size:12.5px;line-height:1.65}

@media (prefers-reduced-motion:reduce){
    .approach-icon,.approach-card:hover .approach-icon{transform:none}
}