/* Lead Flow — shell, tokens, glass panel, dock, keyframes.
   Values are from the handoff §1/§4 and are final; do not "tidy" them. */

/* ---- fonts ------------------------------------------------------------ */
/* Overused Grotesk is the product face; self-host before shipping to a store.
   Inter is only the page-level default. */
@font-face {
  font-family: "Overused Grotesk";
  src: url("../assets/fonts/OverusedGrotesk-VF.woff2") format("woff2-variations");
  font-weight: 300 900; font-display: swap;
}

:root {
  /* ink / surfaces */
  --ink: #f3f5fe;
  --ink82: rgba(243,245,254,.82); --ink78: rgba(243,245,254,.78);
  --ink72: rgba(243,245,254,.72); --ink62: rgba(243,245,254,.62);
  --ink60: rgba(243,245,254,.6);  --ink55: rgba(243,245,254,.55);
  --ink45: rgba(243,245,254,.45); --ink40: rgba(243,245,254,.4);
  --ink36: rgba(243,245,254,.36); --ink26: rgba(243,245,254,.26);
  --hairline: rgba(243,245,254,.14);
  --track: rgba(243,245,254,.06);
  --panel-ground: #0b1512;
  --edge: rgba(4,8,7,.95);

  /* semantic */
  --red: #e5484d;   --red-glow: 229,72,77;   --red-soft: rgba(255,138,142,.9);
  --green: #3fbf7f; --green-glow: 63,191,127; --green-soft: #7ae0aa;
  --accent: #9184d9; --accent-glow: 145,132,217;

  --ramp-red: linear-gradient(102deg,#ff2f3a 0%,#ff6b70 22%,#ff9aa0 40%,#e5484d 58%,#ff4d55 78%,#c8232a 100%);
  --ramp-green: linear-gradient(102deg,#2fe08a 0%,#57d69b 22%,#9ff0c4 40%,#3fbf7f 58%,#41d189 78%,#1d7d52 100%);

  /* easing */
  --e-enter: cubic-bezier(.34,1.2,.5,1);
  --e-value: cubic-bezier(.22,.61,.36,1);
  --e-fade: cubic-bezier(.33,0,.5,1);
  --e-exit: cubic-bezier(.4,0,.6,1);

  --device-w: 402px;
  --device-h: 874px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: #eceaf4;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  animation: pagefadein 300ms var(--e-fade) both;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }

/* ---- shell ------------------------------------------------------------ */
.outer {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 44px 22.4px;
}
.device {
  width: var(--device-w); height: var(--device-h);
  flex: none; border-radius: 48px; overflow: hidden; position: relative;
  background: linear-gradient(158deg,#2a2c33 0%,#1b1c22 22%,#15161b 46%,#22242b 63%,#181a1f 82%,#111216 100%);
  box-shadow: 0 40px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.12);
  animation: pagein 620ms var(--e-fade) both;
  font-family: "Overused Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* On a real phone the frame goes away and content fills the safe area (§1). */
@media (max-width: 520px) {
  .outer { padding: 0; align-items: stretch; }
  .device {
    width: 100%; height: 100dvh; border-radius: 0; box-shadow: none;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body { background: #111216; }
}
.screen { position: absolute; inset: 0; }
.gutter { padding-left: 24px; padding-right: 24px; }

/* ---- glass panel ------------------------------------------------------ */
.panel {
  border-radius: 17px; overflow: hidden; position: relative;
  background: rgba(243,245,254,0.06);
  box-shadow: 0 28px 56px -12px rgba(0,0,0,.62),
              0 10px 22px -6px rgba(0,0,0,.45),
              inset 0 1px 0 rgba(255,255,255,.14),
              inset 0 0 0 1px rgba(255,255,255,.05),
              0 0 0 1px rgba(4,8,7,.95);
  animation: panelin 640ms var(--e-enter) both;
}
.panel > .l-flat { position: absolute; inset: 0; background: var(--panel-ground); }
.panel > .l-aura {
  position: absolute; inset: -20%; filter: blur(34px);
  background:
    radial-gradient(42% 34% at 20% 18%, rgba(24,74,58,.7), transparent 70%),
    radial-gradient(50% 40% at 78% 26%, rgba(18,58,48,.62), transparent 70%),
    radial-gradient(40% 32% at 86% 84%, rgba(108,98,42,.34), transparent 70%),
    radial-gradient(52% 42% at 30% 90%, rgba(18,58,48,.62), transparent 70%),
    linear-gradient(140deg,#0d1a16 0%,#0f221e 46%,#0a1310 100%);
}
.panel.bar > .l-aura { filter: blur(26px); }
.panel > .l-dark {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,rgba(6,12,10,.4),rgba(6,12,10,0) 44%,rgba(6,12,10,.32));
}
.panel > .l-gloss {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 34%,rgba(255,255,255,0) 62%);
}
.panel > .content { position: relative; height: 100%; display: flex; flex-direction: column; }

.panel-head {
  padding: 15px 18px 11px; border-bottom: 1px solid var(--hairline);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex: none;
}
.panel-title { font-weight: 300; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink60); }
.panel-meta  { font-weight: 300; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink36); }

/* ---- type roles ------------------------------------------------------- */
.screen-title {
  font-weight: 300; line-height: .95; letter-spacing: .09em; text-indent: .09em;
  text-transform: uppercase; color: var(--ink60); text-align: center;
}
.section-label { font-weight: 300; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink45); }
.row-label     { font-weight: 300; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink62); }
.micro-meta    { font-weight: 300; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink36); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---- holographic money (§4) ------------------------------------------- */
.money {
  font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, rgba(0,0,0,0) 1px 3px), var(--ramp-red);
  background-blend-mode: overlay, normal;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(var(--red-glow),.85)) drop-shadow(0 0 22px rgba(var(--red-glow),.45));
}
.money.in {
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, rgba(0,0,0,0) 1px 3px), var(--ramp-green);
  filter: drop-shadow(0 0 8px rgba(var(--green-glow),.85)) drop-shadow(0 0 22px rgba(var(--green-glow),.45));
}
.money.sm {
  font-size: 11.5px; letter-spacing: .03em;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, rgba(0,0,0,0) 1px 2.5px), var(--ramp-red);
  filter: drop-shadow(0 0 6px rgba(var(--red-glow),.75));
}
.money.sm.in {
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, rgba(0,0,0,0) 1px 2.5px), var(--ramp-green);
  filter: drop-shadow(0 0 6px rgba(var(--green-glow),.75));
}
/* Platforms that can't clip a gradient to text keep the glow (§4). */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .money { color: var(--red); background-image: none; }
  .money.in { color: var(--green); background-image: none; }
}

