/* ===========================================================
   TIM4biz — API Support page
   Developer-focused layout: hero, sticky TOC, code samples,
   response-code grid, header tables, step list, verb cards.
   =========================================================== */

/*rh*/
h1 {
    color: white;
}

:root{
    --api-bg: #f5f8fb;
    --api-surface: #ffffff;
    --api-ink: #0c1b2a;
    --api-ink-2: #38516b;
    --api-muted: #6b7f93;
    --api-border: #e2e9f1;
    --api-brand: #0b6cf2;
    --api-brand-2: #6a3df0;
    --api-ok: #15a37a;
    --api-warn: #d49019;
    --api-err: #d23f3f;
    --api-code-bg: #0e1a2b;
    --api-code-ink: #e6edf6;
    --api-code-mute: #8aa0ba;
    --api-radius: 14px;
    --api-shadow: 0 14px 38px -22px rgba(11, 27, 48, .35);
}

/* ---------- Hero ---------- */
.api-hero{
    background:
        radial-gradient(1100px 460px at 12% -10%, rgba(11,108,242,.18), transparent 60%),
        radial-gradient(900px 400px at 100% 0%, rgba(106,61,240,.16), transparent 55%),
        linear-gradient(180deg, #0c1b2a 0%, #0c1b2a 70%, #102337 100%);
    color: #e8eef7;
    padding: 88px 0 96px;
    position: relative;
    overflow: hidden;
}
.api-hero::after{
    content:"";
    position:absolute; inset:auto 0 -1px 0; height:60px;
    background: linear-gradient(180deg, transparent, var(--api-bg));
}
.api-hero-inner{ max-width: 880px; }
.api-badge{
    display:inline-block;
    font-size: 12px; letter-spacing:.14em; text-transform:uppercase;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color:#cfe0ff;
}
.api-hero h1{
    margin: 18px 0 14px;
    font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.05; letter-spacing:-0.02em;
}
.api-lead{
    font-size: clamp(16px, 1.5vw, 19px);
    color:#c8d6ea; max-width: 720px; margin: 0 0 22px;
}
.api-meta{ display:flex; flex-wrap:wrap; gap: 10px 18px; color:#bcccdf; }
.api-meta .meta-item{
    display:inline-flex; align-items:center; gap:8px;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
}
.api-cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 26px; }
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    height: 44px; padding: 0 20px; border-radius: 10px;
    font-weight: 600; font-size: 14.5px; text-decoration: none;
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn-primary{
    background: linear-gradient(135deg, var(--api-brand), var(--api-brand-2));
    color:#fff; box-shadow: 0 12px 30px -14px rgba(11,108,242,.7);
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-ghost{
    background: rgba(255,255,255,.06);
    color:#e8eef7;
    border: 1px solid rgba(255,255,255,.18);
}
.btn-ghost:hover{ background: rgba(255,255,255,.12); }

/* ---------- Shell ---------- */
.api-shell{
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    margin: -40px auto 80px;
    position: relative;
    z-index: 2;
}

/* ---------- TOC ---------- */
.api-toc{
    position: sticky; top: 24px;
    align-self: start;
    background: var(--api-surface);
    border: 1px solid var(--api-border);
    border-radius: var(--api-radius);
    padding: 18px;
    box-shadow: var(--api-shadow);
}
.api-toc .toc-title{
    display:block;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--api-muted);
    margin-bottom: 10px;
}
.api-toc ul{ list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.api-toc a{
    display:block; padding: 8px 10px; border-radius: 8px;
    text-decoration:none; color: var(--api-ink-2); font-size: 14px;
    border-left: 2px solid transparent;
}
.api-toc a:hover{
    background: #eef4fd; color: var(--api-brand);
    border-left-color: var(--api-brand);
}

/* ---------- Content ---------- */
.api-content{ min-width: 0; display:grid; gap: 28px; }

.api-section{
    background: var(--api-surface);
    border: 1px solid var(--api-border);
    border-radius: var(--api-radius);
    padding: 32px;
    box-shadow: var(--api-shadow);
    position: relative;
    scroll-margin-top: 24px;
}
.api-section .section-num{
    position:absolute; top: 24px; right: 28px;
    font-size: 11px; letter-spacing:.18em; text-transform: uppercase;
    color: var(--api-muted);
}
.api-section h2{
    margin: 0 0 12px;
    font-size: 26px; letter-spacing:-0.01em; color: var(--api-ink);
}
.api-section p{ color: var(--api-ink-2); line-height: 1.65; margin: 0 0 14px; }
.api-section a{ color: var(--api-brand); text-decoration: none; }
.api-section a:hover{ text-decoration: underline; }

/* ---------- Info cards ---------- */
.info-card{
    margin-top: 12px;
    display:flex; flex-wrap:wrap; gap: 6px 14px;
    align-items: baseline;
    padding: 14px 16px;
    background: #eff5ff;
    border: 1px solid #d6e4fb;
    border-left: 4px solid var(--api-brand);
    border-radius: 10px;
    color: #143560; font-size: 14.5px;
}
.info-card strong{ color: var(--api-ink); }
.info-warn{
    background: #fff7ea; border-color: #f5e0b6; border-left-color: var(--api-warn);
    color:#6b4a0c;
}

/* ---------- Response code grid ---------- */
.code-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px; margin-top: 18px;
}
.code-card{
    background: #fff;
    border: 1px solid var(--api-border);
    border-radius: 12px;
    padding: 16px;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.code-card:hover{ transform: translateY(-2px); box-shadow: var(--api-shadow); }
.code-card .code-num{
    display:inline-block;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px; font-weight: 700;
    padding: 3px 9px; border-radius: 999px;
    margin-bottom: 8px;
}
.code-card strong{ display:block; color: var(--api-ink); font-size: 15px; margin-bottom: 4px; }
.code-card p{ font-size: 13.5px; color: var(--api-ink-2); margin: 0; line-height: 1.55; }

.code-ok  { border-top: 3px solid var(--api-ok); }
.code-ok  .code-num{ background: #e3f6ee; color: var(--api-ok); }
.code-warn{ border-top: 3px solid var(--api-warn); }
.code-warn .code-num{ background: #fbf0d8; color: #8a5b0c; }
.code-err { border-top: 3px solid var(--api-err); }
.code-err .code-num{ background: #fbe2e2; color: var(--api-err); }

/* ---------- Header tables ---------- */
.header-table{
    margin-top: 14px;
    border: 1px solid var(--api-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.hdr-row{
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--api-border);
    font-size: 14px;
    align-items: center;
}
.hdr-row:last-child{ border-bottom: none; }
.hdr-head{
    background: #f3f7fc;
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--api-muted);
}
.hdr-row code{
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: #f1f5fb;
    color: #143560;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12.5px;
    word-break: break-all;
}
.hdr-row span{ color: var(--api-ink-2); }

/* ---------- Tabs (CSS only) ---------- */
.tabs{
    margin-top: 18px;
    border: 1px solid var(--api-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.tab-input{ position: absolute; opacity: 0; pointer-events: none; }
.tab-label{
    display: inline-block;
    padding: 12px 18px;
    font-size: 13.5px; font-weight: 600;
    color: var(--api-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    background: #f7fafd;
}
.tab-label:hover{ color: var(--api-ink); }

.tab-panel{ display: none; padding: 18px; border-top: 1px solid var(--api-border); }
.tab-blurb{ margin: 0 0 12px; color: var(--api-ink-2); font-size: 14.5px; }
.tab-blurb code{
    background: #f1f5fb; padding: 1px 6px; border-radius: 5px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px; color: #143560;
}

/* show only the matching panel */
#tab-csharp-get:checked   ~ [data-tab="tab-csharp-get"],
#tab-python-get:checked   ~ [data-tab="tab-python-get"],
#tab-csharp-post:checked  ~ [data-tab="tab-csharp-post"],
#tab-python-post:checked  ~ [data-tab="tab-python-post"]{ display: block; }

/* highlight active label */
#tab-csharp-get:checked   ~ label[for="tab-csharp-get"],
#tab-python-get:checked   ~ label[for="tab-python-get"],
#tab-csharp-post:checked  ~ label[for="tab-csharp-post"],
#tab-python-post:checked  ~ label[for="tab-python-post"]{
    color: var(--api-brand);
    background: #fff;
    border-bottom-color: var(--api-brand);
}

/* ---------- Code blocks ---------- */
.code-block{
    margin: 0;
    background: var(--api-code-bg);
    color: var(--api-code-ink);
    border-radius: 10px;
    padding: 16px 18px;
    overflow-x: auto;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid #11253b;
}
.code-block code{ font: inherit; color: inherit; background: transparent; }
.install-row{
    background: #0e1a2b;
    color: var(--api-code-mute);
    padding: 8px 14px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
}
.install-row code{ color: var(--api-code-ink); }

/* ---------- Step list ---------- */
.step-list{
    list-style: none; padding: 0; margin: 18px 0 0;
    display: grid; gap: 12px;
}
.step-list li{
    display: grid; grid-template-columns: 44px 1fr; gap: 14px;
    background: #f7fafd; border: 1px solid var(--api-border);
    border-radius: 12px; padding: 14px 16px;
}
.step-num{
    display:flex; align-items:center; justify-content:center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--api-brand), var(--api-brand-2));
    color: #fff; font-weight: 700;
}
.step-list strong{ color: var(--api-ink); display:block; margin-bottom: 2px; }
.step-list p{ margin: 0; color: var(--api-ink-2); font-size: 14px; }
kbd{
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: #fff; border: 1px solid var(--api-border);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 1px 6px; font-size: 12px;
    color: var(--api-ink);
}

/* ---------- Verb grid ---------- */
.verb-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px; margin-top: 16px;
}
.verb-card{
    border: 1px solid var(--api-border);
    border-radius: 12px;
    padding: 18px;
    background: #fff;
    position: relative;
}
.verb-tag{
    display:inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    padding: 4px 10px; border-radius: 6px; margin-bottom: 10px;
}
.verb-get  .verb-tag{ background: #e3f6ee; color: var(--api-ok); }
.verb-post .verb-tag{ background: #eef0ff; color: var(--api-brand-2); }
.verb-card h3{ margin: 0 0 4px; font-size: 17px; color: var(--api-ink); }
.verb-card p{ margin: 0; font-size: 14px; color: var(--api-ink-2); }

/* ---------- Contact block ---------- */
.api-contact{
    text-align: center;
    padding: 36px 28px;
    border-radius: var(--api-radius);
    background: linear-gradient(135deg, #0c1b2a, #102337);
    color:#e8eef7;
    box-shadow: var(--api-shadow);
}
.api-contact h2{ margin: 0 0 8px; color:#fff; font-size: 24px; }
.api-contact p{ margin: 0 0 18px; color: #c8d6ea; }
.contact-cards{
    display:grid; gap:12px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.contact-card{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    padding: 14px;
    color:#fff; text-decoration:none;
    transition: background .2s ease, transform .15s ease;
}
.contact-card:hover{ background: rgba(255,255,255,.12); transform: translateY(-2px); }
.contact-card strong{ display:block; font-size: 14px; margin-bottom: 4px; }
.contact-card span{ font-size: 13px; color: #c8d6ea; }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
    .api-shell{ grid-template-columns: 1fr; margin-top: -24px; }
    .api-toc{ position: static; }
    .api-toc ul{ grid-auto-flow: column; grid-auto-columns: max-content; overflow-x:auto; }
    .api-toc a{ white-space: nowrap; }
    .api-section{ padding: 24px; }
    .api-section .section-num{ position: static; display:block; margin-bottom: 6px; }
    .hdr-row{ grid-template-columns: 1fr; gap: 4px; }
    .hdr-head{ display:none; }
}
@media (max-width: 560px){
    .api-hero{ padding: 64px 0 72px; }
    .tab-label{ padding: 10px 12px; font-size: 12.5px; }
    .step-list li{ grid-template-columns: 32px 1fr; }
    .step-num{ width: 28px; height: 28px; font-size: 13px; }
}