/* App shell: top bar + bottom tab bar on phones, side rail on wide screens */

.shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "top" "main" "tabs";
}

/* ---------- Top bar (phones & tablets) ---------- */
.topbar {
  grid-area: top;
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px var(--gutter);
  padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border-light);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
  font-family: var(--font-display); font-weight: 800; line-height: 1;
}
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.brand span { font-size: 1.05rem; white-space: nowrap; }
.brand b { display: block; color: var(--coral-ink); font-weight: 800; }

.meters { margin-left: auto; display: flex; gap: 6px; }
.meter {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 2px solid var(--border-light);
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; line-height: 1.2;
  color: inherit; text-decoration: none;
}
.meter:hover { border-color: var(--border); }

/* ---------- Main view ---------- */
.view {
  grid-area: main;
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--s-5) var(--gutter) calc(var(--tabbar-h) + var(--s-7));
  outline: none;
}
.view--wide { max-width: calc(var(--wide-max) + 2 * var(--gutter)); }

/* ---------- Bottom tab bar ---------- */
.tabbar {
  grid-area: tabs;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding: 6px 6px env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 2px solid var(--border-light);
}
.tab {
  display: grid; justify-items: center; align-content: center; gap: 2px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.72rem; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.tab svg { width: 26px; height: 26px; }
.tab[aria-current="page"] { color: var(--coral-ink); }
.tab[aria-current="page"] .tab__icon {
  background: color-mix(in oklab, var(--coral) 14%, transparent);
}
.tab__icon { display: grid; place-items: center; width: 52px; height: 32px; border-radius: var(--r-pill); transition: background var(--dur); }

/* ---------- Side rail (wide screens) ---------- */
.rail { display: none; }

@media (min-width: 960px) {
  .shell {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "rail top" "rail main";
  }
  .tabbar { display: none; }
  .topbar .brand { display: none; }
  .topbar { background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: var(--s-4); }
  .view { padding-bottom: var(--s-8); }

  .rail {
    grid-area: rail;
    position: sticky; top: 0; height: 100dvh;
    display: flex; flex-direction: column; gap: var(--s-2);
    padding: var(--s-5) var(--s-4);
    background: var(--surface);
    border-right: 2px solid var(--border-light);
    overflow-y: auto;
  }
  .rail .brand { padding: 0 var(--s-2) var(--s-5); }
  .rail .brand img { width: 44px; height: 44px; border-radius: 12px; }
  .rail .brand span { font-size: 1.2rem; }
  .rail__link {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px;
    border: 2px solid transparent;
    border-radius: var(--r-md);
    color: var(--text-2);
    text-decoration: none;
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  }
  .rail__link svg { width: 26px; height: 26px; flex: none; }
  .rail__link:hover { background: var(--surface-2); color: var(--text); }
  .rail__link[aria-current="page"] {
    color: var(--coral-ink);
    background: color-mix(in oklab, var(--coral) 10%, var(--surface));
    border-color: color-mix(in oklab, var(--coral) 35%, var(--surface));
  }
  .rail__spacer { flex: 1; }
  .rail__promo {
    display: grid; gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-size: var(--step--1);
    color: var(--text-2);
  }
  .rail__promo p { margin: 0; }
  .rail__promo .appstore { justify-self: start; }
}

/* Narrow phones: the logo icon alone, so the counters never squeeze the name */
@media (max-width: 440px) {
  .topbar .brand span { display: none; }
}