/* OSIRIS — prima pagină, secțiunea 7 „Bots” (#bots, pasul 4c): orașul 3D al zilelor boților (exemplul 08) în paleta E.
   Literele: doar tokenii (--font-sans pentru text; --font-mono = fontul „datelor” din type.css, pentru cifre și eticheta „Simulated”) și mărimile --t-*.
   După cercetare/sectiuni/boti/fisa.md: panoul ca la Stripe status (card închis, cifra de sus spusă cu fereastra ei), comutatorul ca la Bitget
   și `.seg` din fundație, fereastra zilei ca la GitHub / Stripe (întunecată, cifra întâi), randamentul cu scăderea maximă lângă el (Binance, Bitget),
   eticheta „Simulated” deasupra cifrelor. Componenta e skyline.js (clasele lui `sk__*`, păstrate); totul e scris SUB `.bt`, ca să nu atingă
   /bots.html și Cycle Score (acolo e skyline.css). Doar tokenii fundației: culori, fonturi (--font-sans / --font-mono), mărimi (--t-*).
   În canvas culorile vin din --sk-up / --sk-down / --sk-base / --sk-label (skyline.js le citește, paleta „e”). */

.bt{position:relative;padding:clamp(1rem,2.2vw,1.75rem);border-radius:var(--r-panel);border:1px solid var(--line);background:var(--card);
  box-shadow:0 1px 0 var(--fill-soft) inset,0 40px 90px -60px var(--black)}
.bt__sky{position:relative;container-type:inline-size}
/* înălțimea orașului înainte să existe canvasul, ca pagina să nu sară (verificat: lab/pas4c/raport.json „inaltimi”); cqi = lățimea gazdei .bt__sky (containerul).
   Lat (53 de săptămâni): orașul are ~0,634 din lățime + 14 px, cel mult 620 px și cel mult înălțimea ecranului − 260 px (maxH din bots-home.js);
   îngust (26 de săptămâni, gazda sub 600 px): 0,565 din lățime + 17 px. Restul cadrului: capul, titlul, subsolul (8,5rem), plus cifrele pe rânduri când e îngust. */
.bt__wait,.bt__fail,.bt .sk{--bt-plot-est:min(calc(63.4cqi + .9rem),38.75rem,max(18.75rem,100vh - 16.25rem));--bt-rest:8.5rem}
@container (max-width:639.98px){.bt__wait,.bt__fail,.bt .sk{--bt-rest:32rem}}
@container (max-width:599.98px){.bt__wait,.bt__fail,.bt .sk{--bt-plot-est:calc(56.5cqi + 1.1rem)}}
@container (max-width:279.98px){.bt__wait,.bt__fail,.bt .sk{--bt-rest:35.75rem}}
.bt__wait{--bt-h:calc(var(--bt-plot-est) + var(--bt-rest))}
.bt__wait{display:grid;place-items:center;min-height:var(--bt-h);margin:0;border-radius:14px;color:var(--muted);font-size:var(--t-small);
  background:radial-gradient(60% 50% at 50% 55%,var(--fill-soft),transparent)}
.js .bt__wait span{display:none}                        /* cu JavaScript: cadrul gol, fără text și fără legătură ascunsă de atins cu Tab */
.bt__fail{display:grid;justify-items:center;align-content:center;gap:.6rem;min-height:calc(var(--bt-plot-est) + var(--bt-rest));text-align:center;padding:1.5rem}
.bt__fail b{font-size:var(--t-body);font-weight:600}
.bt__fail p{max-width:28em;font-size:var(--t-small);line-height:1.5;color:var(--muted)}
.bt__fail .btn{margin-top:.4rem}
.bt__note{margin:1.1rem 0 0;max-width:62em;font-size:var(--t-micro);line-height:1.6;color:var(--muted)}
.bt__note a{color:var(--text);text-decoration:underline;text-underline-offset:3px;padding:.55em 0}
.bt__note a:hover{color:var(--accent)}
@media (pointer:coarse){.bt__note a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0}}      /* ținta de 44 px pe atingere */
@media (pointer:coarse){.bt .sk__msg .btn,.bt .bt__fail .btn{min-height:2.75rem}}                            /* „Try again” / „Open the bots page”: 44 px pe atingere (reparațiile 1) */

