/* Polish layer: loaded last on every page.
   Spring motion, flat everyday boxes with soft shadow only on lifted things, pill buttons,
   a floating pill nav on the landing page and the app's bottom bar, and calmer entry motion.
   Layouts and colours stay the same; this only refines the finish. */

:root {
  --spring: cubic-bezier(.32, .72, 0, 1);
  --shadow: 0 1px 1px rgb(22 24 43 / .03), 0 24px 48px -28px rgb(42 46 127 / .22);
  --shadow-lift: 0 2px 4px rgb(22 24 43 / .04), 0 32px 64px -32px rgb(42 46 127 / .32);
  --hairline: color-mix(in srgb, var(--ink) 9%, transparent);
  --highlight: inset 0 1px 0 rgb(255 255 255 / .7);
}
:root[data-theme="dark"] {
  --shadow: 0 1px 1px rgb(0 0 0 / .3), 0 24px 48px -28px rgb(0 0 0 / .7);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / .3), 0 32px 64px -32px rgb(0 0 0 / .8);
  --hairline: rgb(255 255 255 / .09);
  --highlight: inset 0 1px 0 rgb(255 255 255 / .06);
}

/* ---------- Boxes ----------
   Everyday containers (lists, panels, rows, tiles, section blocks) are flat with one hairline edge.
   Soft shadow is kept for things meant to look lifted: the one hero object on a screen,
   illustration cards, and floating UI (pop-ups, menus, nav pills). */
.card, .panel, .set-card2, .get-inner, .fcard, .set-row, .set-profile, .tile, .q {
  box-shadow: 0 0 0 1px var(--hairline);
}
.tab.active, .segmented button.active { box-shadow: 0 0 0 1px var(--hairline); }
.who-frame { box-shadow: none; }

/* Lifted */
.hero-metric { box-shadow: 0 28px 56px -30px rgb(42 46 127 / .55), inset 0 1px 0 rgb(255 255 255 / .1); }
.ring-card, .stmt-card { box-shadow: 0 0 0 1px var(--hairline), var(--shadow-lift); }
.float.card { box-shadow: 0 0 0 1px var(--hairline), var(--shadow-lift); }
.fcard .card, .fcard .receipt, .fcard .owed, .fcard .switch, .fcard .live { box-shadow: 0 0 0 1px var(--hairline), var(--shadow); }
.pill { box-shadow: 0 0 0 1px var(--hairline), var(--shadow); }

/* ---------- Buttons: pills with spring press ---------- */
.btn, .store-btn, .bn-fab {
  border-radius: 999px;
  transition: transform .5s var(--spring), background-color .4s var(--spring), border-color .4s var(--spring), box-shadow .4s var(--spring), opacity .4s var(--spring), color .4s var(--spring);
}
.btn:active, .store-btn:active { transform: scale(.98); }
.btn-secondary { border-color: transparent; box-shadow: inset 0 0 0 1px var(--hairline); }
.btn-secondary:hover { border-color: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
.btn-primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / .14); }
.btn-primary:hover { opacity: 1; background: color-mix(in srgb, var(--brand) 90%, #000); }
.store-btn { padding: 0 10px 0 28px; }

/* Button with its arrow in its own circle, flush to the right edge */
.btn .go, .store-btn .go {
  width: 34px; height: 34px; margin-right: -10px; margin-left: 4px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: rgb(255 255 255 / .16); font-size: .95rem;
  transition: transform .5s var(--spring);
}
.btn-sm .go { width: 28px; height: 28px; margin-right: -8px; font-size: .85rem; }
.btn-xl .go { width: 42px; height: 42px; margin-right: -24px; margin-left: 10px; font-size: 1.1rem; }
.store-btn .go { margin-left: auto; margin-right: 0; width: 44px; height: 44px; font-size: 1.1rem; }
.btn:hover .go, .store-btn:hover .go { transform: translate(2px, -1px) scale(1.05); }

/* Inputs and selects keep their shape; softer edge and focus */
.input, .select, .textarea { border-color: var(--hairline); transition: border-color .4s var(--spring), box-shadow .4s var(--spring); }
.input:focus, .select:focus, .textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }

/* Spring easing on the motion that already exists */
.pill-go, .more i, .hero-ctas .btn-ghost i, .who-frame img, .ring-arm, .ring-seat .avatar, .toast, .switch::after, .hm-split-held {
  transition-timing-function: var(--spring);
}

/* Small pill label above section headings */
.eyebrow {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-size: .8rem; letter-spacing: 0;
}
:root[data-theme="dark"] .eyebrow { background: color-mix(in srgb, var(--brand) 22%, transparent); }

/* ---------- Landing ---------- */
/* Floating island nav, detached from the top edge */
.nav { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: calc(14px + env(safe-area-inset-top, 0px)); pointer-events: none; }
.nav.scrolled { border-bottom-color: transparent; }
.nav-inner {
  pointer-events: auto;
  width: min(100% - var(--page-gutter) * 2, var(--page-max)); height: 64px; padding: 0 8px 0 20px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 0 0 1px var(--hairline), 0 16px 40px -24px rgb(42 46 127 / .28), var(--highlight);
  transition: box-shadow .6s var(--spring), background-color .6s var(--spring), transform .6s var(--spring);
}
.nav.scrolled .nav-inner { background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 0 0 1px var(--hairline), 0 20px 48px -24px rgb(42 46 127 / .38), var(--highlight); }

/* Menu button: two lines that turn into an X */
.burger { display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface-2); cursor: pointer; color: var(--ink); }
.burger span { position: absolute; left: 14px; width: 16px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .6s var(--spring), top .6s var(--spring); }
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

