/* OSIRIS — secțiunea 6 „Free tools” (#tools, pasul 4b, 21 Oct 2026). Se încarcă doar pe prima pagină; clasele au prefixul tl-.
   Făcută după cercetare/sectiuni/unelte/fisa.md:
   - cardul întreg e o singură legătură, îndemnul cu săgeată la sfârșit; hover = fundalul se aprinde, cardul NU se ridică (TradingView /features/,
     Vercel, Raycast, Paper: niciunul nu mișcă cardul); apăsarea = o treaptă mai mult (TradingView);
   - bordura prinde albastrul la hover (CoinGlass); inelul de focus 2 px la 4 px de card, cu colțul cardului (Vercel, Paper, Raycast);
   - iconița în plăcuță sus-stânga + eticheta sus-dreapta, propoziția aproape albă peste fundalul colorat (Raycast);
   - marmura exemplului 05 (Warp, Paper Shaders) e desenată de tools-home.js într-un SINGUR canvas sub toate cele 6 carduri (three.js
     „multiple scenes”, Paper: fără un context WebGL pe card), cu stratul închis (05: negru 80 %; aici --bg 66 %) pus chiar în shader; aici: grila, cardul, textele,
     stările, paletele (tools-home.js le citește din variabilele de mai jos) și rezerva fără WebGL / fără JavaScript (gradient static).
   Paleta E strictă: hex doar în blocul de variabile de mai jos; fără italic; animațiile NU depind de prefers-reduced-motion (regula 6). */

.tl-sec{
  /* amestecuri 1:1 între culorile paletei E (osiris.css), ca marmura să aibă trepte între ele, fără culori străine */
  --tl-navy:#143689;                /* --deep #0b1d3a + --accent-deep #1d4ed8 */
  --tl-cobalt:#2b86e8;              /* --accent-deep #1d4ed8 + --accent #38bdf8 */
  --tl-royal:#122b74;               /* --bg #06080f + --accent-deep #1d4ed8 (reparațiile 1) */
  --tl-azure:#4d91ea;               /* --accent-deep #1d4ed8 + --nile-strong #7dd3fc (reparațiile 1) */
  --tl-ink-rgb:6 8 15;              /* --bg ca numere, pentru stratul închis al rezervei (fără WebGL) */
  /* stratul închis peste marmură, în --bg: în repaus, la hover / focus, la apăsare. tools-home.js le citește. 05 avea negru 80 %, dar peste
     palete de 2,5 ori mai luminoase; la noi 80 % lăsa marmura de două ori mai întunecată decât la 05 (judecata 1). Alese pe simulatorul
     lab/pas4b/r1/unelte/ (calibrare.py: 1050 de palete × 3 straturi × 39 de clipe): lumina lui 05 și textul ≥ 7:1 în orice clipă */
  --tl-veil:.66;
  --tl-veil-hover:.58;
  --tl-veil-press:.52;
  --tl-text:var(--note-text);       /* #c9dcea: propoziția și eticheta, aproape albe (05: #f3f4f6; Raycast: alb). NU --muted: peste
                                       cel mai luminos albastru al marmurii --muted coboară la ~4,4:1 */
  --tl-bd:var(--line-strong);
  --tl-bd-hover:rgba(56,189,248,.42);
  --tl-bd-press:rgba(56,189,248,.62);
  --tl-hi:rgba(242,244,248,.07);    /* lumina de 1 px de pe muchia de sus (ca rama de la #indicators) */
  --tl-tile:rgba(56,189,248,.12);   /* plăcuța iconiței: ca în meniul Tools (.nav__tile), puțin mai mare */
  --tl-tile-bd:rgba(56,189,248,.26);
  --tl-tile-hover:rgba(56,189,248,.2);
  --tl-pulse:var(--accent);         /* punctul „live” și unda lui (pulsul pe transform / opacity, nu pe box-shadow) */
  --tl-gap:var(--s6);               /* 32 px între carduri (05) */
  --tl-pad:2rem;                    /* 32 px în card (05) */
  --tl-min-h:20rem;                 /* 320 px (05), dar ca înălțime minimă: textul nu se taie niciodată */
}

