/* Three layouts chosen by width, never by device (PLAN section 6):
   < 600px bottom tab bar · 600-1023px icon rail · >= 1024px labelled sidebar. */

.shell { min-height: 100dvh; }

.view {
  min-height: 100dvh;
  padding: calc(var(--space-4) + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right))
           calc(var(--tabbar-h) + var(--space-6) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  outline: none;
}

/* ---------- navigation: phone tab bar ---------- */
.nav {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: rgb(41 27 65 / 0.86);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-top: 0.5px solid var(--pv-card-stroke);
}
.nav__brand { display: none; color: var(--pv-text); text-decoration: none; }
.nav__list { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: var(--tabbar-h); margin: 0; padding: 0; list-style: none; }
.nav__link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--hit); height: 100%;
  color: var(--pv-secondary-text); text-decoration: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  transition: color var(--fast) var(--ease);
}
.nav__link svg { width: 24px; height: 24px; }
.nav__link[aria-current="page"] { color: var(--pv-solar-gold); }
@media (hover: hover) { .nav__link:hover { color: var(--pv-text); } }
.nav__account { display: none; }
.nav__short + .nav__full { display: none; }
@media (min-width: 1024px) { .nav__short { display: none; } .nav__short + .nav__full { display: inline; } }
@media (min-width: 600px) and (max-width: 1023px) { .nav__label { font-size: 0.72rem; } }

/* ---------- tablet: icon rail ---------- */
@media (min-width: 600px) {
  .shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .nav {
    position: sticky; inset: 0 auto auto 0; top: 0; height: 100dvh; width: var(--rail-w);
    padding: calc(var(--space-4) + env(safe-area-inset-top)) 0 var(--space-4) env(safe-area-inset-left);
    border-top: 0; border-right: 0.5px solid var(--pv-card-stroke);
    display: flex; flex-direction: column;
  }
  .nav__list { grid-auto-flow: row; grid-auto-rows: 72px; height: auto; }
  .nav__brand { display: grid; place-items: center; margin-bottom: var(--space-5); }
  .nav__brand img { width: 40px; height: 40px; border-radius: 10px; }
  .nav__brand-text { display: none; }
  .nav__account { display: block; margin-top: auto; }
  .nav__list--main .nav__link[data-tab="account"] { display: none; }
  .view { padding: calc(var(--space-5) + env(safe-area-inset-top)) var(--space-5) var(--space-6); }
}

/* ---------- desktop: labelled sidebar ---------- */
@media (min-width: 1024px) {
  .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .nav { width: var(--sidebar-w); padding-inline: var(--space-4); }
  .nav__brand { display: flex; align-items: center; gap: var(--space-3); place-items: initial; padding: 0 var(--space-2); }
  .nav__brand-text { display: block; font-size: var(--step-1); font-weight: 700; letter-spacing: 0.02em; }
  .nav__list { grid-auto-rows: auto; gap: var(--space-1); }
  .nav__link {
    flex-direction: row; justify-content: flex-start; gap: var(--space-3);
    padding: 0 var(--space-3); border-radius: var(--radius-small); font-size: var(--step-0);
  }
  .nav__link[aria-current="page"] { background: rgb(245 166 35 / 0.12); }
  @media (hover: hover) { .nav__link:hover { background: var(--pv-card-bg); } }
  .view { padding: calc(var(--space-6) + env(safe-area-inset-top)) var(--space-6) var(--space-7); }
}

/* ---------- page scaffolds views use ---------- */
.page { max-width: 1240px; margin-inline: auto; animation: page-in var(--slow) var(--ease) both; }
.page--reading { max-width: var(--reading); }
.page__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.page__header h1 { margin: 0; }

.stack { display: grid; gap: var(--space-4); align-content: start; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Two panes from tablet width up; one column on phones. */
.split { display: grid; gap: var(--space-4); }
@media (min-width: 600px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); } }
@media (min-width: 1024px) { .split--wide-left { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }

/* List + detail (calculators, guide). */
.master-detail { display: grid; gap: var(--space-5); }
@media (min-width: 600px) { .master-detail { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: start; } }
@media (min-width: 600px) { .master-detail__list { position: sticky; top: var(--space-5); max-height: calc(100dvh - 2 * var(--space-5)); overflow: auto; } }

@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal > * { animation: rise var(--slow) var(--ease) both; }
.reveal > *:nth-child(2) { animation-delay: 40ms; }
.reveal > *:nth-child(3) { animation-delay: 80ms; }
.reveal > *:nth-child(4) { animation-delay: 120ms; }
.reveal > *:nth-child(5) { animation-delay: 160ms; }
.reveal > *:nth-child(n+6) { animation-delay: 190ms; }

/* ---------- boot ---------- */
.boot-splash { min-height: 60dvh; display: grid; place-items: center; }
.boot-sun { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, #fff6d9 0, var(--pv-solar-gold) 45%, rgb(245 166 35 / 0) 70%); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.12); opacity: 0.75; } }

.banner-offline {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  top: calc(var(--space-3) + env(safe-area-inset-top));
  background: #b3364d; color: #fff; font-weight: 600;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-small);
}