/* Reset, typography, safe areas and the app shell (tab bar / sidebar). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p { margin: 0; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
code { font-family: var(--mono); font-size: 0.88em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.num, .amount { font-variant-numeric: tabular-nums; }

/* --- type scale --------------------------------------------------------------- */
.large-title { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: -0.5px; }
.hero-amount { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -1px; }
.section-title { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.4px; }
.figure { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.overline { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-2); }
.secondary { font-size: 15px; color: var(--text-2); }
.caption { font-size: 13px; color: var(--text-2); }
.text-2 { color: var(--text-2); }
.positive { color: var(--positive); }
.negative { color: var(--negative); }

/* --- shell ------------------------------------------------------------------- */
.page {
  width: 100%;
  margin: 0 auto;
  padding: max(58px, calc(env(safe-area-inset-top) + 16px)) calc(var(--page-pad) + env(safe-area-inset-right))
           calc(130px + env(safe-area-inset-bottom)) calc(var(--page-pad) + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}
.page.compact { gap: 12px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 4px; }
.page-head .titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-head .actions { display: flex; gap: 8px; align-items: center; flex: none; }
.back-link { display: inline-flex; align-items: center; gap: 2px; font-size: 17px; color: var(--text-2); padding: 0 4px; margin-bottom: -12px; }
.back-link svg { transform: rotate(180deg); }

/* Mobile: floating capsule tab bar. */
.tabbar {
  position: fixed;
  z-index: 20;
  left: calc(12px + env(safe-area-inset-left));
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(26px + env(safe-area-inset-bottom));
  height: 62px;
  padding: 5px;
  display: flex;
  gap: 2px;
  border-radius: 31px;
  background: var(--tabbar-bg);
  box-shadow: var(--tabbar-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
}
.tabbar .brand { display: none; }
.tab {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 26px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--text-2);
}
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab[aria-current="page"] { color: var(--text); background: var(--selected-pill); }
.tab:focus-visible { outline-offset: -2px; border-radius: 26px; }

/* Tablet: mobile layout, wider column. */
@media (min-width: 640px) {
  .page { max-width: 640px; }
  .tabbar { left: 50%; right: auto; width: 616px; transform: translateX(-50%); }
}

/* Desktop: left sidebar 240px, content up to 1120px. */
@media (min-width: 1024px) {
  body.has-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
  .tabbar {
    position: sticky;
    top: 0;
    left: auto; right: auto; bottom: auto;
    transform: none;
    width: auto;
    height: 100vh;
    flex-direction: column;
    gap: 4px;
    padding: 28px 14px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-right: 0.5px solid var(--separator);
  }
  .tabbar .brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 18px; font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
  .tab {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 15px;
    letter-spacing: 0;
  }
  .tab:focus-visible { border-radius: 12px; }
  .page { max-width: 1120px; padding: 40px 40px 60px; }
}

/* Pages without the shell (sign in, 2FA, invite). */
.auth {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  max-width: 440px;
  padding: max(40px, calc(env(safe-area-inset-top) + 24px)) 24px calc(40px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.auth-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px 0; }
.auth-hero .logo { width: 84px; height: 84px; border-radius: 22px; background: var(--cat-indigo-tint); color: var(--cat-indigo-glyph); display: flex; align-items: center; justify-content: center; }
.auth-hero h1 { margin-top: 8px; }
.auth-hero p { font-size: 17px; line-height: 24px; color: var(--text-2); max-width: 300px; }
.auth-body { display: flex; flex-direction: column; gap: 12px; }
.auth-foot { text-align: center; font-size: 13px; line-height: 18px; color: var(--text-2); margin-top: 6px; }
.auth-foot a { text-decoration: underline; }