/*
 * tf-tb.css — statyczny wygląd osi ortofoto archiwalnej i nowej stopki (TB-7). Wpięty w <head> szablonu
 * (frontend.html.twig), więc działa od PIERWSZEJ klatki — przed jakimkolwiek JS. tf-tb.js dokłada tylko zachowanie.
 *
 * BRAMKA (G): reguły dotykające elementów Mapbendera działają tylko w aplikacjach, w których belka ma przełącznik
 * podkładów z zestawem „Archiv” (znacznik data-title jest w HTML z serwera, :has() widzi go przy pierwszym malowaniu).
 * tf-tb.js dokłada body.tftb-off, gdy nie może działać (brak źródła archiwalnego, kafle, brak mapy) → wraca stary BSS.
 *
 * KAFEL PODKŁADU = sam <li> przełącznika (bez podmiany elementu): widać tylko aktywny globus (zwykła ikona, nie _hover),
 * pozostałe przyciski BSS ukryte. Wymiary jak TB-5j: 52×52, ramka 1px #B9BABC (rdzeń basesourceswitcher.scss),
 * radius 3px (custom.css), tło przezroczyste, glif 40 px; otwarta lista = .tftb-open: #229cdf + biały globus.
 * PC (≥1200): ten sam <li> jako przycisk z podpisem (podpis i ▾ z ::after/::before wg aktywnego zestawu); min. 126 px
 * (najdłuższy podpis „Archiwalne”), więc pojawienie się podpisu po starcie Mapbendera nie przesuwa belki.
 * Do startu Mapbendera (data-state="active" ustawia widget BSS) kafel/przycisk ma samą ramkę — stanu początkowego nie zna CSS.
 */

/* ===== elementy Mapbendera (bramka G) ===== */
/* stary suwak DimensionsHandler (od TB-6 wyłączony w bazie; tu zapas) */
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar li.mb-element-dimensionshandler{display:none!important}
/* atrybucja: krótka (treść z bazy, Map.attribution), linki jak dotąd; przy otwartej osi schowana (A3) */
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .mb-map-attribution{white-space:nowrap}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .mb-map-attribution a{color:rgb(0,120,168)!important;text-decoration:none!important}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off).tftb-axon .mb-map-attribution{display:none!important}

