/* Przeglądarka kafelków Sinum (docs/layout/przegladarka) — strona narzędziowa:
   tło = tapeta panelu, jeden cienki pasek sterowania, reszta to kafelki. */
@font-face{font-family:Indivisible;src:url(zasoby/Indivisible-SemiBold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Indivisible;src:url(zasoby/Indivisible-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
:root{--ink:#fff;--muted:rgba(255,255,255,.62);--mist:#c8d6e6;--accent:#1192e8;--bar:rgba(3,18,33,.78);--line:rgba(255,255,255,.12);
  --pad:40px;--gap:28px;--barH:64px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#03101d;color:var(--ink);font:15px/1.4 Indivisible,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,select,input{font:inherit;color:inherit}
[hidden]{display:none !important}

/* tapeta jak na panelu (pod kafelkami, także pod szkłem) */
#wall{position:fixed;inset:0;background:#092944 center/cover no-repeat;z-index:0}
#wall::after{content:"";position:absolute;inset:0;background:rgba(0,8,18,.28)}

/* pasek sterowania — jeden rząd, nic więcej */
#bar{position:fixed;top:0;left:0;right:0;z-index:10;height:var(--barH);display:flex;align-items:center;gap:22px;padding:0 var(--pad);
  background:var(--bar);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
#bar .brand{font-weight:700;font-size:17px;letter-spacing:.01em;white-space:nowrap}
#bar .grow{flex:1}
.seg{display:inline-flex;padding:3px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.seg button{height:32px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.on{background:rgba(255,255,255,.14);color:var(--ink)}
.ctl{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:13.5px;white-space:nowrap}
.ctl select{height:34px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.07);color:var(--ink);cursor:pointer}
.ctl select option{color:#000}
.ctl input[type=range]{width:110px;accent-color:var(--accent)}
.btn{height:36px;padding:0 16px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.1);color:var(--ink);font-weight:700;font-size:14px;cursor:pointer}
.btn:hover{background:rgba(255,255,255,.17)}
.btn.primary{background:var(--accent);border-color:transparent}
.btn.primary:hover{filter:brightness(1.1)}
kbd{font:inherit;color:var(--muted)}

main{position:relative;z-index:1;padding:calc(var(--barH) + var(--gap)) var(--pad) 120px}

/* --- tryb: wszystkie kafelki --- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--gap)}
.chip{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer}
.chip.on{background:rgba(255,255,255,.16);color:var(--ink);border-color:transparent}
.chip.all{margin-left:14px;color:var(--ink);background:rgba(17,146,232,.35)}
.bysize{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:flex-start}
.bysize .cell .cap{max-width:221px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group{margin:0 0 56px}
.group h2{margin:0 0 18px;font-size:14px;font-weight:600;color:var(--muted)}
.row{display:flex;align-items:flex-start;gap:var(--gap);padding:18px 0;border-top:1px solid rgba(255,255,255,.07)}
.row .lbl{flex:0 0 190px;padding-top:4px}
.row .lbl b{display:block;font-size:16px}
.row .lbl span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.row .lbl small{display:block;color:var(--muted);font-size:12px;margin-top:10px;line-height:1.5}
.cells{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--gap)}
.cell{display:flex;flex-direction:column;gap:8px}
.cell .cap{color:var(--muted);font-size:12px}
.sheet .tile{position:relative;flex:none}
.tile.togg{cursor:pointer}
.tile .ovl{position:absolute;border-radius:14px;overflow:hidden;will-change:clip-path}
.scaled{transform-origin:0 0}

/* --- tryb: kokpit --- */
#m-kokpit{display:flex;flex-direction:column;align-items:center;gap:var(--gap)}
.ctlrow{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.device{position:relative;flex:none;border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);background:#092944 center/cover no-repeat}
.device .rail{position:absolute;left:0;top:0;bottom:0;background:rgba(6,25,44,.84);border-right:1px solid rgba(10,74,118,.9);display:flex;flex-direction:column;align-items:center;padding-top:18px;gap:18px}
.device .rail i{display:block;width:40px;height:40px;background:#fff;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;opacity:.9}
.device .rail i.logo{width:56px;height:56px;border-radius:14px;background:var(--accent) var(--m) center/contain no-repeat;-webkit-mask:none;mask:none;opacity:1}
.device .rail i.cur{opacity:1}
.device .head{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;font-weight:700}
.device .head .ttl{font-size:40px;letter-spacing:-.01em}
.device .head .clk{font-size:40px}
.device .tile{position:absolute}
.hint{color:var(--muted);font-size:13.5px;text-align:center}

/* --- tryb: jeden kafelek --- */
#m-jeden{display:grid;grid-template-columns:260px 1fr;gap:var(--gap);align-items:start}
.list{position:sticky;top:calc(var(--barH) + var(--gap));max-height:calc(100vh - var(--barH) - 2*var(--gap));overflow:auto;padding-right:6px;scrollbar-width:thin}
.list h3{margin:18px 0 8px;font-size:12.5px;font-weight:600;color:var(--muted)}
.list h3:first-child{margin-top:0}
.list button{display:block;width:100%;text-align:left;height:34px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--mist);cursor:pointer;font-size:14px}
.list button:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.list button.on{background:rgba(255,255,255,.16);color:var(--ink);font-weight:700}
.single{display:flex;flex-direction:column;gap:var(--gap)}
.single .ctls{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center}
.single .ctls input[type=text]{height:34px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.07);color:var(--ink);min-width:260px}
.single .preview{position:relative;display:inline-block;padding:24px;border-radius:26px;background:rgba(0,0,0,.18)}
.single .preview .tile{position:relative}
.guides{position:absolute;inset:0;pointer-events:none}
.guides div{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(255,0,200,.75)}
.guides div.base{border-top-color:rgba(0,220,255,.75)}
.guides div span{position:absolute;right:4px;top:-14px;font-size:10px;color:rgba(255,255,255,.75);font-family:ui-monospace,monospace}
.single .family{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:flex-end}

/* elementy kafelków — 1:1 z app/web/www/app.css (tiles.js tego wymaga) */
.tile{border-radius:14px;overflow:hidden;user-select:none;contain:layout paint;font-family:Indivisible,system-ui,sans-serif}
.tile>*{position:absolute}
.tx{display:block;overflow:hidden;white-space:nowrap}
.tx.ml{white-space:normal;overflow-wrap:anywhere}
.im{background-repeat:no-repeat;background-position:center;background-size:contain}
.msk{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.bg{border-radius:14px;overflow:hidden}
.bg.glass{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
/* białe szkło aktywnego kafelka: tapeta widoczna (rozmycie 8), rozjaśniona i nasycona pod bielą — jak HomeView */
.bg.glass-white{backdrop-filter:blur(22px) brightness(1.7) saturate(1.5);-webkit-backdrop-filter:blur(22px) brightness(1.7) saturate(1.5)}
.bg .hl{position:absolute;height:1px;left:14px;right:14px}
@keyframes spin{to{transform:rotate(360deg)}}
.tile .tload{animation:spin 1.6s linear infinite;opacity:.9}
.tile .bg.talarm{animation:talarm 1.2s ease-in-out infinite}
/* stan wcisniecia przycisku (buttons.md) i ograniczony ruch (accessibility.md) */
.tile .pbtn{transition:background .12s}
.tile .pbtn:active{background:rgba(255,255,255,.28)!important}
@media (prefers-reduced-motion:reduce){.tile .tload,.tile .bg.talarm{animation:none}.tile .ovl{transition:none}}
@keyframes talarm{0%,100%{border-color:rgba(240,70,74,.235)}50%{border-color:rgb(240,70,74)}}

#loader{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;color:var(--muted);background:#03101d}
#loader.off{display:none}