/* ============================================================================
   Easy Red 2 - Wiki skin
   Va caricato DOPO styles.css: non lo sostituisce, gli si sovrappone. Serve a
   dare alle pagine del wiki la stessa tavolozza e la stessa tipografia della
   home (home.css), che styles.css da solo non ha, e a rendere leggibili le
   tabelle lunghe della documentazione.
   ============================================================================ */

:root{
    /* Stessa famiglia di colori della home, ma con l'escursione di luminosita'
       ridotta: pagine di sola documentazione si leggono per minuti di fila, e
       fondo quasi nero contro testo quasi bianco con sopra accenti saturi
       stanca la vista. Il fondo e' alzato, l'inchiostro abbassato, e i colori
       che finiscono su GRANDI quantita' di testo (intestazioni, link nelle
       tabelle) sono desaturati. L'ember resta acceso solo dove e' un tocco:
       bottoni, richiami, riga sotto al titolo. */
    --wk-bg:#171310;
    --wk-bg-2:#201b16;
    --wk-panel:rgba(255,255,255,.028);
    --wk-panel-2:rgba(255,255,255,.05);
    --wk-ink:#e6e0d5;
    --wk-muted:#a9a094;
    --wk-dim:#7f776c;
    --wk-head:#9c9285;      /* intestazioni di tabella: grigio caldo, non oro */
    --wk-link:#c7b085;      /* link dentro le tabelle */
    --wk-link-hot:#e0a878;
    --wk-ember:#e2531c;
    --wk-ember-hot:#ff6a32;
    --wk-rust:#6b2c1a;
    --wk-brass:#c9a24b;
    --wk-brass-soft:#cbb489;
    --wk-line:rgba(201,162,75,.14);
    --wk-line-2:rgba(246,241,231,.06);
    --wk-radius:10px;
    --wk-display:'Oswald','Roboto Condensed',Arial,sans-serif;
}

/* ---------- impianto ---------- */

body{
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(226,83,28,.10), transparent 60%),
        linear-gradient(180deg, var(--wk-bg-2), var(--wk-bg) 40%) fixed;
    color:var(--wk-ink);
}

main{
    max-width:1180px;
    margin:0 auto;
    padding:0 20px 40px;
}

/* Titoli col carattere della home. Il tratto sotto l'h1 fa da riga di reparto:
   dice dove comincia la pagina senza aggiungere un altro riquadro. */
main h1, main h2, main h3, main h4{
    font-family:var(--wk-display);
    font-weight:600;
    letter-spacing:.02em;
    color:var(--wk-ink);
}
main h1{
    font-size:2.4rem;
    text-align:center;
    margin:28px 0 6px;
}
main h1::after{
    content:"";
    display:block;
    width:96px;
    height:3px;
    margin:14px auto 0;
    background:linear-gradient(90deg,transparent,rgba(226,83,28,.55),transparent);
    border-radius:2px;
}
main h2{ font-size:1.7rem; margin:34px 0 10px; }
main h3{ font-size:1.25rem; margin:26px 0 8px; color:var(--wk-brass-soft); }

main p{ color:var(--wk-muted); }
main a{ color:var(--wk-brass-soft); }
main a:hover{ color:var(--wk-ember-hot); }

/* ---------- barra di navigazione ---------- */

header{
    background:linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.55));
    border-bottom:1px solid var(--wk-line);
    position:sticky;      /* la documentazione e' lunga: la barra deve restare a portata */
    top:0;
    z-index:50;
    backdrop-filter:blur(6px);
}
header nav ul li a{
    font-family:var(--wk-display);
    letter-spacing:.03em;
    text-transform:uppercase;
    font-size:.95rem;
    padding:8px 14px;
    border-radius:6px;
    border:1px solid transparent;
    transition:background .18s ease, border-color .18s ease, color .18s ease;
}
header nav ul li a:hover{
    background:rgba(226,83,28,.14);
    border-color:var(--wk-line);
    color:var(--wk-ink);
}

