/* App shell (app bar, sticky tabs, sections sheet, bottom navigation, home) and mobile tweaks on top of guide.css. */
:root{
  --bar:52px;
  --hh:calc(var(--bar) + env(safe-area-inset-top));   /* guide.css uses --hh for sticky offsets */
  --tabs:48px;
  --bn:calc(60px + env(safe-area-inset-bottom));
}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + var(--tabs) + 8px)}
body{-webkit-tap-highlight-color:transparent;padding-bottom:var(--bn)}
.wrap{padding-top:0;padding-inline:max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right))}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
code{font-family:var(--f-mono);font-size:.92em;background:var(--panel2);padding:1px 5px;border-radius:4px}

/* ---------- App bar ---------- */
.appbar{position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top);background:rgba(10,13,18,.96);
  border-bottom:1px solid var(--line-gold);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.appbar .in{max-width:1120px;margin:0 auto;height:var(--bar);padding:0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));display:flex;align-items:center;gap:12px}
.appbar a.logo{display:flex;align-items:center;gap:10px;min-width:0;color:var(--gold);text-decoration:none;font:700 18px/1.1 var(--f-display);letter-spacing:.04em}
.appbar a.logo svg{width:28px;height:28px;flex:0 0 auto}
.appbar a.logo span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar a.logo small{display:block;font:600 10px/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dim);overflow:hidden;text-overflow:ellipsis}
.classnav{display:none;margin-left:auto;gap:2px}
.classnav a{position:relative;color:var(--fg);text-decoration:none;font:500 14px var(--f-body);padding:8px 10px;border-radius:6px}
.classnav a:hover{color:var(--gold-hi);background:rgba(255,255,255,.03)}
.classnav a[aria-current]{color:var(--gold)}
.classnav a[aria-current]::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:2px;background:var(--gold)}
.hbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;margin-left:auto;background:transparent;color:var(--gold);
  border:1px solid var(--gold-dim);border-radius:999px;font:600 13px var(--f-body);cursor:pointer;flex:0 0 auto}
.hbtn svg{width:16px;height:16px}
.hbtn[hidden]{display:none}
.offline-badge{display:none;margin-left:auto;font:600 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:#1a1408;background:var(--orange);border-radius:999px;padding:3px 9px;flex:0 0 auto}
.offline .offline-badge{display:inline-block}
.offline .offline-badge + .hbtn{margin-left:0}

/* ---------- Bottom navigation (phones) ---------- */
.bottomnav{position:fixed;z-index:30;left:0;right:0;bottom:0;height:var(--bn);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display:grid;grid-template-columns:repeat(5,1fr);background:rgba(10,13,18,.97);border-top:1px solid var(--line-gold);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bottomnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;color:var(--muted);text-decoration:none;font:600 10.5px var(--f-body);letter-spacing:.02em}
.bottomnav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.bottomnav img,.bottomnav svg{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:1.5px solid transparent;opacity:.75}
.bottomnav svg{border-radius:0;padding:3px;opacity:1}
.bottomnav a[aria-current]{color:var(--gold)}
.bottomnav a[aria-current] img{border-color:var(--gold);opacity:1}

/* ---------- Guide header: compact on phones ---------- */
header.top.hero{padding:18px 0 16px;gap:4px}
header.top.hero::before{top:0}
.intro{margin-top:6px}
.intro summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;color:var(--gold);font:600 13px var(--f-body);padding:6px 0}
.intro summary::-webkit-details-marker{display:none}
.intro summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.intro[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.intro .lead{margin-top:2px}

/* ---------- Sticky tab bar + sections button ---------- */
.tabsbar{position:sticky;top:var(--hh);z-index:20;display:flex;align-items:stretch;margin-inline:-16px;background:rgba(10,13,18,.96);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.tabsbar nav.tabs{position:static;flex:1;min-width:0;margin:0;padding-inline:12px 24px;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 28px),transparent)}
nav.tabs button{min-height:var(--tabs);padding:12px 12px 10px}
.secbtn{flex:0 0 auto;width:48px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-left:1px solid var(--line);color:var(--gold);cursor:pointer}
.secbtn svg{width:22px;height:22px}
/* compact level control, hangs under the tab bar (absolute, so showing it doesn't shift the content) */
.lvlbar{position:absolute;top:100%;left:0;right:0;display:flex;align-items:center;gap:10px;padding:6px 16px;
  background:linear-gradient(120deg,rgba(212,171,95,.14),rgba(18,24,33,.97) 45%),rgba(14,18,25,.97);border-bottom:1px solid rgba(212,171,95,.45);
  box-shadow:0 8px 18px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lvlbar[hidden]{display:none}
.lvlbar:not([hidden]){animation:lvlbar-in .18s ease-out}
@keyframes lvlbar-in{from{opacity:0;transform:translateY(-6px)}}
.lvlbar label{font:600 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dim)}
.lvlbar .stepbtn{width:36px;height:36px;flex:0 0 auto}
.lvlbar .lvlnum{font-size:22px;min-width:2ch}
.lvlbar input[type=range]{flex:1 1 auto;min-width:60px}
section.tab.with-lvlbar{padding-top:calc(22px + 49px)}
section.tab{min-height:calc(100vh - var(--hh) - var(--tabs) - var(--bn))}
section.tab [id]{scroll-margin-top:calc(var(--hh) + var(--tabs) + 8px)}

/* previous / next section */
.panelnav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;padding-top:18px;border-top:1px solid var(--line)}
.panelnav a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  color:var(--fg);text-decoration:none;font:600 14px/1.3 var(--f-body);min-width:0}
.panelnav a small{font:600 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dim)}
.panelnav a.next{grid-column:2;text-align:right}
.panelnav a:active{background:var(--panel2)}

