*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font);
  font-size: var(--t-body-lg-size);
  line-height: var(--t-body-lg-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.stage {
  position: fixed;
  inset: 0;
  left: var(--rail-width);
  bottom: var(--kb);
  overflow: hidden;
  background: var(--bg);
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  will-change: transform;
}

@media (min-width: 561px) {
  .screen {
    left: 50%;
    right: auto;
    width: min(var(--app-max-width), 100%);
    transform: translateX(-50%);
  }
  .stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg);
  }
}

.scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.scroll-pad { padding-bottom: calc(var(--bottom-spacer) + var(--safe-bottom)); }

.has-top-fade::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--status-gap) + 64px);
  z-index: 6;
  pointer-events: none;
  opacity: var(--top-fade, 0);
  transition: opacity 120ms linear;
  background: linear-gradient(
    to bottom,
    var(--bg) 0,
    var(--bg) calc(var(--status-gap) + 18px),
    transparent 100%);
}

.status-pad { padding-top: var(--status-gap); }
@media (min-width: 1024px) {
  .status-pad { padding-top: max(var(--safe-top), 10px); }
}

.screen.enter-right { animation: slide-in-right var(--dur-nav) var(--spring) both; }
.screen.enter-left  { animation: slide-in-left  var(--dur-nav) var(--spring) both; }
.screen.exit-right  { animation: slide-out-right var(--dur-nav) var(--spring) both; }
.screen.exit-left   { animation: slide-out-left  var(--dur-nav) var(--spring) both; }
.screen.enter-up    { animation: slide-in-up    var(--dur-nav) var(--spring) both; }
.screen.exit-down   { animation: slide-out-down var(--dur-nav) var(--spring) both; }
.screen.recede      { animation: recede         var(--dur-nav) var(--spring-soft) both; }
.screen.advance     { animation: advance        var(--dur-nav) var(--spring-soft) both; }

@media (min-width: 561px) {
  @keyframes slide-in-right  { from { transform: translateX(-50%) translate3d(100%,0,0); } to { transform: translateX(-50%) translate3d(0,0,0); } }
  @keyframes slide-in-left   { from { transform: translateX(-50%) translate3d(-100%,0,0); } to { transform: translateX(-50%) translate3d(0,0,0); } }
  @keyframes slide-out-right { from { transform: translateX(-50%) translate3d(0,0,0); } to { transform: translateX(-50%) translate3d(100%,0,0); } }
  @keyframes slide-out-left  { from { transform: translateX(-50%) translate3d(0,0,0); } to { transform: translateX(-50%) translate3d(-100%,0,0); } }
  @keyframes slide-in-up     { from { transform: translateX(-50%) translate3d(0,100%,0); } to { transform: translateX(-50%) translate3d(0,0,0); } }
  @keyframes slide-out-down  { from { transform: translateX(-50%) translate3d(0,0,0); } to { transform: translateX(-50%) translate3d(0,100%,0); } }
  @keyframes recede          { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(.94); } }
  @keyframes advance         { from { transform: translateX(-50%) scale(.94); } to { transform: translateX(-50%) scale(1); } }
}

@media (max-width: 560px) {
  @keyframes slide-in-right  { from { transform: translate3d(100%,0,0); } to { transform: translate3d(0,0,0); } }
  @keyframes slide-in-left   { from { transform: translate3d(-100%,0,0); } to { transform: translate3d(0,0,0); } }
  @keyframes slide-out-right { from { transform: translate3d(0,0,0); } to { transform: translate3d(100%,0,0); } }
  @keyframes slide-out-left  { from { transform: translate3d(0,0,0); } to { transform: translate3d(-100%,0,0); } }
  @keyframes slide-in-up     { from { transform: translate3d(0,100%,0); } to { transform: translate3d(0,0,0); } }
  @keyframes slide-out-down  { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,100%,0); } }
  @keyframes recede          { from { transform: scale(1); } to { transform: scale(.94); } }
  @keyframes advance         { from { transform: scale(.94); } to { transform: scale(1); } }
}

@media (prefers-reduced-motion: reduce) {
  .screen[class*='enter-'], .screen[class*='exit-'],
  .screen.recede, .screen.advance { animation-duration: 1ms; }
  * { scroll-behavior: auto !important; }
}

.t-display  { font-size: var(--t-display-size);  line-height: var(--t-display-lh);  font-weight: 700; }
.t-headline { font-size: var(--t-headline-size); line-height: var(--t-headline-lh); font-weight: 700; }
.t-title-lg { font-size: var(--t-title-lg-size); line-height: var(--t-title-lg-lh); font-weight: 700; }
.t-title-md { font-size: var(--t-title-md-size); line-height: var(--t-title-md-lh); font-weight: 700; }
.t-title-sm { font-size: var(--t-title-sm-size); line-height: var(--t-title-sm-lh); font-weight: 700; }
.t-body-lg  { font-size: var(--t-body-lg-size);  line-height: var(--t-body-lg-lh);  font-weight: 400; }
.t-body-md  { font-size: var(--t-body-md-size);  line-height: var(--t-body-md-lh);  font-weight: 400; }
.t-label-lg { font-size: var(--t-label-lg-size); line-height: var(--t-label-lg-lh); font-weight: 700; }
.t-label-md { font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); font-weight: 500; }
.t-label-sm { font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); font-weight: 500; }

.c-1 { color: var(--text-1); }
.c-2 { color: var(--text-2); }
.c-3 { color: var(--text-3); }
.c-accent { color: var(--accent); }
.c-danger { color: var(--danger); }
.c-warning { color: var(--warning); }

.clamp-1, .clamp-2, .clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.usertext { white-space: pre-wrap; overflow-wrap: anywhere; }

.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}