/* ---------- schede ---------- */

/* Sottolineate e non a pillola: sono nove classi, e nove pillole colorate in
   fila sono una barriera di bottoni prima ancora di arrivare al contenuto.
   Qui la riga di schede e' una riga sola, la scheda scelta si riconosce dal
   filetto sotto e dal testo piu' chiaro, e il colore resta un accento.
   Ogni proprieta' ha !important perche' .wiki-tab e' un <button>, e styles.css
   colora tutti i button di rosso mattone. */
.wiki-tabs{
    display:flex;
    gap:2px;
    margin:26px 0 0 !important;
    padding:0;
    border-bottom:1px solid var(--wk-line);
    overflow-x:auto;            /* su schermo stretto scorrono invece di andare a capo */
    overflow-y:hidden;
    scrollbar-width:thin;
}
.wiki-tab{
    flex:0 0 auto;
    font-family:var(--wk-display) !important;
    font-size:.94rem !important;
    font-weight:400 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
    color:var(--wk-muted) !important;
    background:transparent !important;
    border:0 !important;
    border-bottom:2px solid transparent !important;
    border-radius:0 !important;
    padding:12px 16px !important;
    margin:0 !important;
    cursor:pointer;
    white-space:nowrap;
    transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.wiki-tab:hover{
    color:var(--wk-ink) !important;
    background:rgba(255,255,255,.03) !important;
}
.wiki-tab.active{
    color:var(--wk-ink) !important;
    border-bottom-color:var(--wk-ember) !important;
}
.wiki-tab .tab-count{
    margin-left:7px;
    font-size:.85em;
    opacity:.5;
}
.wiki-tab.empty{ opacity:.35; }

/* NB: la visibilita' dei pannelli la governa il JS scrivendo display sull'elemento.
   Se il foglio di stile non arriva, o e' una copia vecchia in cache, i pannelli
   restano tutti visibili impilati: sgraziato ma leggibile. Con display:none qui
   un CSS non aggiornato li nasconderebbe tutti e la pagina sembrerebbe vuota. */

.wiki-panel-body{
    border:1px solid var(--wk-line);
    border-top:0;
    border-radius:0 0 var(--wk-radius) var(--wk-radius);
    background:var(--wk-panel);
    padding:2px 16px 10px;
}
.wiki-panel-body > .panel-desc{
    margin:0;
    padding:14px 0 2px;
    color:var(--wk-muted);
}

/* Il nome della classe serve solo mentre si cerca, quando i pannelli sono
   aperti tutti insieme e altrimenti non si capisce da dove viene una riga.
   Anche questo lo accende il JS, per lo stesso motivo dei pannelli. */
.tabpanel-title{
    font-family:var(--wk-display);
    font-size:1.05rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--wk-head);
    margin:26px 0 8px;
}

.wiki-no-results{
    text-align:center;
    color:var(--wk-dim);
    font-style:italic;
    padding:26px 0;
}
/* ---------- tabelle ---------- */

/* styles.css disegna un bordo su TUTTI e quattro i lati di ogni cella. Restando
   in "collapse" e azzerando i lati che non servono si ottengono righe pulite:
   con "separate" i bordi si sommano e la prima riga sembra rotta. */
main table{
    width:100%;
    border-collapse:collapse;
    margin:14px 0 18px;
    background:transparent;
    font-size:.97rem;
}
main th, main td{ border:0; }
/* Niente position:sticky qui. Queste tabelle vivono dentro contenitori
   richiudibili (.class-content, .callback-body) che hanno overflow:hidden e
   max-height animata: li' l'intestazione si stacca e finisce sopra la prima
   riga invece di restare in cima alla pagina. */