/* Full-screen glass menu with staggered links */
.menu-sheet {
  position: fixed; inset: 0; z-index: 39; display: grid; align-content: center; gap: 8px;
  padding: 120px 28px calc(40px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--spring), visibility 0s linear .5s;
}
.menu-sheet.open { opacity: 1; visibility: visible; transition: opacity .5s var(--spring); }
.menu-sheet a:not(.btn), .menu-sheet .menu-foot {
  opacity: 0; transform: translateY(40px);
  transition: opacity .7s var(--spring), transform .7s var(--spring);
}
.menu-sheet a:not(.btn) { font-family: var(--font-display); font-size: 2.4rem; font-weight: 650; letter-spacing: -0.035em; color: var(--ink); text-decoration: none; padding: 4px 0; }
.menu-sheet .menu-foot { display: flex; gap: 10px; align-items: center; margin-top: 28px; }
.menu-sheet.open a:not(.btn), .menu-sheet.open .menu-foot { opacity: 1; transform: none; }
.menu-sheet.open > :nth-child(1) { transition-delay: .08s; }
.menu-sheet.open > :nth-child(2) { transition-delay: .14s; }
.menu-sheet.open > :nth-child(3) { transition-delay: .2s; }
.menu-sheet.open > :nth-child(4) { transition-delay: .26s; }
.menu-sheet.open > :nth-child(5) { transition-delay: .32s; }

/* More breathing room between sections */
.ghost { padding-top: 168px; }
.strip, .calls, .how { padding-top: 136px; }
.get { padding-top: 136px; padding-bottom: 136px; }
.deck, .deck-row { gap: 28px; }
.who { gap: 32px; }

/* Heavier, softer scroll entry: rise, unblur, fade */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transform: translateY(56px); filter: blur(8px); transition: opacity 1s var(--spring), transform 1s var(--spring), filter 1s var(--spring); transition-delay: calc(var(--i, 0) * 110ms); }
  .reveal.in { filter: none; }
  .reveal-load { filter: blur(6px); animation: rise-soft 1.1s var(--spring) forwards; animation-delay: calc(var(--d) * 110ms + 80ms); }
  @keyframes rise-soft { to { opacity: 1; transform: none; filter: none; } }
}

/* ---------- App ---------- */
/* Tab changes: content rises in, card by card. Saves and live updates do not replay this. */
@media (prefers-reduced-motion: no-preference) {
  .view { animation: none; }
  .view.enter > * { opacity: 0; transform: translateY(24px); filter: blur(6px); animation: rise-soft .9s var(--spring) forwards; }
  .view.enter > :nth-child(2) { animation-delay: .06s; }
  .view.enter > :nth-child(3) { animation-delay: .12s; }
  .view.enter > :nth-child(4) { animation-delay: .18s; }
  .view.enter > :nth-child(n+5) { animation-delay: .24s; }
  .sheet[open] { animation-timing-function: var(--spring); animation-duration: .5s; }
}

.tab, .segmented button, .set-row, .row, .menu-item, .bn { transition: background-color .4s var(--spring), color .4s var(--spring), box-shadow .4s var(--spring); }
.menu { border-color: var(--hairline); box-shadow: var(--shadow-lift); }
.sheet-inner { box-shadow: 0 0 0 1px var(--hairline), var(--shadow-lift); }
.bn-fab { box-shadow: inset 0 1px 0 rgb(255 255 255 / .16); }

@media (max-width: 860px) {
  /* Bottom bar becomes a floating island */
  .bottom-nav {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 6px; border-top: 0; border-radius: 28px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
    box-shadow: 0 0 0 1px var(--hairline), 0 18px 40px -18px rgb(22 24 43 / .35), var(--highlight);
  }
  .bn { border-radius: 22px; }
  .bn-fab { width: 52px; height: 52px; }
  .app { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }

  /* Landing: menu button replaces the inline links */
  .nav-inner { width: calc(100% - 24px); padding: 0 6px 0 16px; height: 60px; }
  .burger { display: inline-block; }
  .nav-actions [data-theme-toggle], .nav-actions .nav-signin { display: none; }
  .ghost { padding-top: 112px; }
  .strip, .calls, .how { padding-top: 96px; }
  .get { padding-top: 96px; padding-bottom: 88px; }
  .deck, .deck-row { gap: 20px; }
  .who { gap: 24px; }
}

/* Phones: the island holds just the logo and the menu button (Start a ledger is in the hero and the menu) */
@media (max-width: 560px) {
  .nav-actions > .btn-primary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-sheet a:not(.btn), .menu-sheet .menu-foot { transform: none; }
}