.hiw-title {
    font-size:var(--fs-h4);
    font-weight:700;
    color:var(--fg-strong);
    margin:0 0 var(--s-2);
}
.hiw-intro {
    color:var(--fg-secondary);
    line-height:1.65;
    margin-bottom:2rem;
}

/* ── Accordion stage (details/summary) ── */
details.hiw-stage {
    border:0.0625rem solid var(--border-soft);
    border-radius:var(--radius-sm);
    background:var(--bg-surface);
    overflow:hidden;
    margin-bottom:var(--s-4);
    box-shadow:0 0.0625rem 0.1875rem rgba(var(--black-rgb),.06);
}

summary.hiw-stage-header {
    display:flex;
    align-items:center;
    gap:var(--s-4);
    padding:var(--s-5) var(--s-6);
    cursor:pointer;
    user-select:none;
    background:var(--bg-muted);
    list-style:none;
    transition:background 0.15s;
}
summary.hiw-stage-header::-webkit-details-marker { display:none; }
summary.hiw-stage-header::marker { display:none; }
summary.hiw-stage-header:hover { background:var(--bg-app); }

.hiw-stage-num {
    width:1.75rem;
    height:1.75rem;
    border-radius:50%;
    background:var(--seg-blue);
    color:var(--white);
    font-size:var(--fs-ui);
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.hiw-stage-title {
    font-size:0.9375rem;
    font-weight:600;
    color:var(--fg-strong);
    flex:1;
}

.hiw-stage-arrow {
    font-size:var(--fs-caption);
    color:var(--fg-muted);
    transition:transform 0.2s;
    flex-shrink:0;
}
details.hiw-stage[open] .hiw-stage-arrow {
    transform:rotate(180deg);
}

.hiw-stage-body {
    padding:var(--s-5) var(--s-6);
    border-top:0.0625rem solid var(--border-soft);
}

details.hiw-stage[open] > .hiw-stage-body {
    animation:hiwFadeIn 0.2s ease;
}
.hiw-stage-body p,
.hiw-stage-body li {
    font-size:var(--fs-body-4);
    color:var(--fg-default);
    line-height:1.6;
}
.hiw-stage-body ul {
    padding-left:var(--s-6);
    margin:var(--s-2) 0;
}
.hiw-stage-body code {
    background:var(--bg-muted);
    border-radius:0.25rem;
    padding:0.0625rem 0.3125rem;
    font-size:var(--fs-ui);
}
.hiw-stage-body a {
    color:var(--link);
    text-decoration:underline;
}

/* ── FAQ ── */
.hiw-faq-title {
    font-size:var(--fs-h5);
    font-weight:700;
    color:var(--fg-strong);
    margin:2.5rem 0 1rem;
}

details.hiw-faq {
    border:0.0625rem solid var(--border-soft);
    border-radius:0.625rem;
    background:var(--bg-surface);
    overflow:hidden;
    margin-bottom:var(--s-2);
}

summary.hiw-faq-q {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.875rem 1.125rem;
    cursor:pointer;
    font-size:var(--fs-body-4);
    font-weight:600;
    color:var(--fg-strong);
    background:var(--bg-muted);
    list-style:none;
    transition:background 0.15s;
    gap:var(--s-4);
}
summary.hiw-faq-q::-webkit-details-marker { display:none; }
summary.hiw-faq-q::marker { display:none; }
summary.hiw-faq-q:hover { background:var(--bg-app); }

.hiw-faq-icon {
    font-size:var(--fs-caption);
    color:var(--fg-muted);
    font-weight:400;
    flex-shrink:0;
    transition:transform 0.2s;
}
details.hiw-faq[open] .hiw-faq-icon {
    transform:rotate(180deg);
}

.hiw-faq-a {
    padding:var(--s-4) 1.125rem;
    font-size:var(--fs-ui);
    color:var(--fg-secondary);
    line-height:1.6;
    border-top:0.0625rem solid var(--border-soft);
}

details.hiw-faq[open] > .hiw-faq-a {
    animation:hiwFadeIn 0.2s ease;
}

@keyframes hiwFadeIn {
    from { opacity:0; transform:translateY(-0.25rem); }
    to   { opacity:1; transform:translateY(0); }
}

/* CSS-only radio tabs (ApiReference) */
.hiw-tab-radio { display:none; }

.hiw-tabs-wrap {
    border:0.0625rem solid var(--border-soft);
    border-radius:var(--radius-xs);
    overflow:hidden;
}

.hiw-tabs-bar {
    display:flex;
    background:var(--bg-muted);
    border-bottom:0.0625rem solid var(--border-soft);
}

.hiw-tab-lbl {
    padding:var(--s-3) var(--s-6);
    font-size:var(--fs-body-4);
    font-weight:500;
    color:var(--fg-secondary);
    cursor:pointer;
    border-bottom:0.125rem solid transparent;
    transition:color 0.15s, border-color 0.15s;
}

.hiw-tab-lbl:hover { color:var(--fg-default); }

.hiw-tab-panel {
    display:none;
    background:var(--bg-surface);
}

/* Show active tab panel */
#tab-swagger:checked ~ .hiw-tabs-bar label[for="tab-swagger"],
#tab-ref:checked ~ .hiw-tabs-bar label[for="tab-ref"] {
    color:var(--fg-strong);
    border-bottom-color:var(--seg-blue);
    background:var(--bg-surface);
}

#tab-swagger:checked ~ .hiw-tab-swagger { display:block; }
#tab-ref:checked ~ .hiw-tab-ref { display:block; }

/* 4-tab code-samples panel selectors */
#cs-curl:checked ~ .hiw-tabs-bar label[for="cs-curl"],
#cs-csharp:checked ~ .hiw-tabs-bar label[for="cs-csharp"],
#cs-python:checked ~ .hiw-tabs-bar label[for="cs-python"],
#cs-nodejs:checked ~ .hiw-tabs-bar label[for="cs-nodejs"] {
    color:var(--fg-strong);
    border-bottom-color:var(--seg-blue);
    background:var(--bg-surface);
}
#cs-curl:checked ~ .cs-tab-curl { display:block; }
#cs-csharp:checked ~ .cs-tab-csharp { display:block; }
#cs-python:checked ~ .cs-tab-python { display:block; }
#cs-nodejs:checked ~ .cs-tab-nodejs { display:block; }