/* Reset, app shell, type scale. Sizes from handoff README § Typography. */

*, *::before, *::after { box-sizing: border-box }
html, body, h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0 }
ul, ol { list-style: none }

html { -webkit-text-size-adjust: 100% }

body {
  font-family: var(--font);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: var(--charcoal);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overscroll-behavior-y: none;
}

h1, h2, h3 { text-wrap: balance }

button, input, select { font: inherit; color: inherit }

button {
  margin: 0; border: none; background: none; cursor: pointer;
  min-height: var(--touch); min-width: var(--touch);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a { color: var(--green) }

/* Screen shell — safe areas respected top and bottom */

.app {
  min-height: 100dvh;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Type scale */

.t-hero    { font-size: 54px;   font-weight: 800; letter-spacing: -.035em; line-height: 1 }
.t-keypad  { font-size: 56px;   font-weight: 800; letter-spacing: -.04em;  line-height: 1 }
.t-title   { font-size: 27px;   font-weight: 800; letter-spacing: -.028em }
.t-title-2 { font-size: 23px;   font-weight: 800; letter-spacing: -.028em }
.t-title-3 { font-size: 20px;   font-weight: 800; letter-spacing: -.02em }
.t-money   { font-size: 17px;   font-weight: 700 }
.t-body    { font-size: 15px;   font-weight: 500 }
.t-sec     { font-size: 14.5px; font-weight: 500; color: var(--slate-500) }
.t-sec-2   { font-size: 13.5px; font-weight: 500; color: var(--slate-500) }
.t-sec-3   { font-size: 13px;   font-weight: 500; color: var(--slate-500) }
.t-label   { font-size: 12px;   font-weight: 600; letter-spacing: .14em; text-transform: uppercase }
.t-label-s { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase }
.t-fine    { font-size: 12.5px; font-weight: 500; color: var(--slate-400) }

/* Money: tabular figures, and never wrap across the thin space */

.money, .t-hero, .t-keypad, .t-money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.money { white-space: nowrap }

/* Buttons — press feedback per handoff README § Motion */

.btn-primary {
  display: block; width: 100%; min-height: 52px;
  background: var(--green); color: var(--bg);
  border-radius: var(--r-row); font-size: 16px; font-weight: 700;
  transition: transform .08s ease-out, background-color .08s ease-out;
}
.btn-primary:active { background: var(--green-pressed); transform: scale(.985) }

.btn-secondary {
  display: block; width: 100%; min-height: 52px;
  background: var(--surface); color: var(--charcoal);
  border: 1px solid var(--border); border-radius: var(--r-row);
  font-size: 16px; font-weight: 700;
  transition: opacity .08s ease-out;
}
.btn-secondary:active { opacity: .55 }

/* Landing */

.landing {
  width: 100%; max-width: 430px; margin: 0 auto; position: relative;
  background: var(--bg); color: var(--charcoal); overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

.bubble {
  flex: 1; position: relative; background: var(--surface);
  border: 1.5px solid var(--border); border-radius: 18px; padding: 14px 16px;
  box-shadow: var(--sh-bubble);
}
.bubble-tail {
  position: absolute; left: -9px; bottom: 15px; width: 16px; height: 16px;
  background: var(--surface);
  border-left: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border);
  border-radius: 0 0 0 4px; transform: rotate(45deg);
}

.step-dot {
  flex: none; width: 26px; height: 26px; min-height: 0; min-width: 0;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.step-dot--dark  { background: var(--charcoal-deep); color: var(--bg) }
.step-dot--green { background: var(--green); color: var(--bg); width: 28px; height: 28px; font-size: 13.5px }

.foot-link { font-size: 12.5px; font-weight: 600; color: var(--green); text-decoration: none }
.foot-link:hover { color: var(--green-pressed) }

/* Bottom sheet */

.sheet-scrim {
  /* Above .overlay (50). A sheet is always opened *from* something, and the
     things it opens from include full-screen overlays — onboarding, the log
     flow, shift detail. At 40 it rendered behind them: present in the DOM,
     invisible and untappable. Layers: tabbar 30, roster bar 35, toast 45,
     overlay 50, sheet 55, tour 60. */
  position: fixed; inset: 0; z-index: 55; background: rgba(26,23,20,.5);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.sheet {
  width: 100%; max-width: 430px; margin: 0 auto; background: var(--bg);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 22px 22px calc(22px + env(safe-area-inset-bottom));
  max-height: 92vh; overflow-y: auto;
}
.sheet-close {
  flex: none; background: var(--surface-tint); border-radius: 50%;
  width: 44px; height: 44px; font-size: 17px; color: var(--slate-500);
  display: flex; align-items: center; justify-content: center;
}
.sheet-close:active { background: var(--border) }