/* ---------- componenta: capul (boții | 2D/3D), titlul, cardul ---------- */
.bt .sk{--sk-up:var(--up);--sk-down:var(--down);--sk-base:var(--accent);--sk-label:var(--muted);--sk-accent:var(--accent);
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tabs seg" "title title" "card card";align-items:center;column-gap:1rem;
  color:var(--text);font-family:var(--font-sans);font-size:var(--t-body);line-height:1.5}
.bt .sk__head{display:contents}
.bt .sk__title{grid-area:title;margin:1.1rem 0 0;font-size:var(--t-small);font-weight:400;line-height:1.4;color:var(--muted);min-height:1.4em}
.bt .sk__title b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.bt .sk__ph{display:inline-block;width:14em;max-width:60%;height:.8em;border-radius:var(--r-pill);background:var(--fill);vertical-align:-.05em;animation:btPulse 1.6s ease-in-out infinite}

/* boții: pilula segmentată a fundației (.seg): fond --fill-soft, cel ales plin (--text pe --bg), ceilalți --muted */
.bt .sk__tabs{grid-area:tabs;justify-self:start;display:inline-flex;gap:.25rem;padding:.25rem;border-radius:var(--r-pill);background:var(--fill-soft);border:1px solid var(--line);max-width:100%}
.bt .sk__tab{min-height:2.5rem;padding:0 1.15rem;border-radius:var(--r-pill);font-size:var(--t-small);font-weight:600;line-height:1;letter-spacing:-.005em;color:var(--muted);white-space:nowrap;
  transition:background-color var(--d-fast) var(--ease-std),color var(--d-fast) var(--ease-std),transform var(--d-fast) var(--ease);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.bt .sk__tab:hover{color:var(--text)}
.bt .sk__tab[aria-selected="true"]{background:var(--text);color:var(--bg)}
.bt .sk__tab:active{transform:scale(.97);transition-duration:.08s}
.bt .sk__tab--ph{width:7.5rem;background:var(--fill);animation:btPulse 1.6s ease-in-out infinite;pointer-events:none}

/* 2D / 3D: aceeași pilulă, cu bara care alunecă (08: 500 ms, cubic-bezier(.65,0,.35,1)) */
.bt .sk__seg{grid-area:seg;justify-self:end;position:relative;display:inline-flex;padding:.25rem;border-radius:var(--r-pill);background:var(--fill-soft);border:1px solid var(--line)}
.bt .sk__thumb{position:absolute;top:.25rem;bottom:.25rem;left:.25rem;width:2.5rem;border-radius:var(--r-pill);background:var(--text);transition:transform .5s var(--ease-in-out)}
.bt .sk__seg[data-view="3d"] .sk__thumb{transform:translateX(100%)}
.bt .sk__seg button{position:relative;z-index:1;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--r-pill);color:var(--muted);transition:color .5s var(--ease-in-out);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.bt .sk__seg button:hover{color:var(--text)}
.bt .sk__seg button[aria-pressed="true"]{color:var(--bg)}
.bt .sk__seg button:disabled{cursor:default;opacity:.45}
.bt .sk.is-idle .sk__seg{visibility:hidden}                       /* fără date (încărcare, gol, eroare) nu are ce comuta */
.bt .sk__seg svg{width:1rem;height:1rem;max-width:none}
@media (pointer:coarse){
  .bt .sk__tab{min-height:2.75rem}
  .bt .sk__thumb{width:2.75rem}
  .bt .sk__seg button{width:2.75rem;height:2.75rem}
}

.bt .sk__card{grid-area:card;position:relative;display:flex;flex-direction:column;margin-top:.9rem}
.bt .sk__pad{position:relative}
.bt .sk__plot{position:relative;width:100%;height:var(--bt-plot,24rem);overflow:hidden;border-radius:14px;outline-offset:4px}
.bt .sk__plot.is-focus{outline:2px solid var(--accent)}
.bt .sk__plot canvas{position:absolute;top:0;left:0;display:block;max-width:none;outline:none;-webkit-tap-highlight-color:transparent}

/* ---------- fereastra zilei: întunecată (GitHub, Stripe), cifra întâi, o linie scurtă în culoarea zilei ---------- */
.bt .sk__tip{pointer-events:none;position:absolute;top:0;left:0;z-index:20;white-space:nowrap;padding:.55rem .75rem;border-radius:10px;background:var(--panel-top);border:1px solid var(--line-strong);
  box-shadow:0 14px 34px -14px var(--black);color:var(--text);font-size:var(--t-micro);line-height:1.35;opacity:0;transition:opacity .15s var(--ease-std)}
.bt .sk__tip strong{font-size:var(--t-small);font-weight:600}
.bt .sk__tip{font-variant-numeric:tabular-nums}
.bt .sk__tip .sk__tip-m{color:var(--muted)}
.bt .sk__tip .sk__tip-2{display:block;margin-top:.25rem;color:var(--muted)}
.bt .sk__key{display:inline-block;width:.75rem;height:2px;margin-right:.45rem;border-radius:2px;vertical-align:.3em;background:var(--muted)}
.bt .sk__key--up{background:var(--up)}
.bt .sk__key--down{background:var(--down)}
.bt .sk__key--zero{background:var(--accent)}
.bt .sk__tip::after{content:"";position:absolute;top:100%;left:var(--arrow,50%);width:.5rem;height:.5rem;margin:-.25rem 0 0 -.25rem;background:var(--panel-top);
  border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);transform:rotate(45deg)}
