/* ==========================================================================
   Spenlog card: one phone running a working voice-entry prototype,
   matched to the app's dark home screen.
   1em inside the phone = 2.35/110 of the card width, so it scales as one piece.
   ========================================================================== */

.sp-media { background: linear-gradient(170deg, #e3f6ec 0%, #cdeedd 100%); }
.sp-hint {
  position: absolute; left: 16px; bottom: 12px; z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: .02em; font-stretch: 90%;
  color: #3d6b55;
}

.sp-scene {
  --sp-green: #2bb882;
  --sp-green-2: #36cf91;
  --sp-bg: #0f0f0f;
  --sp-card: #1a1a1a;
  --sp-halo: #13271e;
  --sp-line: #2a2b2a;
  --sp-sub: #9a9d9b;
  --sp-orange: #f49e0b;
  position: absolute; inset: 0;
  container-type: inline-size;
  overflow: hidden;
  font-family: "Instrument Sans", "Hind Siliguri", system-ui, sans-serif;
  color: #f2f3f2;
  line-height: 1.3;
}
.sp-scene p, .sp-scene ul { margin: 0; }
.sp-scene ul { list-style: none; padding: 0; }
.sp-scene button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
.sp-scene svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-scene :focus-visible { outline: 2px solid var(--sp-green); outline-offset: 2px; }

.sp-phone {
  position: absolute;
  font-size: .9vw; font-size: calc(100cqw / 110 * 2.35);
  left: 12.4em; top: 7.6em; width: 22em; height: 46.75em;
  padding: .5em;
  border-radius: 3.4em;
  background: #050505;
  box-shadow: inset 0 0 0 .12em #2c2f2d, 0 3em 4em -2em rgba(10, 60, 35, .5);
}
/* The screen is laid out on the app screenshot's own grid:
   1u = 1/918 of the screen width (the screenshot is 918 x 2000). */
.sp-screen {
  --u: calc(100cqw / 918);
  position: relative; height: 100%;
  container-type: inline-size;
  font-size: .8em;
  border-radius: 3.7em;
  background: var(--sp-bg);
  overflow: hidden;
}
.sp-status {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  height: calc(120 * var(--u)); padding: 0 calc(80 * var(--u)) 0 calc(63 * var(--u));
  font-size: calc(32 * var(--u)); font-weight: 600; color: #ececec;
}
.sp-status__r { display: inline-flex; align-items: center; gap: calc(16 * var(--u)); }
.sp-status__r i { display: block; height: calc(30 * var(--u)); }
.sp-status__r i:first-child { width: calc(34 * var(--u)); background: #e6e6e6; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.sp-status__r i:last-child { width: calc(55 * var(--u)); border-radius: calc(9 * var(--u)); background: linear-gradient(90deg, #e6e6e6 47%, #5c5c5c 47%); }
.sp-homebar { position: absolute; left: calc(305 * var(--u)); top: calc(1963 * var(--u)); z-index: 5; width: calc(305 * var(--u)); height: calc(9 * var(--u)); border-radius: 1em; background: #adadad; }

.sp-view {
  position: absolute; inset: 0;
  padding: 4em 1.15em 0;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s .35s;
}
.sp-view.is-active { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }

/* Home: every block sits at its screenshot coordinates */
.sp-view[data-sview="home"] { padding: 0; }
.sp-view[data-sview="home"] > * { position: absolute; }
.sp-top { left: calc(42 * var(--u)); right: calc(42 * var(--u)); top: calc(143 * var(--u)); height: calc(84 * var(--u)); display: flex; justify-content: space-between; align-items: center; }
.sp-brand { font-size: calc(64 * var(--u)); font-weight: 500; letter-spacing: -.025em; line-height: 1; color: #f4f4f4; }
.sp-lang { display: inline-flex; align-items: center; justify-content: center; gap: calc(18 * var(--u)); width: calc(181 * var(--u)); height: 100%; border-radius: calc(42 * var(--u)); background: var(--sp-card) !important; font-size: calc(38 * var(--u)); line-height: 1; }
.sp-lang b { font-weight: 400; color: #cfcfcf; transition: color .25s; }
.sp-lang b.is-on { font-weight: 500; color: var(--sp-green-2); }
.sp-lang i { width: calc(1.5 * var(--u)); height: calc(32 * var(--u)); background: #3a3a3a; }

.sp-budget { left: calc(42 * var(--u)); right: calc(42 * var(--u)); top: calc(329 * var(--u)); height: calc(136 * var(--u)); }
.sp-left { margin-top: calc(-7 * var(--u)) !important; font-size: calc(90 * var(--u)); font-weight: 400; letter-spacing: -.015em; line-height: 1; color: #f4f4f4; }
.sp-cap { position: absolute; left: 0; top: calc(100 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: #a3a3a3; }
.sp-today { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--u)); width: calc(198 * var(--u)); height: 100%; border-radius: calc(34 * var(--u)); background: var(--sp-card); line-height: 1; }
.sp-today span { font-size: calc(30 * var(--u)); color: #b4b4b4; }
.sp-today b { font-size: calc(38 * var(--u)); font-weight: 400; color: #f0f0f0; }
.sp-bar { left: calc(41 * var(--u)); right: calc(42 * var(--u)); top: calc(486 * var(--u)); height: calc(12 * var(--u)); border-radius: 1em; background: #2a2a2a; overflow: hidden; }
.sp-bar i { display: block; height: 100%; width: 90%; border-radius: inherit; background: var(--sp-orange); transition: width .8s cubic-bezier(.22, .8, .2, 1); }

.sp-micwrap { left: 0; right: 0; top: calc(673 * var(--u)); height: calc(560 * var(--u)); }
.sp-mic {
  position: absolute; left: calc(184 * var(--u)); top: 0;
  display: grid; place-items: center;
  width: calc(548 * var(--u)); height: calc(548 * var(--u)); border-radius: 50%;
  background: var(--sp-halo) !important;
}
.sp-mic__core {
  display: grid; place-items: center;
  width: calc(305 * var(--u)); height: calc(305 * var(--u)); border-radius: 50%;
  background: linear-gradient(170deg, #3dd99b, #28ab77);
  color: #e3fbf1;
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
  animation: sp-breathe 3.2s ease-in-out infinite;
}
.sp-mic:hover .sp-mic__core { transform: scale(1.05); }
.sp-mic svg { width: calc(124 * var(--u)); height: calc(124 * var(--u)); stroke-width: 1.65; }
@keyframes sp-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(61, 217, 155, 0); } 50% { box-shadow: 0 0 0 calc(26 * var(--u)) rgba(61, 217, 155, .07); } }
.sp-try { position: absolute; left: 0; right: 0; top: calc(510 * var(--u)); text-align: center; font-size: calc(34 * var(--u)); line-height: 1.1; font-style: italic; color: #b3b3b3; }

.sp-listhead { left: calc(42 * var(--u)); right: calc(44 * var(--u)); top: calc(1346 * var(--u)); height: calc(44 * var(--u)); display: flex; justify-content: space-between; align-items: center; font-size: calc(35 * var(--u)); line-height: 1; }
.sp-listhead span:first-child { letter-spacing: .03em; color: #a8a8a8; }
.sp-link { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); color: var(--sp-green-2); }
.sp-link svg { width: calc(36 * var(--u)); height: calc(36 * var(--u)); stroke-width: 1.5; }
.sp-list { left: calc(46 * var(--u)); right: calc(48 * var(--u)); top: calc(1435 * var(--u)); display: grid; gap: calc(32 * var(--u)); }
.sp-list li { display: flex; align-items: center; height: calc(187 * var(--u)); padding: 0 calc(41 * var(--u)) 0 calc(44 * var(--u)); border-radius: calc(44 * var(--u)); background: var(--sp-card); }
.sp-emo { flex: none; width: calc(52 * var(--u)); margin-right: calc(26 * var(--u)); font-size: calc(46 * var(--u)); line-height: 1; text-align: center; }
.sp-tx { flex: 1; min-width: 0; }
.sp-tx b { display: block; margin-top: calc(-8 * var(--u)); font-size: calc(37 * var(--u)); font-weight: 500; line-height: 1.25; color: #f4f4f4; }
.sp-tx small { display: block; margin-top: calc(14 * var(--u)); font-size: calc(35 * var(--u)); line-height: 1; color: #a8a8a8; }
.sp-amt { font-size: calc(50 * var(--u)); font-weight: 400; line-height: 1; color: #f4f4f4; }
.sp-list li.is-new { animation: sp-new 2.6s ease both; }
@keyframes sp-new { 0% { background: #1d3a2d; transform: translateY(calc(-24 * var(--u))); opacity: 0; } 15% { opacity: 1; transform: none; } 60% { background: #1d3a2d; } 100% { background: var(--sp-card); } }

/* Floating pill nav + separate add button, with the list fading out behind it */
.sp-nav {
  left: 0; right: 0; top: calc(1630 * var(--u)); bottom: 0; z-index: 2;
  background: linear-gradient(to bottom, rgba(15, 15, 15, 0), var(--sp-bg) calc(125 * var(--u)));
}
.sp-nav__pill { position: absolute; left: calc(32 * var(--u)); top: calc(120 * var(--u)); width: calc(675 * var(--u)); height: calc(150 * var(--u)); display: grid; grid-template-columns: repeat(4, calc(163 * var(--u))); padding-left: calc(10 * var(--u)); border-radius: calc(75 * var(--u)); background: var(--sp-card); box-shadow: inset 0 0 0 calc(2 * var(--u)) #272727; }
.sp-nav__pill span { display: flex; flex-direction: column; align-items: center; padding-top: calc(26 * var(--u)); gap: calc(19 * var(--u)); font-size: calc(25.5 * var(--u)); line-height: 1; color: #b4b4b4; }
.sp-nav__pill span svg { width: calc(56 * var(--u)); height: calc(56 * var(--u)); stroke-width: 1.5; }
.sp-nav__pill span.is-active { color: var(--sp-green-2); }
.sp-nav__pill span.is-active svg { stroke-width: 2.6; }
.sp-fab { position: absolute; left: calc(733 * var(--u)); top: calc(119 * var(--u)); display: grid; place-items: center; width: calc(153 * var(--u)); height: calc(153 * var(--u)); border-radius: 50%; background: linear-gradient(170deg, #3dd99b, #28ab77); color: #fff; box-shadow: 0 calc(10 * var(--u)) calc(44 * var(--u)) rgba(43, 184, 130, .3); }
.sp-fab svg { width: calc(80 * var(--u)); height: calc(80 * var(--u)); stroke-width: 1.9; }

/* Parsed entries sheet: same grid, cards and buttons as the home screen */
.sp-view[data-sview="home"]::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: rgba(0, 0, 0, .6);
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.sp-view.has-sheet::after { opacity: 1; pointer-events: auto; }
.sp-view[data-sview="home"] > .sp-sheet {
  left: 0; right: 0; bottom: 0; z-index: 4;
  padding: calc(28 * var(--u)) calc(42 * var(--u)) calc(92 * var(--u));
  border-radius: calc(64 * var(--u)) calc(64 * var(--u)) 0 0;
  background: var(--sp-card);
  box-shadow: inset 0 calc(2 * var(--u)) 0 #272727, 0 calc(-20 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, .5);
  transform: translateY(105%);
  transition: transform .5s cubic-bezier(.22, .8, .2, 1);
}
.sp-sheet::before { content: ""; display: block; width: calc(110 * var(--u)); height: calc(10 * var(--u)); margin: 0 auto calc(48 * var(--u)); border-radius: 1em; background: #3a3a3a; }
.sp-view.has-sheet .sp-sheet { transform: none; }
.sp-sheet__title { font-size: calc(46 * var(--u)); font-weight: 500; line-height: 1.15; color: #f4f4f4; }
.sp-sheet__quote { margin: calc(14 * var(--u)) 0 calc(40 * var(--u)) !important; font-size: calc(32 * var(--u)); line-height: 1.3; font-style: italic; color: #a3a3a3; }
.sp-parsed { display: grid; gap: calc(20 * var(--u)); }
.sp-parsed li {
  display: flex; align-items: center;
  height: calc(150 * var(--u)); padding: 0 calc(40 * var(--u));
  border-radius: calc(40 * var(--u)); background: #242424;
  opacity: 0; transform: translateY(calc(24 * var(--u)));
}
.sp-view.has-sheet .sp-parsed li { animation: sp-parse .45s cubic-bezier(.22, .8, .2, 1) forwards; animation-delay: var(--d); }
@keyframes sp-parse { to { opacity: 1; transform: none; } }
.sp-parsed .sp-tx b { margin-top: 0; }
.sp-chip { display: inline-block; margin-top: calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(16 * var(--u)); border-radius: 1em; background: #173527; color: #6fe3b2; font-size: calc(24 * var(--u)); font-weight: 600; line-height: 1.1; }
.sp-parsed .sp-amt { font-size: calc(46 * var(--u)); }
.sp-sheet__btns { display: grid; grid-template-columns: 1fr 1.5fr; gap: calc(24 * var(--u)); margin-top: calc(44 * var(--u)); }
.sp-btn {
  height: calc(140 * var(--u)); border-radius: calc(70 * var(--u)) !important;
  background: #262626 !important; box-shadow: inset 0 0 0 calc(2 * var(--u)) #2f2f2f;
  font-size: calc(38 * var(--u)) !important; font-weight: 500; text-align: center; color: #e2e2e2 !important;
  transition: transform .15s;
}
.sp-btn:active { transform: scale(.97); }
.sp-btn--go { background: linear-gradient(170deg, #3dd99b, #28ab77) !important; box-shadow: 0 calc(10 * var(--u)) calc(44 * var(--u)) rgba(43, 184, 130, .3); color: #04140d !important; font-weight: 600; }

/* Listening: the mic stays exactly where it was on home, so the tap reads as one motion */
.sp-listen { padding: 0; background: var(--sp-bg); text-align: center; }
.sp-listen > * { position: absolute; left: 0; right: 0; }
.sp-listen__title { top: calc(290 * var(--u)); font-size: calc(58 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: -.015em; color: #f4f4f4; }
.sp-listen__sub { top: calc(380 * var(--u)); font-size: calc(32 * var(--u)); line-height: 1; color: #a3a3a3; }
.sp-listen > .sp-orb { left: calc(184 * var(--u)); right: auto; top: calc(673 * var(--u)); display: grid; place-items: center; width: calc(548 * var(--u)); height: calc(548 * var(--u)); }
.sp-ring { position: absolute; border-radius: 50%; }
.sp-ring.r1 { inset: 0; background: var(--sp-halo); }
.sp-ring.r2, .sp-ring.r3 { inset: calc(121.5 * var(--u)); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(61, 217, 155, .5); opacity: 0; }
.sp-view.is-active .sp-ring.r1 { animation: sp-pulse 1.8s ease-in-out infinite; }
.sp-view.is-active .sp-ring.r2 { animation: sp-ripple 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.sp-view.is-active .sp-ring.r3 { animation: sp-ripple 2.4s cubic-bezier(.2, .6, .3, 1) 1.2s infinite; }
@keyframes sp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes sp-ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.95); opacity: 0; } }
.sp-orb__core {
  position: relative; display: flex; align-items: center; justify-content: center; gap: calc(16 * var(--u));
  width: calc(305 * var(--u)); height: calc(305 * var(--u)); border-radius: 50%;
  background: linear-gradient(170deg, #3dd99b, #28ab77);
  box-shadow: 0 0 calc(90 * var(--u)) rgba(61, 217, 155, .35);
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
}
.sp-orb:active .sp-orb__core, .sp-mic:active .sp-mic__core { transform: scale(.94); }
.sp-orb__core i { display: block; width: calc(16 * var(--u)); height: calc(40 * var(--u)); border-radius: 1em; background: #e3fbf1; }
.sp-view.is-active .sp-orb__core i { animation: sp-wave .9s ease-in-out infinite; }
.sp-orb__core i:nth-child(2) { animation-delay: .15s !important; }
.sp-orb__core i:nth-child(3) { animation-delay: .3s !important; }
.sp-orb__core i:nth-child(4) { animation-delay: .45s !important; }
.sp-orb__core i:nth-child(5) { animation-delay: .6s !important; }
@keyframes sp-wave { 0%, 100% { height: calc(36 * var(--u)); } 50% { height: calc(118 * var(--u)); } }
.sp-transcript { top: calc(1300 * var(--u)); padding: 0 calc(70 * var(--u)); font-size: calc(48 * var(--u)); line-height: 1.3; color: #f4f4f4; }
.sp-transcript span { animation: sp-word .35s ease both; }
@keyframes sp-word { from { opacity: 0; filter: blur(calc(8 * var(--u))); } to { opacity: 1; filter: none; } }
.sp-listen > .sp-cancel {
  left: calc(279 * var(--u)); right: auto; top: calc(1780 * var(--u));
  width: calc(360 * var(--u)); height: calc(150 * var(--u)); border-radius: calc(75 * var(--u));
  background: var(--sp-card) !important; box-shadow: inset 0 0 0 calc(2 * var(--u)) #272727;
  font-size: calc(36 * var(--u)) !important; color: #d4d4d4 !important;
}

@media (prefers-reduced-motion: reduce) {
  .sp-scene *, .sp-scene *::before, .sp-scene *::after { animation: none !important; transition: none !important; }
  .sp-parsed li { opacity: 1; transform: none; }
}