/* ---------- Sections sheet ---------- */
dialog.sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:560px;max-height:min(80vh,640px);padding:0 0 env(safe-area-inset-bottom);
  background:var(--panel);color:var(--fg);border:1px solid var(--line-gold);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -20px 50px rgba(0,0,0,.5);overflow:auto}
dialog.sheet[open]{animation:sheet-in .22s ease-out}
dialog.sheet::backdrop{background:rgba(5,7,10,.65);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@keyframes sheet-in{from{transform:translateY(40px);opacity:.4}}
.sheet-hd{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 10px;background:var(--panel)}
.sheet-hd h2{font-size:18px;color:var(--gold);margin:0}
.sheet ol{list-style:none;margin:0;padding:0 8px 12px}
.sheet a{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:10px;color:var(--fg);text-decoration:none;font:500 16px var(--f-body)}
.sheet a:active,.sheet a:hover{background:var(--panel2)}
.sheet a[aria-current="true"]{color:var(--gold);background:rgba(212,171,95,.08)}
.sheet .num{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line);font:600 12px var(--f-mono);color:var(--muted);flex:0 0 auto}
.sheet a[aria-current="true"] .num{border-color:var(--gold);color:var(--gold)}
button.close{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--fg);font:400 22px/1 var(--f-body);cursor:pointer;flex:0 0 auto}

/* ---------- Toast ---------- */
.toast{position:fixed;z-index:40;left:12px;right:12px;bottom:calc(var(--bn) + 12px);max-width:520px;margin:0 auto;display:flex;align-items:center;gap:10px;
  padding:10px 10px 10px 16px;background:#1d2531;border:1px solid var(--line-gold);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.5);font-size:14px}
.toast[hidden]{display:none}
.toast .msg{flex:1}
.toast .btn{flex:0 0 auto}

/* ---------- Bigger touch targets for the guide controls ---------- */
.chip{padding:8px 14px}
.stepbtn{width:44px;height:44px}
.btn{min-height:40px;padding:8px 14px}
.tablewrap{-webkit-overflow-scrolling:touch;background:
  linear-gradient(90deg,var(--bg) 30%,transparent) left/24px 100% no-repeat local,
  linear-gradient(270deg,var(--bg) 30%,transparent) right/24px 100% no-repeat local,
  linear-gradient(90deg,rgba(0,0,0,.5),transparent) left/12px 100% no-repeat scroll,
  linear-gradient(270deg,rgba(0,0,0,.5),transparent) right/12px 100% no-repeat scroll}
img{max-width:100%}

/* ---------- Home ---------- */
header.top.home-hd{padding:26px 0 18px;border-bottom:0}
header.top.home-hd h1{font-size:clamp(28px,7vw,42px);background:linear-gradient(180deg,#f6dd9f,#c99a4b);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.continue{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:10px 14px 10px 10px;border:1px solid rgba(212,171,95,.45);border-radius:14px;
  background:linear-gradient(120deg,rgba(212,171,95,.12),var(--panel) 55%);color:var(--fg);text-decoration:none}
.continue[hidden]{display:none}
.continue img{width:44px;height:44px;border-radius:10px;object-fit:cover;object-position:50% 15%}
.continue span{flex:1;display:flex;flex-direction:column}
.continue small{font:600 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dim)}
.continue b{font:700 18px var(--f-display);color:var(--gold)}
.continue svg{width:22px;height:22px;color:var(--gold)}
.classes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.classcard{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--fg);text-decoration:none;isolation:isolate}
.classcard img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 12%;display:block}
@media (min-width:900px){.classcard img{aspect-ratio:4/5}}
.classcard .txt{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;margin-top:-56px;background:linear-gradient(0deg,var(--panel) 60%,transparent)}
.classcard b{font:700 19px var(--f-display);color:var(--gold);letter-spacing:.03em;padding-top:20px}
.classcard .small{line-height:1.35}
.classcard .upd{color:var(--faint)}
.classcard:hover,.classcard:focus-visible{border-color:var(--gold-dim)}
.classcard:active{transform:scale(.985)}
.install-card,.ios-card{margin-top:16px}
.ios-card .ico{width:16px;height:16px;vertical-align:-3px;color:var(--gold)}

footer.foot{margin-top:40px;padding-bottom:16px;line-height:1.6}

/* ---------- Installed app: no browser chrome, so leave the status bar area alone ---------- */
.standalone body{overscroll-behavior-y:none}

/* ---------- Larger screens ---------- */
@media (min-width:900px){
  :root{--bn:0px}
  .bottomnav{display:none}
  .classnav{display:flex}
  .classnav ~ .offline-badge,.classnav ~ .hbtn{margin-left:0}
  header.top.hero{padding:30px 0 30px}
  header.top.hero::before{top:0}
  .tabsbar{margin-inline:0}
  .lvlbar{padding-inline:0;border-radius:0 0 12px 12px}
  .lvlbar label{padding-left:12px}
  .lvlbar input[type=range]{max-width:420px;margin-right:12px}
  .tabsbar nav.tabs{padding-inline:0 24px}
  .classes{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .toast{bottom:20px}
  dialog.sheet{inset:0;margin:auto;border-radius:18px;border-bottom:1px solid var(--line-gold);max-height:80vh}
}
@media (max-width:700px){
  header.top.hero h1{font-size:min(24px,6.4vw)}
  header.top.klasa.hero .portret{width:120px;right:-8px;opacity:.35}
  .eyebrow{font-size:11px;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){
  dialog.sheet[open]{animation:none}
  .intro summary::after{transition:none}
}