/* fără loc deasupra orașului (bloc înalt din primele rânduri): fereastra stă SUB bloc și săgeata arată în sus (skyline.js, opțiunea tipFlip; reparațiile 1) */
.bt .sk__tip.is-below::after{top:auto;bottom:100%;margin:0 0 -.25rem -.25rem;transform:rotate(225deg)}

/* ---------- cifrele: în colțurile orașului (lat) sau deasupra lui (îngust); pe rânduri care se rup singure, ca să nu depindă de lățimea fontului ---------- */
.bt .sk__ov{position:absolute;display:flex;flex-direction:column;gap:clamp(.9rem,1.6cqi,1.4rem);width:min(40%,23rem);pointer-events:none;opacity:0;
  transition-property:opacity,transform;transition-timing-function:var(--ease-in-out);container-type:inline-size}
.bt .sk__ov--tr{top:.35rem;right:0;align-items:flex-end;text-align:right}
.bt .sk__ov--bl{bottom:.35rem;left:0;align-items:flex-start;text-align:left}
.bt .sk:not(.is-wide) .sk__ov{display:none}
/* în colțuri: eticheta pe un rând, cifra + unitatea pe rândul următor (unitatea lipită de cifră), explicația dedesubt; rândul se rupe singur dacă fontul e mai lat */
.bt .sk__st--end,.bt .sk__st--start{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.45rem;min-width:0;max-width:100%}
.bt .sk__st--end{justify-content:flex-end;text-align:right}
.bt .sk__st--start{justify-content:flex-start;text-align:left}
.bt .sk__ov .sk__lab,.bt .sk__ov .sk__sub{flex:0 0 100%}
.bt .sk__st--end>div:not([class]){display:none}
.bt .sk__side{display:contents}
.bt .sk__lab{grid-area:lab;font-size:var(--t-small);line-height:1.3;color:var(--muted)}
.bt .sk__val{font-family:var(--font-mono);font-weight:700;letter-spacing:-.005em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums lining-nums;max-width:100%;overflow-wrap:anywhere;transition:color .3s var(--ease-std)}
.bt .sk__val.is-accent{color:var(--sk-accent)}
.bt .sk__unit{font-size:var(--t-small);line-height:1.3;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.bt .sk__unit:empty{display:none}
.bt .sk__sub{grid-area:sub;margin-top:.3rem;font-size:var(--t-micro);line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.bt .sk__ov .sk__val{margin-top:.35rem;font-size:min(var(--t-h2),17cqi)}
.bt .sk__ov .sk__st:not(:first-of-type) .sk__val,.bt .sk__ov--bl .sk__val{font-size:min(var(--t-h3),11cqi);margin-top:.25rem}
.bt .sk__tag{display:inline-flex;align-items:center;margin:0;padding:.3rem .7rem;border-radius:var(--r-pill);background:var(--accent-soft);border:1px solid var(--accent-ring);
  color:var(--accent);font-family:var(--font-sans);font-size:var(--t-micro);font-weight:600;line-height:1.25;letter-spacing:.01em;white-space:nowrap}   /* etichetă, nu dată: fără majuscule (type.css)*/

/* îngust (cifrele deasupra orașului): randamentul mare sus, apoi rânduri „etichetă | valoare” cu linie între ele (Binance, Bitget pe telefon) */
.bt .sk__rows{order:-1;display:grid;grid-template-rows:1fr;opacity:1;transition-property:grid-template-rows,opacity;transition-timing-function:var(--ease-in-out)}
.bt .sk__rows-in{min-height:0;overflow:hidden}
.bt .sk__stats{display:grid;grid-template-columns:minmax(0,1fr);padding:.15rem 0 1.1rem}
.bt .sk__stats .sk__tag{justify-self:start;margin-bottom:1rem}
.bt .sk__st--row{min-width:0}
.bt .sk__st--row .sk__line{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4rem;margin-top:.35rem}
.bt .sk__st--row:first-of-type{padding-bottom:1rem}
.bt .sk__st--row:first-of-type .sk__val{font-size:var(--t-h2)}
.bt .sk__st--row:not(:first-of-type){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lab line" "sub line";column-gap:1rem;align-items:center;padding:.75rem 0;border-top:1px solid var(--line)}
.bt .sk__st--row:not(:first-of-type) .sk__line{grid-area:line;margin:0;justify-content:flex-end;flex-wrap:nowrap}
.bt .sk__st--row:not(:first-of-type) .sk__val{font-size:var(--t-h3)}
.bt .sk__st--row:not(:first-of-type) .sk__sub{margin-top:.15rem}
.bt .sk__st--row:not(:first-of-type) .sk__lab{color:var(--text)}

/* ---------- subsolul: textul de ajutor + legenda (Loss … Profit) ---------- */
.bt .sk__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.25rem;padding-top:1rem;font-size:var(--t-micro);color:var(--muted)}
.bt .sk__hint{position:relative;display:grid;flex:1 1 15rem}
.bt .sk__hint span{grid-area:1 / 1;transition:opacity .5s var(--ease-std)}
.bt .sk__legend{display:flex;align-items:center;gap:.75rem;margin-left:auto}          /* pas de 24 px între pătrățele: zona de 24 px a fiecăruia nu o atinge pe a vecinului */
.bt .sk__legend.is-static{gap:.4rem}
.bt .sk__legend{flex-wrap:wrap;row-gap:.4rem;max-width:100%}                            /* nu iese niciodată din panou: la nevoie „Profit” trece pe rândul următor */
.bt .sk__legend>span{white-space:nowrap}
@container (max-width:599.98px){.bt .sk__legend{gap:.4rem}.bt button.sk__sw::after{inset:-.2rem}}   /* îngust (și cu mouse): pas de 18 px, zone fără suprapuneri */
.bt .sk__legend>span:first-child{margin-right:.2rem}
.bt .sk__legend>span:last-child{margin-left:.2rem}
.bt .sk__sw{position:relative;display:block;width:.75rem;height:.75rem;padding:0;border-radius:3px;box-shadow:inset 0 0 0 1px var(--line);transition:background-color .5s,transform .3s var(--ease)}
button.sk__sw{cursor:pointer}
.bt button.sk__sw::after{content:"";position:absolute;inset:-.375rem}
.bt button.sk__sw:hover,.bt button.sk__sw[aria-pressed="true"]{transform:scale(1.3)}
.bt button.sk__sw:focus-visible{outline-offset:2px;border-radius:3px}
.bt .sk.is-idle .sk__foot{visibility:hidden}

/* ---------- încărcare, gol, eroare (fără cifre) ---------- */
.bt .sk__skel{display:grid;align-content:center;height:var(--bt-plot-est);padding:0 0 0 2rem}
/* îngust, cât se încarcă (reparațiile 1): blocul cifrelor stă deja la locul lui, deasupra grilei-fantomă, cu linii-fantomă în loc de cifre
   (eticheta „Simulated”, randamentul mare, apoi 3 rânduri „etichetă | valoare”, exact așezarea finală), ca la sosirea datelor să nu se miște
   nimic în panou; pe lat cifrele stau în colțurile orașului, deci acolo nu e nevoie. Legenda își ține rândul (1,5em) și cât e goală. */
.bt .sk[aria-busy="true"]:not(.is-wide) .sk__rows{grid-template-rows:1fr!important;opacity:1!important}
.bt .sk[aria-busy="true"] .sk__st--row :is(.sk__lab,.sk__val,.sk__sub):empty::before{content:"";display:inline-block;width:var(--ph-w,6em);max-width:100%;height:.8em;border-radius:var(--r-pill);
  background:var(--fill);vertical-align:middle;animation:btPulse 1.6s ease-in-out infinite}
.bt .sk[aria-busy="true"] .sk__st--row .sk__lab:empty::before{--ph-w:5.5em}
.bt .sk[aria-busy="true"] .sk__st--row .sk__val:empty::before{--ph-w:3em}
.bt .sk[aria-busy="true"] .sk__st--row .sk__sub:empty::before{--ph-w:8em}
/* sub 252 px lățime de container (telefoane de 320): „paper account, now below its high” (rândul 2) se rupe pe două rânduri; fantoma ține și ea două */
@container (max-width:252px){.bt .sk[aria-busy="true"] .sk__st--row:nth-of-type(2) .sk__sub:empty{min-height:2.9em}
  .bt__wait,.bt__fail,.bt .sk{--bt-rest:36.85rem}}
.bt .sk__legend{min-height:1.5em}
.bt .sk__skel-grid{display:grid;grid-template-columns:repeat(53,minmax(0,1fr));grid-template-rows:repeat(7,auto);grid-auto-flow:column;gap:3px;aspect-ratio:53 / 7}
.bt .sk__skel-grid i{display:block;border-radius:2px;background:var(--fill);animation:btPulse 1.6s ease-in-out infinite;animation-delay:calc(var(--c) * 24ms)}
.bt .sk__msg{display:grid;justify-items:center;align-content:center;gap:.5rem;min-height:var(--bt-plot-est);padding:1.5rem 1rem;text-align:center}
.bt .sk__msg-ico{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-bottom:.4rem;border-radius:50%;background:var(--fill);color:var(--muted)}
.bt .sk__msg-ico svg{width:1.25rem;height:1.25rem;fill:currentColor}
.bt .sk__msg b{font-size:var(--t-body);font-weight:600}
.bt .sk__msg p{max-width:28em;font-size:var(--t-small);line-height:1.5;color:var(--muted)}
.bt .sk__msg-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:.6rem}
@keyframes btPulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ---------- telefon ---------- */
@media (max-width:640px){
  .bt .sk{grid-template-columns:minmax(0,1fr) auto;column-gap:.6rem}
  .bt .sk__tab{padding:0 .9rem;font-size:var(--t-small)}
  .bt .sk__foot{flex-direction:column;align-items:flex-start}
  .bt .sk__legend{margin-left:0}
  .bt .sk__hint{flex:none}
}
@media (max-width:359px){
  .bt .sk{grid-template-areas:"tabs tabs" "seg seg" "title title" "card card"}
  .bt .sk__seg{justify-self:start;margin-top:.6rem}
  .bt .sk__tab{padding:0 .8rem}
}