/* ---- focus ------------------------------------------------------------ */
:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--accent-glow),.9); }
.hit { position: relative; }
/* ≥38×38 hit target without growing the visual mark (§4) */
.hit::after { content: ""; position: absolute; inset: -9px; min-width: 38px; min-height: 38px; }

/* ---- dock (§1) -------------------------------------------------------- */
.dock-wrap {
  position: absolute; left: 0; right: 0; bottom: 26px;
  display: flex; justify-content: center; pointer-events: none;
  animation: dockin 620ms var(--e-enter) 420ms both;
  z-index: 40;
}
.dock {
  pointer-events: auto; display: flex; align-items: flex-end; gap: 10px;
  padding: 10px 12px; border-radius: 20px;
  background: linear-gradient(180deg,rgba(26,31,28,.88),rgba(13,17,15,.92));
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 .5px rgba(4,8,7,.9);
}
.dock-tile {
  position: relative; width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(243,245,254,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 .5px rgba(4,8,7,.85);
  transition: width 140ms var(--e-value), height 140ms var(--e-value), background 160ms;
  flex: none;
}
.dock-tile[aria-current="page"] { background: rgba(243,245,254,.16); }
.dock-tile i { color: var(--ink78); line-height: 1; }
.dock-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  background: rgba(18,22,20,.9); border-radius: 7px; padding: 4px 8px;
  opacity: 0; transition: opacity 160ms; pointer-events: none; color: var(--ink82);
}
.dock-tile:hover .dock-tip, .dock-tile:focus-visible .dock-tip { opacity: 1; }

