/* Przestrzenie: segment Kokpit / Tablica / Materiały pod tytułem.
   Szeroki ekran: kapsuła tylko na szerokość napisów, wyśrodkowana.
   Telefon (≤ 760): pełne nazwy, mniejszy tekst, pasek może iść na całą szerokość.
   Chowa się przy zjeżdżaniu (klasa space-away). Zakładki sekcji i wybór na /spaces niżej.
   Neon zostaje na tle (body w css/base.css). */
@layer views {
  .app {
    --space-bar-h: 48px;
    --mast-nav-h: 0px;
    --shell-top: calc(var(--topbar-h) + var(--safe-t) + var(--space-bar-h));
  }
  .app.space-away,
  .app.is-hub { --space-bar-h: 0px; }

  .shell-head {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--paper) 74%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 65%, transparent);
  }
  .shell-head .masthead,
  .shell-head .topbar {
    position: static;
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Kapsuła na szerokość trzech napisów, wyśrodkowana. Telefon rozciąga ją niżej. */
  .space-bar {
    position: relative;
    height: var(--space-bar-h);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    pointer-events: none;
  }
  .space-bar[hidden] { display: none; }
  .space-bar-slot {
    pointer-events: auto;
    width: max-content;
    max-width: calc(100% - 24px);
    height: 44px;
    flex: none;
  }
  .space-bar-in {
    display: flex;
    align-items: stretch;
    width: max-content;
    max-width: 100%;
    height: 100%;
    padding: 4px;
    gap: 2px;
    border-radius: 18px;
    background: color-mix(in srgb, #ffffff 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 16%, white);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, white 90%, transparent),
      0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent),
      0 8px 22px color-mix(in srgb, #16161c 6%, transparent);
    transition: transform 180ms var(--ease-out);
  }
  :root[data-theme="dark"] .space-bar-in {
    background: color-mix(in srgb, #07070a 88%, transparent);
    border-color: color-mix(in srgb, white 18%, #1c1c22);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, white 10%, transparent),
      0 8px 22px rgba(0, 0, 0, .4);
  }
  .app.space-away .space-bar-in { transform: translateY(-120%); }
  .space-bar a {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 14px;
    color: var(--ink-2);
    font-weight: 650;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
  }
  .space-bar a span { white-space: nowrap; }
  .space-bar a.active {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 9%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent);
  }
  :root[data-theme="dark"] .space-bar a.active {
    color: var(--ink);
    background: color-mix(in srgb, white 16%, #121216);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, white 20%, transparent);
  }
  .space-bar a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  /* Zakładki sekcji: poziomy pasek pod nagłówkiem, styl z layout.css. */
  .mast-nav-row {
    height: var(--mast-nav-h);
    min-height: 0;
  }
  .tabbar[data-count="3"] ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .app.is-hub { --shell-bottom: 0px; --mast-nav-h: 0px; }
  .app.is-hub .tabbar,
  .app.is-hub .mast-nav-row,
  .app.is-hub .space-bar { display: none; }
  .app.is-hub #main { padding-bottom: 32px; }

  @media (max-width: 760px) {
    .app { --space-bar-h: 48px; }
    .app.space-away,
    .app.is-hub { --space-bar-h: 0px; }
    .mast-nav-row { display: none; }
    .space-bar-slot {
      width: calc(100% - 12px);
      max-width: none;
    }
    .space-bar-in { width: 100%; }
    .space-bar a {
      flex: 1 1 0;
      min-width: min-content;
      padding: 0 6px;
      font-size: clamp(11.5px, 3.3vw, 13.5px);
    }
  }

  @media (min-width: 761px) {
    .app {
      --mast-nav-h: 44px;
      --shell-top: calc(60px + var(--space-bar-h) + var(--mast-nav-h) + 1px);
      --mast-h: var(--shell-top);
    }
    .app.is-hub { --mast-nav-h: 0px; --space-bar-h: 0px; }
    .mast-nav-row {
      max-width: var(--content-w);
      margin: 0 auto;
      padding: 0 max(var(--gutter), var(--safe-r)) 0 max(var(--gutter), var(--safe-l));
    }
  }

  @media (hover: hover) {
    .space-bar a:hover { color: var(--ink); }
    .space-card:hover { transform: translateY(-3px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .app { transition: none; }
    .space-bar-in { transition: none; }
  }

  /* ---- wybór przestrzeni ---- */
  .spaces-page {
    min-height: calc(100dvh - var(--shell-top) - 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding-top: 12px;
  }
  .spaces-head { max-width: 38rem; }
  .spaces-head .page-title { font-size: clamp(34px, 5vw, 52px); }
  .space-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .space-card {
    --space-hue: var(--ah);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 240px;
    padding: 22px;
    text-align: left;
    color: var(--ink);
    border-radius: 24px;
    background: var(--widget-bg);
    border: 1px solid color-mix(in srgb, white 55%, var(--rule));
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, white 50%, transparent),
      0 18px 40px color-mix(in srgb, var(--ink) 8%, transparent);
    transition: transform var(--t-base) var(--ease-out), opacity var(--t-base);
  }
  .space-card[data-space="board"] { --space-hue: 168; }
  .space-card[data-space="materials"] { --space-hue: 292; }
  .space-card strong {
    font-family: var(--font-display);
    font-weight: var(--w-display);
    font-size: clamp(28px, 3vw, 36px);
    letter-spacing: var(--ls-display);
    line-height: 1.05;
  }
  .space-text { color: var(--ink-2); line-height: 1.4; }
  .space-go {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: 12px;
    color: hsl(var(--space-hue) 72% 40%);
    font-weight: 700;
  }
  :root[data-theme="dark"] .space-go { color: hsl(var(--space-hue) 75% 74%); }
  .space-ico {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    border-radius: 16px;
    color: hsl(var(--space-hue) 72% 38%);
    background: hsl(var(--space-hue) 75% 52% / .16);
    border: 1px solid hsl(var(--space-hue) 70% 50% / .28);
  }
  :root[data-theme="dark"] .space-ico { color: hsl(var(--space-hue) 75% 76%); }
  .space-grid.is-leaving .space-card { opacity: .38; transform: scale(.985); }
  .space-grid.is-leaving .space-card.is-chosen {
    opacity: 1;
    transform: rotate(6deg) scale(1.04);
    transition: transform 250ms cubic-bezier(.2, 1.6, .36, 1), opacity 200ms ease;
  }

  @media (max-width: 900px) {
    .space-grid { grid-template-columns: 1fr; }
    .spaces-page { justify-content: flex-start; padding-top: 8px; }
    .space-card { min-height: 0; }
  }

  /* ---- szkielet tablicy i materiałów ---- */
  .atelier-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--widget-gap);
  }
  .atelier-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 180px;
    padding: 18px;
    border-radius: 20px;
    background: var(--widget-bg);
    border: 1px solid color-mix(in srgb, white 48%, var(--rule));
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 45%, transparent);
  }
  .atelier-card h2 { font-size: var(--fs-h3); }
  .atelier-card p { color: var(--ink-2); }
  .atelier-card .space-ico { --space-hue: var(--ah); width: 40px; height: 40px; }
  .atelier-note { margin-top: 16px; }

  @media (max-width: 800px) {
    .atelier-grid { grid-template-columns: 1fr; }
  }
}