main th{
    font-family:var(--wk-display);
    font-weight:500;
    letter-spacing:.04em;
    text-transform:uppercase;
    font-size:.82rem;
    color:var(--wk-head);
    background:rgba(255,255,255,.045);
    border-bottom:1px solid var(--wk-line) !important;
    padding:11px 14px;
    text-align:left;
}
main td{
    padding:11px 14px;
    border-bottom:1px solid var(--wk-line-2) !important;
    color:var(--wk-muted);
    vertical-align:top;
}
main tr:nth-child(even) td{ background:rgba(255,255,255,.012); }
main tr:hover td{ background:rgba(255,255,255,.035); }
main td a{ color:var(--wk-link); font-weight:500; }
main td a:hover{ color:var(--wk-link-hot); }

/* la colonna del nome funzione e' quella che si cerca: va letta come codice */
main td .fn-name{
    font-family:'Consolas','Menlo',monospace;
    font-size:.95rem;
}

/* ---------- badge di versione ---------- */

/* Da che versione del gioco la chiamata esiste. Verde ottone e non rosso: e'
   un'informazione, non un avviso. */
.version-badge{
    display:inline-block;
    font-family:var(--wk-display);
    font-size:.78rem;
    letter-spacing:.04em;
    line-height:1;
    padding:5px 9px;
    border-radius:999px;
    white-space:nowrap;
    color:var(--wk-brass-soft);
    background:rgba(201,162,75,.10);
    border:1px solid rgba(201,162,75,.22);
}
.version-badge::before{ content:"v"; opacity:.6; }
.version-badge.version-inline{ margin-left:10px; vertical-align:middle; }

/* ---------- ricerca ---------- */

#function-search, #callback-search{
    max-width:520px !important;
    width:100% !important;
    display:block;
    margin:0 auto 26px auto !important;
    padding:12px 16px;
    font-size:1rem;
    color:var(--wk-ink);
    background:rgba(255,255,255,.05);
    border:1px solid var(--wk-line);
    border-radius:999px;
    outline:none;
    transition:border-color .18s ease, box-shadow .18s ease;
}
#function-search:focus, #callback-search:focus{
    border-color:var(--wk-ember);
    box-shadow:0 0 0 3px rgba(226,83,28,.15);
}

/* ---------- voti ---------- */

.upvote-button{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid var(--wk-line-2);
    background:rgba(255,255,255,.045);
    color:var(--wk-muted) !important;
    text-decoration:none;
    font-size:.85rem;
    transition:all .18s ease;
}
.upvote-button:hover{ border-color:var(--wk-ember); color:var(--wk-ember-hot) !important; }
.upvote-button.upvoted{
    background:rgba(226,83,28,.18);
    border-color:var(--wk-ember);
    color:var(--wk-ember-hot) !important;
}

/* ---------- blocchi di codice ed esempi ---------- */

main pre{
    border:1px solid var(--wk-line);
    border-radius:var(--wk-radius);
    overflow:auto;
    margin:10px 0 16px;
}
main pre code{
    display:block;
    padding:16px 18px !important;
    font-size:.92rem;
    line-height:1.55;
    background:rgba(0,0,0,.32) !important;
}
main code:not(pre code){
    font-family:'Consolas','Menlo',monospace;
    font-size:.92em;
    padding:2px 6px;
    border-radius:4px;
    background:rgba(201,162,75,.12);
    color:var(--wk-brass-soft);
}
.example{
    background:var(--wk-panel);
    border:1px solid var(--wk-line);
    border-left:3px solid var(--wk-ember);
    border-radius:var(--wk-radius);
    padding:14px 16px;
    margin:16px 0;
}
.example h4{ margin:0 0 8px; color:var(--wk-brass-soft); }

/* ---------- scheda di dettaglio ---------- */

.function-title{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    font-family:'Consolas','Menlo',monospace !important;
    font-size:1.9rem !important;
    color:var(--wk-ink);
    margin:26px 0 4px;
}
.function-details{
    background:var(--wk-panel);
    border:1px solid var(--wk-line);
    border-radius:var(--wk-radius);
    padding:16px 18px;
    margin:14px 0 8px;
}
.function-details p{ color:var(--wk-ink); }
.no-parameters{
    color:var(--wk-dim);
    font-style:italic;
    padding:12px 0;
}

