/* ==========================================================================
   X SHOP — App shell: sidebar (desktop), bottom nav (mobile), page frame
   ========================================================================== */

.shell {
  min-height: 100dvh;
}

.shell__main {
  width: 100%;
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding:
    calc(var(--safe-top) + var(--sp-2))
    calc(var(--gutter) + var(--safe-right))
    calc(var(--nav-h) + var(--safe-bottom) + var(--sp-8))
    calc(var(--gutter) + var(--safe-left));
}
.shell__main:focus { outline: none; }

.screen-enter {
  animation: screen-in var(--dur-3) var(--ease-out);
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* ---------- Brand ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(150deg, #3D86FF 0%, #2877FA 45%, #1A4FB0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 18px -6px rgba(40, 119, 250, 0.8);
  color: #fff;
}
.brand__mark svg { width: 18px; height: 18px; }
.brand__name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 17px;
  letter-spacing: 0.02em;
}

/* ---------- Top bar (мобильные) ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 56px;
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ---------- Bottom navigation ---------- */

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-nav);
  padding: 0 calc(var(--safe-right) + 6px) var(--safe-bottom) calc(var(--safe-left) + 6px);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
}
.bottom-nav__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: var(--content-max);
  height: var(--nav-h);
  margin: 0 auto;
}
.nav-item {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  color: var(--c-text-3);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  transition: color var(--dur-2);
}
.nav-item .i { transition: transform var(--dur-2) var(--ease-out); }
.nav-item:active .i { transform: scale(0.9); }
.nav-item[aria-current="page"] { color: var(--c-text); }
.nav-item[aria-current="page"] .i { color: var(--c-accent); }
.nav-item__badge {
  position: absolute;
  top: 7px;
  left: calc(50% + 6px);
}
.nav-item__badge:empty { display: none; }

/* ---------- Sidebar (desktop) ---------- */

.sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .bottom-nav { display: none; }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-nav);
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    padding: var(--sp-6) var(--sp-4);
    border-right: 1px solid var(--c-line);
    background: linear-gradient(180deg, rgba(21, 26, 36, 0.55), rgba(8, 10, 16, 0.2));
  }
  .sidebar .brand { padding: 0 var(--sp-2); }
  .sidebar__nav { display: grid; gap: 2px; }
  .side-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: 44px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--c-text-2);
    font-weight: var(--fw-medium);
    transition: background-color var(--dur-1), color var(--dur-1);
  }
  .side-item:hover { background: rgba(245, 247, 252, 0.04); color: var(--c-text); }
  .side-item[aria-current="page"] {
    background: var(--c-surface);
    color: var(--c-text);
    box-shadow: 0 0 0 1px var(--c-line) inset;
  }
  .side-item[aria-current="page"] .i { color: var(--c-accent); }
  .side-item__label { flex: 1; }
  .side-item .badge:empty { display: none; }

  .sidebar__foot { margin-top: auto; display: grid; gap: var(--sp-3); }
  .plan-card {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--c-surface);
    box-shadow: 0 0 0 1px var(--c-line) inset;
    font-size: var(--fs-sm);
    color: var(--c-text-2);
  }
  .plan-card strong { display: block; color: var(--c-text); font-weight: var(--fw-semibold); }

  .shell__main {
    max-width: none;
    margin: 0;
    padding: var(--sp-8) var(--gutter) var(--sp-12) calc(var(--sidebar-w) + var(--gutter));
  }
  .page { max-width: var(--content-max-wide); margin: 0 auto; }
  .topbar .brand { display: none; }
}

/* ---------- Placeholder screen (экраны следующих этапов) ---------- */

.page-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 56px;
  margin-bottom: var(--sp-4);
}
.page-head__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
}
.page-head__back { margin-left: -8px; }

.planned {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: 0 0 0 1px var(--c-line) inset;
}
.planned__stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--c-accent-soft);
  color: #8DB6FF;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.planned__title { margin-top: var(--sp-4); font-size: var(--fs-xl); }
.planned__text { margin-top: var(--sp-2); color: var(--c-text-2); max-width: 52ch; }
.planned__list { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.planned__list li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  color: var(--c-text);
}
.planned__list .i { color: var(--c-text-3); margin-top: 2px; }
.planned__subtitle {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-2);
  letter-spacing: 0;
}
.planned__api { margin-top: var(--sp-2); display: grid; gap: var(--sp-1); }
.planned__api code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  word-break: break-all;
}
.planned__cta { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Bare layout (покупатель / админ до своих этапов) */
.bare {
  min-height: 100dvh;
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: calc(var(--safe-top) + var(--sp-2)) var(--gutter) calc(var(--safe-bottom) + var(--sp-8));
}

/* Режим фокуса: мастер и формы — без нижней навигации, снизу панель действий */
.shell--focus .bottom-nav { display: none; }
.shell--focus .shell__main { padding-bottom: calc(96px + var(--safe-bottom)); }