/* ---------- grila: 3 / 2 / 1 coloane; canvasul marmurii (tools-home.js) stă sub carduri, în aceeași cutie, deci derulează odată cu ele ---------- */
.tl-wrap{position:relative}
.tl-wrap.reveal{opacity:1;transform:none}            /* intră cardurile, pe rând (mai jos), nu toată grila: cutia canvasului nu se mișcă */
.tl-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.tl-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tl-gap)}
.tl-item{display:flex;min-width:0}

/* ---------- cardul: o singură legătură; în spate marmura (canvasul) sau, fără WebGL, gradientul static de mai jos ---------- */
.tl-card{position:relative;isolation:isolate;flex:1;min-width:0;min-height:var(--tl-min-h);display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto 1fr auto;grid-template-areas:"ico live" "name name" "text text" "cta cta";align-items:center;
  padding:var(--tl-pad);border-radius:var(--r-card);border:1px solid var(--tl-bd);background-color:var(--bg);color:var(--text);
  box-shadow:inset 0 1px 0 var(--tl-hi);text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:opacity .6s var(--ease),border-color var(--d-fast) var(--ease-std)}
/* rezerva (fără WebGL sau până la primul desen): o „marmură” statică din aceleași culori, sub același strat închis (opacitatea = 1 − stratul) */
.tl-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:calc(1 - var(--tl-veil));
  background:radial-gradient(115% 85% at 8% 0%,var(--tl-c2),transparent 62%),radial-gradient(95% 80% at 100% 100%,var(--tl-c4),transparent 60%),
    linear-gradient(155deg,var(--tl-c1) 20%,var(--tl-c3) 80%);
  transition:opacity .3s cubic-bezier(0,0,.2,1)}
.tl-wrap.is-gl .tl-card{background-color:transparent}
.tl-wrap.is-gl .tl-card::before{display:none}

.tl-card__ico{grid-area:ico;display:grid;place-items:center;width:3rem;height:3rem;border-radius:12px;background:var(--tl-tile);border:1px solid var(--tl-tile-bd);
  color:var(--accent);font-size:1.375rem;transition:background-color var(--d-fast) var(--ease-std),border-color var(--d-fast) var(--ease-std)}
.tl-card__ico .ico{width:1em;height:1em}
.tl-card__live{grid-area:live;justify-self:end;display:inline-flex;align-items:center;gap:.55rem;margin-left:1rem;font-family:var(--font-mono);font-size:var(--t-micro);
  font-weight:500;line-height:1.25;letter-spacing:.02em;white-space:nowrap;color:var(--tl-text)}   /* fără majuscule: „60 s”, nu „60 S” */
.tl-card__live i{position:relative;flex:0 0 auto;width:.375rem;height:.375rem;border-radius:50%;background:var(--tl-pulse)}
/* unda punctului: un disc în aceeași culoare care se mărește și se stinge (transform + opacity: fără redesenare la fiecare cadru, ca la
   box-shadow); fiecare card bate la 0,4 s după cel dinainte (--tl-beat), ca un val prin grilă, nu toate odată ca un metronom */
.tl-card__live i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--tl-pulse);opacity:0;pointer-events:none;
  animation:tlLive 2.4s ease-out var(--tl-beat,0s) infinite}
.tl-card[data-tl="1"]{--tl-beat:-2s}.tl-card[data-tl="2"]{--tl-beat:-1.6s}.tl-card[data-tl="3"]{--tl-beat:-1.2s}.tl-card[data-tl="4"]{--tl-beat:-.8s}.tl-card[data-tl="5"]{--tl-beat:-.4s}
.tl-card__name{grid-area:name;margin-top:1.5rem;font-size:var(--t-h3);line-height:1.2;letter-spacing:-.018em;font-weight:500;color:var(--text)}
.tl-card__text{grid-area:text;align-self:start;margin-top:.7rem;font-size:1rem;line-height:1.55;color:var(--tl-text);text-wrap:pretty}
.tl-card__cta{grid-area:cta;justify-self:start;margin-top:1.5rem;pointer-events:none}   /* .btn .btn--sm din fundație; ținta e tot cardul */
@keyframes tlLive{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.4)}}   /* 3,4 × 6 px = unda de 0,45rem a pulsului vechi */
.tl-wrap.is-away .tl-card__live i::after{animation-play-state:paused}   /* în afara ecranului unda stă (tools-home.js pune is-away) */
/* săgeata de lângă nume: doar la ≤ 760 px, unde ține locul pastilei „Open tool” (tot cardul rămâne legătura); .tl-nw ține ultimul cuvânt
   al numelui lipit de ea, ca săgeata să nu rămână singură pe un rând */