/* riga con le informazioni di contorno (versione, classe...) sotto al titolo */
.function-meta{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:0 0 14px;
    color:var(--wk-dim);
    font-size:.9rem;
}

/* ---------- moduli ---------- */

main label{
    display:block;
    margin:14px 0 6px;
    font-family:var(--wk-display);
    letter-spacing:.03em;
    text-transform:uppercase;
    font-size:.82rem;
    color:var(--wk-brass);
}
main input[type="text"],
main input[type="password"],
main textarea,
main select{
    width:100%;
    padding:10px 12px;
    color:var(--wk-ink);
    background:rgba(255,255,255,.045);
    border:1px solid var(--wk-line);
    border-radius:8px;
    font-family:var(--wk-font,'Roboto Condensed',Arial,sans-serif);
    font-size:1rem;
}
main input[type="text"]:focus,
main input[type="password"]:focus,
main textarea:focus,
main select:focus{
    outline:none;
    border-color:var(--wk-ember);
    box-shadow:0 0 0 3px rgba(226,83,28,.15);
}
main input[type="submit"], main button{
    font-family:var(--wk-display);
    letter-spacing:.04em;
    text-transform:uppercase;
    padding:10px 18px;
    border:none;
    border-radius:8px;
    background:var(--wk-rust);
    color:var(--wk-ink);
    cursor:pointer;
    transition:background .18s ease, transform .1s ease;
}
main input[type="submit"]:hover, main button:hover{ background:var(--wk-ember); }
main input[type="submit"]:active, main button:active{ transform:translateY(1px); }
.parameter-row{
    display:grid;
    grid-template-columns:1fr 180px 2fr auto;
    gap:10px;
    align-items:center;
    margin:8px 0;
}
.parameter-row input, .parameter-row select{ margin:0; }

/* ---------- bottoni di richiamo (guide, generatore) ---------- */

.wiki-cta-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
    margin:22px 0 30px;
}
.wiki-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--wk-display);
    letter-spacing:.04em;
    text-transform:uppercase;
    font-size:.95rem;
    text-decoration:none;
    padding:13px 22px;
    border-radius:10px;
    border:1px solid var(--wk-line);
    background:var(--wk-panel-2);
    color:var(--wk-ink) !important;
    transition:background .18s ease, border-color .18s ease, transform .12s ease;
}
.wiki-cta:hover{
    background:rgba(226,83,28,.16);
    border-color:var(--wk-ember);
    transform:translateY(-1px);
}
.wiki-cta.primary{
    background:linear-gradient(180deg, var(--wk-ember), var(--wk-rust));
    border-color:var(--wk-ember-hot);
}
.wiki-cta.primary:hover{ background:linear-gradient(180deg, var(--wk-ember-hot), var(--wk-ember)); }
.wiki-cta .cta-icon{ font-size:1.15rem; line-height:1; }

/* ---------- note ---------- */

.wiki-note{
    background:rgba(201,162,75,.07);
    border:1px solid var(--wk-line);
    border-left:3px solid var(--wk-brass);
    border-radius:var(--wk-radius);
    padding:12px 16px;
    margin:16px 0;
    color:var(--wk-muted);
}

/* ---------- pie' di pagina ---------- */

footer{
    border-top:1px solid var(--wk-line);
    background:rgba(0,0,0,.4);
}
footer p{ color:var(--wk-dim); }

/* ---------- schermi stretti ---------- */

@media (max-width:820px){
    main h1{ font-size:1.9rem; }
    .parameter-row{ grid-template-columns:1fr; }
    /* le tabelle larghe scorrono da sole invece di sfondare la pagina */
    main table{ display:block; overflow-x:auto; white-space:nowrap; }
    main td, main th{ white-space:normal; }
}