/* ==========================================================================
   SITE RESKIN: /api/ (api/index.cfm). 15 Oct 2026. Auto-loaded in the
   preview only (includes/header.cfm loads rs-page-<page>.css), after
   rs-legal.css (the contents list and the white document). Layout in
   includes/inc_rs_api.cfm. The page's own <style> block still loads in both
   looks, so these rules re-dress its api- classes for the preview only.
   ========================================================================== */

/* A docs page wants a wider document than the legal pages: the whole of the menu's width
   (15 Oct: content lines up with the logo), no narrower frame of its own. */
.rs-api .rs-doc-body > * { max-width: none; }
.rs-api .rs-doc-body > p,
.rs-api .rs-doc-body > ul { max-width: 40em; }
.rs-api .rs-doc-hero .rs-lead { max-width: 40em; }
.rs-api-cta { margin: 18px 0 0; }

/* Code samples: dark panels, scroll sideways inside themselves on a phone */
body.ft-reskin .rs-api .api-code {
    background: #13271D;
    color: #E4EEDD;
    border: 1px solid #13271D;
    border-radius: var(--rs-radius-sm);
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.6;
    margin: 8px 0 18px;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
body.ft-reskin .rs-api .api-mono {
    background: #EEF2EA;
    color: var(--rs-ink);
    font-size: 0.92em;
    border-radius: 4px;
    padding: 1px 5px;
    white-space: normal;
    overflow-wrap: anywhere;
}
body.ft-reskin .rs-api a .api-mono { color: var(--rs-green); }

/* Tables: hairlines, and a scroll box if a phone is too narrow */
.rs-api-scroll { max-width: 100%; overflow-x: auto; margin: 6px 0 18px; }
body.ft-reskin .rs-api .api-table { margin: 0; font-size: 14.5px; min-width: 300px; }
body.ft-reskin .rs-api .api-table th {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--rs-label);
    border-bottom: 1px solid var(--rs-field);
    padding: 8px 12px 8px 0;
}
body.ft-reskin .rs-api .api-table td {
    border-bottom: 1px solid var(--rs-hair);
    padding: 10px 12px 10px 0;
    color: var(--rs-body);
    line-height: 1.6;
}

/* The free key box: a wash panel with calm fields and the dark green button */
body.ft-reskin .rs-api .api-key-box {
    background: var(--rs-wash);
    border: none;
    border-radius: var(--rs-radius);
    padding: 18px 16px;
    margin: 10px 0 18px;
}
body.ft-reskin .rs-api .api-key-box label { color: var(--rs-ink); font-size: 14.5px; }
body.ft-reskin .rs-api .api-key-box input[type="text"] {
    border: 1px solid var(--rs-field);
    border-radius: var(--rs-radius-sm);
    padding: 0.65rem 0.85rem;
    font-size: 16px;
    background: #fff;
}
body.ft-reskin .rs-api .api-key-box input[type="text"]:focus {
    border-color: var(--rs-green);
    box-shadow: 0 0 0 3px rgba(25, 79, 53, 0.15);
    outline: none;
}
body.ft-reskin .rs-api .api-key-box .api-agree { font-size: 14.5px; color: var(--rs-body); line-height: 1.55; }
body.ft-reskin .rs-api .api-agree input { accent-color: var(--rs-green); width: 18px; height: 18px; margin-top: 0.15rem; }
body.ft-reskin .rs-api .api-key-button {
    background: var(--rs-green);
    border-radius: var(--rs-radius-sm);
    padding: 12px 20px;
    font-weight: 700;
    font-size: 15px;
}
body.ft-reskin .rs-api .api-key-button:hover,
body.ft-reskin .rs-api .api-key-button:focus { background: var(--rs-green-deep); }
body.ft-reskin .rs-api .api-key-button:focus-visible,
body.ft-reskin .rs-api .api-key-box input:focus-visible { outline: 3px solid rgba(25, 79, 53, 0.35); outline-offset: 2px; }
body.ft-reskin .rs-api .api-key-help { color: var(--rs-label); }
/* The error line: a plain tinted box with a 1px border all round (no edge bar) */
body.ft-reskin .rs-api .api-key-error {
    border: 1px solid #EBC3BE;
    border-radius: var(--rs-radius-sm);
    background: #FFF4F2;
    color: #71251F;
    padding: 10px 12px;
}
body.ft-reskin .rs-api .api-key-copy input { min-width: 0; }

/* Lists in the document keep the dark green markers */
.rs-api .rs-doc-body ul li { margin-bottom: 8px; }

@media (min-width: 992px) {
    body.ft-reskin .rs-api .api-code { font-size: 13.5px; padding: 16px 20px; }
    body.ft-reskin .rs-api .api-key-box { padding: 22px 24px; }
    body.ft-reskin .rs-api .api-table { font-size: 15px; }
}