.tl-card__go{display:none;margin-left:.3em;color:var(--accent);transition:transform var(--d-med) var(--ease)}
.tl-card__go .ico{width:.85em;height:.85em;vertical-align:-.1em}
.tl-nw{white-space:nowrap}

/* ---------- stările: hover / focus de tastatură = marmura se aprinde (în shader: stratul 66 % → 58 %) + bordura albastră + butonul „Open tool”
   în starea lui de hover; apăsarea = o treaptă mai mult. Cardul nu se mișcă (desenul din canvas rămâne exact sub el). ---------- */
.tl-card:hover,.tl-card:focus-visible{border-color:var(--tl-bd-hover)}
.tl-card:hover::before,.tl-card:focus-visible::before{opacity:calc(1 - var(--tl-veil-hover))}
.tl-card:hover .tl-card__ico,.tl-card:focus-visible .tl-card__ico{background:var(--tl-tile-hover);border-color:var(--tl-bd-hover)}
.tl-card:hover .tl-card__cta,.tl-card:focus-visible .tl-card__cta{--btn-bd:var(--line-hover);--btn-bg:var(--fill-soft)}
.tl-card:hover .tl-card__cta .arr,.tl-card:focus-visible .tl-card__cta .arr{transform:translateX(.2em)}
.tl-card:hover .tl-card__go,.tl-card:focus-visible .tl-card__go,.tl-card:active .tl-card__go{transform:translateX(.2em)}
.tl-card:active{border-color:var(--tl-bd-press);transition-duration:.6s,.08s}
.tl-card:active::before{opacity:calc(1 - var(--tl-veil-press));transition-duration:.08s}
.tl-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-card)}

/* ---------- intrarea: cardurile apar pe rând (90 ms), conținutul urcă 14 px; marmura se aprinde în același ritm (tools-home.js).
   Starea ascunsă există doar cu JavaScript (.js pe <html>); reveal.js pune is-in pe .tl-wrap. ---------- */
.js .tl-wrap .tl-card{opacity:0}
.js .tl-wrap .tl-card>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
/* plăcuța iconiței și butonul își păstrează tranziția culorilor (regula de mai sus le-ar lăsa doar opacity și transform: plăcuța sărea instant) */
.js .tl-wrap .tl-card>.tl-card__ico,.js .tl-wrap .tl-card>.tl-card__cta{transition:opacity .6s var(--ease),transform .6s var(--ease),background-color var(--d-fast) var(--ease-std),border-color var(--d-fast) var(--ease-std)}
.js .tl-wrap.is-in .tl-card,.js .tl-wrap.is-in .tl-card>*{opacity:1;transform:none}
.tl-wrap.is-in .tl-item:nth-child(2) .tl-card{transition-delay:.09s,0s}.tl-wrap.is-in .tl-item:nth-child(2) .tl-card>*{transition-delay:.09s,.09s,0s,0s}
.tl-wrap.is-in .tl-item:nth-child(3) .tl-card{transition-delay:.18s,0s}.tl-wrap.is-in .tl-item:nth-child(3) .tl-card>*{transition-delay:.18s,.18s,0s,0s}
.tl-wrap.is-in .tl-item:nth-child(4) .tl-card{transition-delay:.27s,0s}.tl-wrap.is-in .tl-item:nth-child(4) .tl-card>*{transition-delay:.27s,.27s,0s,0s}
.tl-wrap.is-in .tl-item:nth-child(5) .tl-card{transition-delay:.36s,0s}.tl-wrap.is-in .tl-item:nth-child(5) .tl-card>*{transition-delay:.36s,.36s,0s,0s}
.tl-wrap.is-in .tl-item:nth-child(6) .tl-card{transition-delay:.45s,0s}.tl-wrap.is-in .tl-item:nth-child(6) .tl-card>*{transition-delay:.45s,.45s,0s,0s}