/* przejściowo: stary tf-tb (≤ v0.6, z elementu HTMLElement w HTML sprzed TB-7) buduje własny kafel li.tftb-bm i chowa
   <li> przełącznika klasą tftb-hide — wtedy ten <li> zostaje schowany (jeden kafel, działający), nowy skrypt wychodzi */
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar li.mb-element-basesourceswitcher.tftb-hide.tftb-hide{display:none!important}
/* przycisk/kafel podkładu: wspólne */
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar li.mb-element-basesourceswitcher{cursor:pointer;box-shadow:none!important}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch{display:none!important}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-state="active"]{display:block!important;flex:none;padding:0!important;margin:0!important;border:0!important;background-color:transparent!important;pointer-events:none;transition:none!important}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title="Archiv"][data-state="active"]{background-image:url('/images/icons/glob-zegar.svg')!important}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title="Ortofoto"][data-state="active"],
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title="Ortofotomapa"][data-state="active"]{background-image:url('/images/icons/glob-pin.svg')!important}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title="Bez tła"][data-state="active"]{background-image:url('/images/icons/glob-przekreslenie.svg')!important}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title="OSM"][data-state="active"]{background-image:url('/images/icons/mapka.svg')!important}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar li.mb-element-basesourceswitcher:focus-visible{outline:2px solid #9cb5d3;outline-offset:1px}
@media (hover:hover){body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar li.mb-element-basesourceswitcher:not(.tftb-open):hover{background-color:#d6d6d4!important}}

/* ===== telefon i wąskie okno (≤1199 = próg screentype „mobile” Mapbendera): dolny pasek 3 · kafel · 3 ===== */
@media (max-width:1199px){
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.bottom .itemsCenter{display:flex!important;justify-content:space-around;align-items:center;position:relative}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.bottom .itemsCenter>li.mb-element-htmlelement{position:absolute!important;left:0;top:0;width:0!important;height:0!important;overflow:hidden;padding:0!important}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.bottom .itemsCenter>li.mb-element-activityindicator{position:absolute!important;left:2px;top:2px;transform:scale(.7);transform-origin:0 0;padding:0!important}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.bottom .itemsCenter>li.toolBarItem:not(.mb-element-basesourceswitcher):not(.mb-element-htmlelement):not(.mb-element-activityindicator){width:46px!important;height:46px!important;display:flex;align-items:center;justify-content:center;padding:0!important;margin:0!important;flex:0 0 46px}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.bottom li.toolBarItem .iconBig{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;background-size:contain!important}
/* kafel 52×52 w slocie 46 (ujemny margines po 3 px) → równe odstępy środków przy space-around */
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.bottom li.mb-element-basesourceswitcher{--tftb-bb-glif:40px;flex:0 0 52px!important;width:52px!important;height:52px!important;margin:0 -3px!important;padding:0!important;box-sizing:border-box!important;border:1px solid #B9BABC!important;border-radius:3px!important;background-color:transparent!important;display:flex!important;align-items:center;justify-content:center}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.bottom li.mb-element-basesourceswitcher > .basesourcesetswitch[data-state="active"]{width:var(--tftb-bb-glif)!important;height:var(--tftb-bb-glif)!important;min-width:var(--tftb-bb-glif)!important;background-size:var(--tftb-bb-glif) var(--tftb-bb-glif)!important}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.bottom li.mb-element-basesourceswitcher.tftb-open{background-color:#229cdf!important}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.bottom li.mb-element-basesourceswitcher.tftb-open > .basesourcesetswitch[data-state="active"]{filter:brightness(0) invert(1)}
/* atrybucja nad dolnym paskiem (pasek 62 px przy kaflu 52; tf-tb.js koryguje, gdy pasek ma inną wysokość) */
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .mb-map-attribution{bottom:68px!important}
}

/* ===== PC (≥1200): przycisk w górnej belce — globus 28 px · podpis · ▾ ===== */
@media (min-width:1200px){
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .mb-map-attribution{bottom:60px!important}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.top li.mb-element-basesourceswitcher{display:inline-flex!important;vertical-align:middle;min-width:126px;align-items:center;gap:6px;height:36px;box-sizing:border-box!important;padding:2px 8px 2px 4px!important;margin:0 1px!important;border:1px solid #d5dbe2!important;border-radius:7px!important;background-color:#fff!important;font-family:inherit;font-size:13px;line-height:1;color:#2b3440;white-space:nowrap}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.top li.mb-element-basesourceswitcher > .basesourcesetswitch[data-state="active"]{width:28px!important;height:28px!important;min-width:28px!important;background-size:28px 28px!important}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.top li.mb-element-basesourceswitcher::after{content:"";order:1}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.top li.mb-element-basesourceswitcher:has(> [data-state="active"])::before{content:"▾";order:2;font-size:10px;color:#6b7580}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.top li.mb-element-basesourceswitcher:has(> .basesourcesetswitch[data-title^="Archiv"][data-state="active"])::after{content:"Archiwalne"}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.top li.mb-element-basesourceswitcher:has(> .basesourcesetswitch[data-title^="Ortofoto"][data-state="active"])::after{content:"Ortofoto"}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.top li.mb-element-basesourceswitcher:has(> .basesourcesetswitch[data-title^="Bez t"][data-state="active"])::after{content:"Brak"}
body:has(.toolBar li.mb-element-basesourceswitcher > .basesourcesetswitch[data-title^="Archiv"]):not(.tftb-off) .toolBar.top li.mb-element-basesourceswitcher:has(> .basesourcesetswitch[data-title^="OSM"][data-state="active"])::after{content:"OSM"}
}

/* ===== własne elementy tf-tb (tworzy je JS; bez bramki) ===== */
/* zmienne tylko na własnych elementach (bez :root) — akcent osi #229cdf; ostrzeżenia/błędy: domyślne w var(), JS (colors) nadpisuje na <body> */
.tftb-ax,.tftb-fd,.tftb-bl,.tftb-tip,.tftb-ov{--tftb-acc:#229cdf;--tftb-acc45:rgba(34,156,223,.45);--tftb-acc12:rgba(34,156,223,.12);--tftb-blue:#229cdf}
/* elementy TFOkno wewnątrz osi (czekajka, suwak przenikania, menu Porównaj) w akcencie osi; okna TFOkno bez zmian */
.tftb-ax,.tftb-fd{--okno-akcent:var(--tftb-acc)}
.tftb-ax{position:fixed;z-index:var(--tftb-z,auto);box-sizing:border-box;display:none;align-items:flex-start;gap:12px;padding:26px 10px 4px 16px;background:rgba(255,255,255,.96);border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.18);font-family:inherit;font-size:12px;line-height:1.3;color:#2b3440;-webkit-user-select:none;user-select:none}
.tftb-ax.on{display:flex}
.tftb-w{position:relative;flex:1;min-width:0;height:38px;margin:0 6px;outline:none;touch-action:none;cursor:pointer}
.tftb-ax.dbg .tftb-w{height:52px}
.tftb-w:focus-visible{box-shadow:0 0 0 2px #9cc3f0;border-radius:4px}
.tftb-tr{position:absolute;left:0;right:0;top:12px;height:4px;background:#e3e6ea;border-radius:2px;overflow:hidden}
/* smuga: kolor i tempo wg poziomu (1 niebieski 1,1 s · 2 bursztyn 1,7 s · 3 pomarańcz 2,4 s); błąd i biel bez smugi */
.tftb-sm{position:absolute;top:0;height:4px;width:22%;left:100%;background:var(--tftb-acc);border-radius:2px;display:none}
.tftb-ax.l1 .tftb-sm,.tftb-ax.l2 .tftb-sm,.tftb-ax.l3 .tftb-sm{display:block;animation:tftbSm 1.1s linear infinite}
.tftb-ax.l2 .tftb-sm{background:var(--tftb-warn-bar,#e09c19);animation-duration:1.7s}
.tftb-ax.l3 .tftb-sm{background:var(--tftb-busy,#d0621c);animation-duration:2.4s}
@keyframes tftbSm{from{left:100%}to{left:-22%}}
.tftb-tk{position:absolute;top:7px;width:2px;height:14px;margin-left:-1px;background:var(--tftb-acc45);border-radius:1px}
.tftb-tk.bw{background:#8a8f94}
.tftb-ax.qs .tftb-tk{opacity:.4}
/* punkt „aktualna” na prawym końcu toru */
.tftb-now{position:absolute;top:9px;width:10px;height:10px;margin-left:-5px;box-sizing:border-box;border-radius:50%;background:var(--tftb-acc);border:2px solid #fff;box-shadow:0 0 0 1px var(--tftb-acc45);pointer-events:none}
.tftb-nowl{position:absolute;top:24px;transform:translateX(-100%);margin-left:5px;font-size:11px;color:var(--tftb-acc);pointer-events:none}
.tftb-yr{position:absolute;top:24px;transform:translateX(-50%);font-size:11px;color:#9aa3ad;pointer-events:none}
.tftb-h{position:absolute;top:4px;width:12px;height:20px;margin-left:-6px;box-sizing:border-box;background:var(--tftb-acc);border:2px solid #fff;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.35);display:none;pointer-events:none}
/* komunikat: sam tekst na tle paska, nad uchwytem, dobija do krawędzi osi */
.tftb-b{position:absolute;bottom:100%;margin-bottom:5px;left:0;white-space:nowrap;font-size:12px;line-height:16px;color:#234}
.tftb-b.wrap{white-space:normal;width:100%;text-align:center}
.tftb-ax.b2{padding-top:42px}
.tftb-b b{font-weight:500}.tftb-b .g{color:#8a95a3}
.tftb-b a{color:inherit;text-decoration:underline;cursor:pointer}
/* komunikat w toku: STAŁA czekajka (klasy TFOkno), zmienia się tylko tekst etykiety i liczby; obrót = animacja CSS
         (transition TFOkno nie startuje po odłączeniu / ukryciu elementu — „często się nie kręci”) */
.tftb-b .tf-okno-czekajka{display:inline-flex;align-items:center;gap:6px;padding:0;color:inherit;font-size:12px;line-height:16px}
.tftb-b .tf-okno-czekajka-krag{margin-top:0;transition:none;animation:tftbRot 1s linear infinite}
.tftb-ax.nookno .tftb-b .tf-okno-czekajka-krag{display:inline-block;width:14px;height:14px;box-sizing:border-box;border:2px solid #d5d5d9;border-top-color:var(--tftb-acc);border-radius:50%}
.tftb-n{display:inline-block;min-width:2.6ch;text-align:right;font-variant-numeric:tabular-nums}
@keyframes tftbRot{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.tftb-dbg{position:absolute;left:0;top:38px;white-space:nowrap;font:10px/14px ui-monospace,Menlo,Consolas,monospace;color:#8a95a3}
/* Porównaj: ikona 34×30 + podpis, środek na wysokości toru (track 14 px od góry osi) */
.tftb-cb{position:relative;flex:none;margin-top:-16px;padding:2px 4px 1px;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;border-radius:8px;font-family:inherit;font-size:11px;line-height:13px;color:#556}
.tftb-cb svg{display:block}
.tftb-cb:hover,.tftb-cb:focus-visible{background:rgba(0,0,0,.05);outline:none}
.tftb-cb.act{background:var(--tftb-acc12)}
.tftb-cb.dis{opacity:.4;cursor:default}.tftb-cb.dis:hover{background:none}
.tftb-cb.act rect,.tftb-cb.act path{stroke:var(--tftb-acc)}.tftb-cb.act line{stroke:var(--tftb-acc)}
/* TB-7: reguły na elementach z klasami TFOkno (.tf-okno, .tf-okno-dymek, .tf-okno-ico[data-ksztalt]) mają podwojoną klasę własną —
   tf-tb.css stoi w <head> PRZED arkuszem TFOkno (#tf-styl-okna, wstrzykiwany później), więc przy równej szczegółowości wygrywał
   TFOkno (np. .tf-okno{display:flex} → menu Porównaj nie znikało). Wartości bez zmian względem v0.6. */
/* menu porównania: karta i wiersze = TFOkno (.tf-okno + T.lista); układ jak .tfh-menu w tf-h (250 px, padding 6 px) */
.tftb-mn.tftb-mn{position:absolute;right:0;bottom:calc(100% + 8px);width:250px;max-width:calc(100vw - 16px);padding:6px;box-sizing:border-box;display:none;z-index:1}
.tftb-mn.tftb-mn.on{display:block}
/* telefon: jak menu NMT (tf-h: @media (max-width:767px) .tfh-menu{left:8px;right:8px;width:auto}) — oś ma już 8 px od krawędzi */
@media (max-width:767px){.tftb-mn.tftb-mn{left:0;right:0;width:auto;max-width:none}}
/* menu Porównaj = karta TFOkno + T.lista bez własnych poprawek (1:1 jak menu NMT .tfh-menu); tylko bieżący tryb podświetlony */
.tftb-mn.tftb-mn .tf-okno-lista-poz.cur{background:var(--tftb-acc12)}
/* zapas bez TFOkno (data.1map.pl nie odpowiada): zwykła biała lista */
.tftb-mn.tftb-mn.fb{background:#fff;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.tftb-mn.tftb-mn.fb [data-m]{display:flex;gap:7px;padding:6px;cursor:pointer;font-size:13px}
.tftb-mn.tftb-mn.fb [data-m] span{width:22px;height:22px;background:center/contain no-repeat}
/* porównanie: warstwy nakładek w viewporcie OL */
.tftb-ov{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:2}
.tftb-cl{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--tftb-acc);box-shadow:0 0 2px rgba(0,0,0,.4)}
.tftb-ch{position:absolute;top:50%;width:12px;height:46px;margin:-23px 0 0 -6px;box-sizing:border-box;background:var(--tftb-acc);border:2px solid #fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.4);pointer-events:auto;cursor:ew-resize;touch-action:none;outline:none}
.tftb-ch:focus-visible{box-shadow:0 0 0 3px #9cc3f0}
/* lupa: jeden kształt SVG 212×212, środek szkła w (85,85); chwytna całą powierzchnią */
.tftb-ln{position:absolute;left:0;top:0;width:212px;height:212px;pointer-events:none;outline:none;will-change:transform;touch-action:none}
.tftb-tip.tftb-tip{position:fixed;z-index:var(--tftb-z,auto);pointer-events:none;white-space:nowrap;transform:translateX(-50%)}
.tftb-tip.tftb-tip.fb{background:#333;color:#fff;padding:6px 10px;border-radius:8px;font-size:13px}
.tftb-ln svg{display:block;overflow:visible;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.tftb-ln .hit{pointer-events:all;cursor:move;touch-action:none}
.tftb-ln:focus-visible svg{filter:drop-shadow(0 0 3px var(--tftb-acc))}
/* przenikanie: smukły pasek w stylu panelu osi, 8 px nad nim, do prawej krawędzi osi; suwak = T.suwak (TFOkno) */
.tftb-fd{position:fixed;z-index:var(--tftb-z,auto);height:36px;box-sizing:border-box;display:none;align-items:center;gap:8px;padding:0 12px;background:rgba(255,255,255,.96);border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.18);font-family:inherit;font-size:12px;color:#4a5560;-webkit-user-select:none;user-select:none}
.tftb-fd.on{display:flex}
.tftb-fd.tftb-fd .tf-okno-ico{flex:0 0 22px;width:22px;height:22px;background:center/contain no-repeat;margin:0}
.tftb-fd .tftb-fs{flex:1;min-width:80px}
.tftb-fd .tf-okno-suwak{margin-top:0}
.tftb-fd input[type=range]{width:100%;margin:0}
.tftb-fd .tf-okno-suwak input[type=range]{pointer-events:auto;cursor:pointer;touch-action:none}
.tftb-fd span{white-space:nowrap}
/* lista podkładów (wyskakuje nad kaflem / pod przyciskiem) */
.tftb-ic{display:block;flex:none;background:center/contain no-repeat}
.tftb-bl{position:fixed;z-index:var(--tftb-z,auto);display:none;gap:8px;padding:8px;background:#fff;border:1px solid #c9d6e8;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.tftb-bl.on{display:flex}
.tftb-bt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px;border:0;border-radius:8px;cursor:pointer;font-family:inherit;font-size:12px;color:#2b3440;background:none}
.tftb-tile{display:flex;align-items:center;justify-content:center;width:64px;height:64px;box-sizing:border-box;background:#f4f6f8;border:2px solid transparent;border-radius:8px}
.tftb-tile .tftb-ic{width:40px;height:40px}
.tftb-bt:focus-visible .tftb-tile{border-color:#c9d6e8}.tftb-bt:focus-visible{outline:none}
@media (hover:hover){.tftb-bt:not(.cur):hover .tftb-tile{background:#d6d6d4}}
.tftb-bt.cur .tftb-tile{background:var(--tftb-blue);border-color:var(--tftb-blue)}
@media (max-width:768px){.tftb-tile{width:56px;height:56px}.tftb-ax{padding-left:12px;gap:8px}}