/* ---- scrim / sheets --------------------------------------------------- */
.scrim {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(4,10,8,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: scrimin 160ms ease both;
}
.scrim.soft { background: rgba(4,10,8,.58); }
.sheet {
  width: 100%; max-width: 296px; border-radius: 16px; padding: 18px;
  background: rgba(243,245,254,.09);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 28px 56px -12px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(4,8,7,.9);
  animation: bubblepop 320ms var(--e-enter) both;
}
.field {
  width: 100%; padding: 10px 12px; border-radius: 10px; margin-top: 6px;
  background: var(--track); border: 1px solid var(--hairline); color: var(--ink);
  font-size: 13px; font-weight: 300;
}
.field::placeholder { color: var(--ink36); }
.field.err { border-color: rgba(229,72,77,.8); }
.field.amt-out { color: #ff8a8e; } .field.amt-in { color: #7ae0aa; }
input[type="date"].field { color-scheme: dark; }
.sheet-actions { display: flex; gap: 8px; margin-top: 14px; }
.btn {
  flex: 1; padding: 10px; border-radius: 10px; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; background: rgba(243,245,254,.09); color: var(--ink82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.btn.primary { background: rgba(63,191,127,.22); color: #cdf6e2; }
.btn[disabled] { opacity: .38; cursor: default; }

/* undo toast, above the dock */
.toast {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 45;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px;
  background: rgba(18,22,20,.94); box-shadow: 0 18px 40px -14px rgba(0,0,0,.7), 0 0 0 .5px rgba(4,8,7,.9);
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink72);
  animation: bubblepop 320ms var(--e-enter) both;
}
.toast .undo { letter-spacing: .18em; }
.toast .undo.out { color: var(--red-soft); } .toast .undo.in { color: var(--green-soft); }

/* ---- empty states ----------------------------------------------------- */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 22px; height: 100%; }
.empty i { font-size: 26px; color: var(--ink36); }
.empty h4 { margin: 0; font-weight: 300; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink62); }
.empty p { margin: 0; font-weight: 300; font-size: 10.5px; line-height: 1.35; color: var(--ink40); max-width: 210px; }

/* hidden scrollbars, contained overscroll — used by every scroll region */
.scroll { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
.scroll::-webkit-scrollbar { display: none; }

/* ---- keyframes (verbatim names, §1) ----------------------------------- */
@keyframes pagein     { from { opacity: 0 } to { opacity: 1 } }
@keyframes pagefadein { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadein     { from { opacity: 0 } to { opacity: 1 } }
@keyframes panelin {
  0%   { opacity: 0; transform: translate3d(0,10px,0) scale(.965); }
  62%  { opacity: 1; transform: translate3d(0,0,0) scale(1.012); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes panelinc {
  0%   { opacity: 0; transform: translateX(-50%) translate3d(0,10px,0) scale(.965); }
  62%  { opacity: 1; transform: translateX(-50%) translate3d(0,0,0) scale(1.012); }
  100% { opacity: 1; transform: translateX(-50%) translate3d(0,0,0) scale(1); }
}
@keyframes dockin  { from { opacity: 0; transform: translate3d(0,14px,0) } to { opacity: 1; transform: translate3d(0,0,0) } }
@keyframes barin   { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes hbarin  { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes cellpop { 0% { transform: scale(.82) } 60% { transform: scale(1.06) } 100% { transform: scale(1) } }
@keyframes bubblepop {
  0%   { opacity: 0; transform: translate3d(0,6px,0) scale(.86); }
  55%  { opacity: 1; transform: translate3d(0,0,0) scale(1.04); }
  75%  { transform: scale(.99); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes scrimin { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---- calendar globe (§5.2) -------------------------------------------- */
@keyframes ringspin { from { transform: rotateY(0deg) } to { transform: rotateY(360deg) } }
@keyframes dotface  { 0% { opacity: 1 } 22% { opacity: .6 } 44%, 56% { opacity: 0 } 78% { opacity: .6 } 100% { opacity: 1 } }
@keyframes meridian { 0% { transform: scaleX(1) } 25% { transform: scaleX(.04) } 50% { transform: scaleX(1) } 75% { transform: scaleX(.04) } 100% { transform: scaleX(1) } }

/* ---- intro (§5.1) ------------------------------------------------------ */
@keyframes square-animation {
  0%{transform:translate3d(0,0,0)}10.5%{transform:translate3d(0,0,0)}
  12.5%{transform:translate3d(32px,0,0)}23%{transform:translate3d(32px,0,0)}
  25%{transform:translate3d(64px,0,0)}35.5%{transform:translate3d(64px,0,0)}
  37.5%{transform:translate3d(64px,32px,0)}48%{transform:translate3d(64px,32px,0)}
  50%{transform:translate3d(32px,32px,0)}60.5%{transform:translate3d(32px,32px,0)}
  62.5%{transform:translate3d(32px,64px,0)}73%{transform:translate3d(32px,64px,0)}
  75%{transform:translate3d(0,64px,0)}85.5%{transform:translate3d(0,64px,0)}
  87.5%{transform:translate3d(0,32px,0)}98%{transform:translate3d(0,32px,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes shellin  { from { opacity: 0; transform: translate3d(0,5px,0) } to { opacity: 1; transform: translate3d(0,0,0) } }
@keyframes screenout{ 0%, 90.6% { opacity: 1 } 100% { opacity: 0 } }
@keyframes cubeglow { 0%, 34% { opacity: 0 } 46% { opacity: .95 } 58% { opacity: .95 } 72%, 100% { opacity: 0 } }