/* ---------- paletele celor șase carduri (marmura și rezerva): numai albastrul paletei E și amestecuri 1:1 între culorile ei (blocul de sus).
   c1 = fundul, c2 = corpul (culoarea care se vede cel mai mult), c3 = mijlocul, c4 = creasta. Reparațiile 1 (judecata 1): fundul nu mai e
   negru (ca la 05, unde fiecare pixel are culoare), fiecare card cu nuanța lui (ΔE ≥ 3 între oricare două, măsurat), fără --nile-strong
   (amestecat cu închisul dădea gri-turcoaz). Proporțiile și vârtejul sunt în tools-home.js ---------- */
.tl-card[data-tl="0"]{--tl-c1:var(--tl-navy);--tl-c2:var(--deep);--tl-c3:var(--accent-deep);--tl-c4:var(--tl-cobalt)}   /* Liquidation Map: bleumarin adânc, fire regale, creste cobalt */
.tl-card[data-tl="1"]{--tl-c1:var(--tl-royal);--tl-c2:var(--tl-cobalt);--tl-c3:var(--deep);--tl-c4:var(--tl-navy)}   /* Open Interest: benzi cobalt luminoase pe noapte regală */
.tl-card[data-tl="2"]{--tl-c1:var(--deep);--tl-c2:var(--accent-deep);--tl-c3:var(--tl-cobalt);--tl-c4:var(--tl-navy)}   /* Orderbook Delta: regal plin, valuri cobalt */
.tl-card[data-tl="3"]{--tl-c1:var(--deep);--tl-c2:var(--tl-royal);--tl-c3:var(--tl-navy);--tl-c4:var(--accent)}   /* Funding Rate: noapte regală, creste de cer (fără --bg) */
.tl-card[data-tl="4"]{--tl-c1:var(--tl-navy);--tl-c2:var(--deep);--tl-c3:var(--tl-azure);--tl-c4:var(--accent-deep)}   /* Long/Short Ratio: valuri bleumarin, creste azurii (fără --bg) */
.tl-card[data-tl="5"]{--tl-c1:var(--tl-royal);--tl-c2:var(--accent-deep);--tl-c3:var(--tl-navy);--tl-c4:var(--tl-cobalt)}   /* Live Order Book: regal adânc, gheață cobalt (fără --nile-strong) */

/* ---------- lățimi ---------- */
@media (max-width:1279px){.tl-sec{--tl-pad:1.75rem}}
@media (max-width:1023px){
  .tl-sec{--tl-gap:var(--s5);--tl-min-h:18rem}
  .tl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ≤ 760 px (telefon, tabletă îngustă): fără pastila „Open tool” (~54 px pe card); săgeata stă lângă nume, tot cardul e ținta (≥ 44 px) */
@media (max-width:760px){
  .tl-sec{--tl-min-h:0}
  .tl-card__cta{display:none}
  .tl-card__go{display:inline-block}
}
/* telefon: o coloană (TradingView, Paper, Vercel), cardul compact: iconița lângă nume, eticheta sub nume */
@media (max-width:639px){
  .tl-sec{--tl-gap:var(--s4);--tl-pad:1.25rem;--tl-min-h:0}
  .tl-grid{grid-template-columns:minmax(0,1fr)}
  .tl-card{grid-template-rows:auto auto auto;grid-template-areas:"ico name" "ico live" "text text";column-gap:.9rem}   /* fără rândul butonului (ascuns de la 760 px) */
  .tl-card__ico{width:2.75rem;height:2.75rem;border-radius:11px;font-size:1.25rem}
  .tl-card__name{align-self:end;margin-top:0;font-size:1.1875rem;line-height:1.2}
  .tl-card__live{justify-self:start;align-self:start;margin:.3rem 0 0}
  .tl-card__text{margin-top:1rem;font-size:.9375rem}
}