/* Brygada - shell (SPEC par. 3): #app, pasek demo, app bar, dolna nawigacja, FAB, #view i #overlay,
   desktop >= 900 px (ramka telefonu + panel demo z QR). Wlasciciel: Fundament. */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  @keyframes cm-page-in { from { opacity: 0; } to { opacity: 1; } }
  body { animation: cm-page-in .5s cubic-bezier(.16, 1, .3, 1) both; }
}

html, body { height: 100%; }
body { overflow: hidden; overscroll-behavior: none; }
.stage, .device { height: 100%; }

/* ===================== #app: telefon (cala szerokosc) ===================== */
#app {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh;
  overflow: hidden; background: var(--bg); color: var(--ink); isolation: isolate;
}
.device-status, .demo-panel { display: none; }

/* pasek demo: zawsze grafitowy (odrozniony od aplikacji) */
.demobar {
  --av-ring: var(--demobar-bg); position: relative; z-index: 11; display: flex; flex: none; align-items: center; gap: 6px;
  height: calc(var(--demobar-h) + var(--safe-t)); padding: var(--safe-t) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  background: var(--demobar-bg); color: #F2F0EB; user-select: none; -webkit-user-select: none;
}
.demobar .segmented { flex: none; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(255, 255, 255, .09); }
.demobar .seg { min-height: 26px; padding: 0 10px; border-radius: 7px; color: rgba(242, 240, 235, .72); font-size: 13px; }
.demobar .seg::after { content: ''; position: absolute; inset: -5px 0; }
.demobar .seg.is-active { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.demo-worker {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 138px; height: 28px;
  padding: 0 7px 0 3px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: #F2F0EB; font-size: 13px; font-weight: 600;
}
.demo-worker::after { content: ''; position: absolute; inset: -5px 0; }
.demo-worker:active { background: rgba(255, 255, 255, .18); }
.demo-worker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-worker .icon { opacity: .7; }
.demobar-help {
  position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px;
  margin-left: auto; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #FFC53D; font: 700 17px/1 var(--font-display);
}
.demobar-help::after { content: ''; position: absolute; inset: -8px; }
.demobar-help:active { background: rgba(255, 255, 255, .22); }

/* app bar */
.appbar {
  --av-ring: var(--bg); --badge-ring: var(--bg); position: relative; z-index: 10; display: flex; flex: none; align-items: center; gap: 2px;
  height: var(--appbar-h); padding: 0 max(4px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left));
  background: var(--bg); transition: box-shadow .2s;
}
#app.is-scrolled .appbar { box-shadow: 0 1px 0 var(--line), 0 8px 18px -16px rgba(0, 0, 0, .45); }
.appbar-lead { display: flex; flex: none; align-items: center; }
.appbar-brand { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; }
.appbar-back { color: var(--ink); }
.appbar-titles { flex: 1 1 auto; min-width: 0; padding: 0 4px; }
.appbar-title { overflow: hidden; font: 700 23px/1.1 var(--font-display); letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
.appbar-sub { margin-top: 1px; overflow: hidden; color: var(--muted); font-size: 12.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.appbar-actions { display: flex; flex: none; align-items: center; }
.appbar-bell.is-alert { color: var(--danger); }
.appbar-bell.is-alert .icon { transform-origin: 50% 12%; animation: bell-shake .9s ease-in-out .4s 1; }
@keyframes bell-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.appbar-avatar { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; }

/* jedyny przewijany obszar; bez position, zeby FAB pozycjonowal sie wzgledem #app */
#view {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch; outline: none;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
}
.view-root { min-height: 100%; }
.view-body {
  display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 720px; min-width: 0; margin: 0 auto;
  padding: 12px max(var(--gutter), env(safe-area-inset-right)) calc(32px + var(--fab-space, 0px)) max(var(--gutter), env(safe-area-inset-left));
}
.view-body > * + .section { margin-top: 6px; }
#app.has-fab { --fab-space: 76px; }
.view-boot { padding: 12px var(--gutter); }
.view-boot .skeleton.sk-card:first-child { height: 132px; }

@keyframes view-in-fwd { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes view-in-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes view-in-tab { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.enter-forward { animation: view-in-fwd .2s var(--ease) both; }
.enter-back { animation: view-in-back .2s var(--ease) both; }
.enter-tab { animation: view-in-tab .18s var(--ease) both; }

/* dolna nawigacja */
.tabbar {
  --badge-ring: var(--surface); position: relative; z-index: 10; display: flex; flex: none; align-items: stretch;
  height: calc(var(--nav-h) + var(--safe-b)); padding: 0 max(4px, env(safe-area-inset-right)) var(--safe-b) max(4px, env(safe-area-inset-left));
  background: var(--surface); box-shadow: 0 -1px 0 var(--line); user-select: none; -webkit-user-select: none;
}
#app.nav-hidden .tabbar { display: none; }
.tabbar-item {
  position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .01em; transition: color .15s;
}
.tabbar-icon {
  position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 32px;
  border-radius: 99px; transition: background-color .2s, color .2s;
}
.tabbar-item:active .tabbar-icon { background: var(--surface-2); }
.tabbar-item.is-active { color: var(--ink); font-weight: 700; }
.tabbar-item.is-active .tabbar-icon { background: var(--accent-soft); color: var(--accent-text); }
.tabbar-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar-icon .badge { position: absolute; top: -2px; left: calc(50% + 5px); box-shadow: 0 0 0 2px var(--badge-ring); }

/* FAB (renderowany w #view, pozycjonowany wzgledem #app) */
.fab-wrap { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--nav-h) + var(--safe-b) + 16px); z-index: 15; pointer-events: none; }
#app.nav-hidden .fab-wrap { bottom: calc(var(--safe-b) + 16px); }
.fab {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 56px; height: 56px; padding: 0 16px;
  border-radius: 18px; background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 700; pointer-events: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -10px rgba(120, 78, 0, .6), 0 3px 8px rgba(0, 0, 0, .14);
  transition: transform .15s, padding .25s var(--ease), gap .25s var(--ease);
}
.fab:active { transform: scale(.96); }
.fab-extended { padding: 0 20px 0 16px; }
.fab-label { max-width: 220px; overflow: hidden; white-space: nowrap; transition: max-width .25s var(--ease), opacity .2s; }
#app.fab-collapsed .fab-extended { gap: 0; padding: 0 16px; }
#app.fab-collapsed .fab-label { max-width: 0; opacity: 0; }

/* warstwa arkuszy, podgladu i toastow (wewnatrz #app) */
#overlay { position: absolute; inset: 0; z-index: 50; overflow: hidden; pointer-events: none; }
#overlay > * { pointer-events: auto; }
#overlay > .toast-stack { pointer-events: none; }
#app.nav-hidden .toast-stack.is-bottom { bottom: calc(var(--safe-b) + 16px); }

/* ===================== desktop: ramka telefonu + panel demo ===================== */
@media (min-width: 900px) {
  body { overflow: auto; }
  .stage {
    position: relative; display: grid; grid-template-columns: auto minmax(340px, 480px); align-items: center; justify-content: center;
    gap: clamp(36px, 5vw, 88px); height: auto; min-height: 100%; padding: 24px clamp(24px, 4vw, 64px);
  }
  .stage::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(44rem 36rem at 30% 50%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
      radial-gradient(40rem 30rem at 92% 6%, color-mix(in srgb, var(--info) 9%, transparent), transparent 70%),
      radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 10%, transparent) 1px, transparent 1.6px) 0 0 / 24px 24px,
      var(--bg);
  }
  .device {
    position: relative; height: auto; padding: 11px; border-radius: 57px;
    background: linear-gradient(150deg, #3A3D42 0%, #141518 34%, #0A0B0C 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 4px #0B0C0D,
      0 52px 90px -38px rgba(30, 22, 6, .55), 0 28px 54px -30px rgba(0, 0, 0, .55);
  }
  .device::before, .device::after { content: ''; position: absolute; width: 3px; background: #23262A; }
  .device::before { top: 148px; left: -3px; height: 58px; border-radius: 2px 0 0 2px; box-shadow: 0 76px 0 #23262A; }
  .device::after { top: 196px; right: -3px; height: 92px; border-radius: 0 2px 2px 0; }
  #app {
    --safe-t: 46px; --safe-b: 22px;
    width: clamp(392px, 30vw, 420px); height: min(880px, calc(100dvh - 72px)); min-height: 600px; border-radius: 46px;
  }
  #app::after {
    content: ''; position: absolute; bottom: 8px; left: 50%; z-index: 90; width: 128px; height: 5px; margin-left: -64px;
    border-radius: 99px; background: var(--ink); opacity: .82; pointer-events: none;
  }
  .demobar { display: none; }
  .device-status {
    position: relative; z-index: 12; display: flex; flex: none; align-items: center; justify-content: space-between;
    height: var(--safe-t); padding: 6px 30px 0 36px; background: var(--bg); color: var(--ink);
    font: 600 16px/1 var(--font-body); letter-spacing: .01em; user-select: none;
  }
  .device-island { position: absolute; top: 11px; left: 50%; width: 116px; height: 32px; margin-left: -58px; border-radius: 99px; background: #050506; }
  .device-icons { display: flex; align-items: center; gap: 6px; }
  .demo-panel { display: block; max-height: calc(100dvh - 48px); overflow-y: auto; scrollbar-width: thin; }
}

/* panel demo (renderuje js/ui/demo.js) */
.dp { display: flex; flex-direction: column; gap: 14px; padding: 6px 6px 6px 2px; }
.dp-brand { display: flex; align-items: center; gap: 16px; }
.dp-brand .brand-mark { filter: drop-shadow(0 12px 20px rgba(242, 159, 5, .35)); }
.dp-brand-text { min-width: 0; }
.dp-title { font: 700 48px/.95 var(--font-display); letter-spacing: .005em; }
.dp-sub { margin-top: 5px; color: var(--muted); font-size: 16px; font-weight: 500; }
.dp-brand .demo-tag { align-self: flex-start; margin-top: 8px; }
.dp-lead { max-width: 60ch; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.dp-card { min-width: 0; padding: 18px; border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--hairline), var(--shadow-1); }
.dp-h { margin-bottom: 12px; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dp-workers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 14px; }
.dp-worker {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 2px 8px; border-radius: var(--radius);
  color: var(--ink-2); font-size: 13px; font-weight: 600; transition: background-color .15s, opacity .15s;
}
.dp-worker > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-worker:hover { background: var(--surface-2); }
.dp-worker.is-selected { background: var(--accent-soft); color: var(--ink); }
.dp-worker.is-selected .avatar { --av-ring: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 4px var(--accent); }
.dp-workers.is-dim .dp-worker { opacity: .72; }
.dp-workers.is-dim .dp-worker:hover { opacity: 1; }
.dp-hint { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.dp-guide-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dp-count { color: var(--accent-text); font: 700 20px/1 var(--font-display); }
.dp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.dp-qr-card { display: flex; align-items: center; gap: 14px; }
.dp-qr {
  display: flex; flex: none; align-items: center; justify-content: center; width: 108px; height: 108px; padding: 8px;
  border-radius: 14px; background: #FFFFFF; color: #6B7078; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.dp-qr svg { display: block; width: 100%; height: 100%; }
.dp-qr-fallback { display: flex; }
.dp-qr-text { min-width: 0; }
.dp-qr-text .dp-h { margin-bottom: 6px; }
.dp-qr-text p { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.dp-cta { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.dp-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.dp-credit { padding: 4px 2px 0; text-align: left; }

/* szeroki desktop: panel w dwoch kolumnach (po regulach bazowych .dp) */
@media (min-width: 1240px) {
  .stage { grid-template-columns: auto minmax(560px, 760px); }
  .dp {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 16px;
    grid-template-areas: "brand brand" "lead lead" "role guide" "row guide" "credit credit";
  }
  .dp-brand { grid-area: brand; }
  .dp-lead { grid-area: lead; }
  #dp-role { grid-area: role; }
  #dp-guide { grid-area: guide; }
  .dp-row { grid-area: row; }
  .dp-credit { grid-area: credit; }
}