/* The app, inside the phone. iOS light mode, painted from tokens.css — which is
   generated from src/design/tokens.ts, so a palette change in the app moves this
   on the next `node scripts/landing-tokens.mjs` instead of drifting.

   Everything here is authored at real iPhone points (440 x 956) and scaled to the
   device frame by prototype.js. That keeps the numbers in this file the same ones
   the app uses, so a screen can be checked against its App Store capture directly. */

.app {
  position: absolute;
  inset-block-start: 0; inset-inline-start: 0;
  inline-size: 440px; block-size: 956px;
  transform-origin: top left;
  transform: scale(var(--app-scale, 0.7727));
  background: var(--app-background);
  color: var(--app-text-primary);
  font-family: var(--ui);
  font-size: 17px; line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.app *, .app *::before, .app *::after { box-sizing: border-box; }
.app button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.app :focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; border-radius: 6px; }

/* ── status bar ───────────────────────────────────────────────────────────── */
.sb {
  flex: none; block-size: 54px; position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: 30px 26px; padding-block-start: 12px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.2px;
}
.sb__island {
  position: absolute; inset-inline-start: 50%; inset-block-start: 10px;
  transform: translateX(-50%);
  inline-size: 125px; block-size: 36px; border-radius: 18px; background: #000;
}
.sb__right { display: flex; align-items: center; gap: 6px; }

/* ── screens ──────────────────────────────────────────────────────────────── */
.screen {
  flex: 1 1 auto; min-block-size: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: 16px;
  padding-block-end: 140px;   /* clears the tab capsule */
}
.screen::-webkit-scrollbar { display: none; }
.screen[hidden] { display: none; }

/* A hidden screen must be gone, not merely invisible: its buttons stay in the tab
   order otherwise. `!important` because .modal below sets display on the same
   element, and specificity alone lost that fight once already. */
.app > [hidden] { display: none !important; }

.modal { flex: 1 1 auto; min-block-size: 0; display: flex; flex-direction: column; }

.app-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 10px 18px;
}
.app-head h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.5px; }
.app-head__tools { display: flex; align-items: center; gap: 14px; color: var(--app-accent); }

.sec-title { margin: 26px 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.hair { block-size: 1px; background: var(--app-separator); border: 0; margin: 14px 0; }

/* ── the one money card (ج.4: one card, two figures) ─────────────────────── */
.anchor {
  background: #EAF2FD;                     /* the accent-tinted anchor, content layer */
  border-radius: var(--app-r-xl);
  padding: 18px 20px 20px;
  box-shadow: inset 0 0 0 1px rgba(10,132,255,0.10);
}
.anchor__label { font-size: 15px; color: var(--app-text-secondary); }
.anchor__display {
  margin-block-start: 2px;
  font-size: 34px; font-weight: 700; letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  transition: color 240ms ease;
}
.anchor__display.is-fresh { color: var(--app-accent-text); }
.anchor__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.anchor__row + .anchor__row { margin-block-start: 6px; }
.anchor__k { font-size: 15px; color: var(--app-text-secondary); }
.anchor__v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.anchor__v--quiet { font-size: 15px; font-weight: 400; color: var(--app-text-secondary); }
.pace {
  position: relative; block-size: 8px; border-radius: 4px;
  background: rgba(60,60,67,0.14); margin-block-start: 12px; overflow: hidden;
}
.pace__fill { block-size: 100%; background: #545458; border-radius: 4px; transition: inline-size 400ms ease; }
.pace__mark {
  position: absolute; inset-block: -2px; inline-size: 2px; background: #1c1c1e; border-radius: 1px;
}

/* ── quick actions ────────────────────────────────────────────────────────── */
.quick { display: flex; justify-content: space-around; padding-block: 20px 4px; }
/* `> *` and not `> span`: Ask is a real <button> (it is the assistant's only door on
   Home), and the four have to sit on one baseline whatever element each one is. */
.quick > * { display: grid; justify-items: center; gap: 6px; color: var(--app-accent-text); }
.quick > * > span { font-size: 15px; font-weight: 500; }

/* ── list rows ────────────────────────────────────────────────────────────── */
.alert { display: flex; gap: 10px; padding-block: 10px; align-items: flex-start; }
.alert__icon { flex: none; color: var(--app-warning); margin-block-start: 2px; }
.alert__body { flex: 1 1 auto; min-inline-size: 0; }
.alert__t { font-size: 17px; }
.alert__d { font-size: 15px; color: var(--app-warning); }
.alert__link { display: block; font-size: 15px; color: var(--app-accent-text); margin-block-start: 1px; }
.alert__x { flex: none; color: var(--app-text-tertiary); }

.meta { font-size: 15px; color: var(--app-text-secondary); margin-block-end: 6px; }

.row {
  display: flex; align-items: center; gap: 12px;
  padding-block: 11px;
  border-block-end: 1px solid var(--app-separator);
}
.row:last-child { border-block-end: 0; }
.row__badge {
  flex: none; inline-size: 34px; block-size: 34px; border-radius: 17px;
  display: grid; place-items: center; font-size: 14px; font-weight: 600;
}
.row__body { flex: 1 1 auto; min-inline-size: 0; }
.row__t { font-size: 17px; letter-spacing: -0.2px; }
.row__s { font-size: 15px; color: var(--app-text-secondary); }
.row__v { font-size: 17px; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.row__v--up   { color: var(--app-success); }
.row__v--down { color: var(--app-danger); }
.row--new { animation: rowIn 420ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-6px); } }

.card {
  background: var(--app-surface);
  border-radius: var(--app-r-md);
  padding: 12px 14px;
  margin-block-start: 8px;
}
.card .row { padding-block: 6px; }

.navgroup { background: var(--app-surface); border-radius: var(--app-r-md); overflow: hidden; margin-block-start: 8px; }
.navrow {
  display: flex; align-items: center; gap: 12px; inline-size: 100%;
  padding: 13px 14px; text-align: start;
  border-block-end: 1px solid var(--app-separator);
}
.navrow:last-child { border-block-end: 0; }
.navrow__t { flex: 1 1 auto; font-size: 17px; }
.navrow__c { color: var(--app-text-tertiary); }

.subtotal { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stale { font-size: 14px; color: var(--app-warning); display: flex; align-items: center; gap: 5px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-block: 24px 4px; }
.sec-head__l { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.sec-head__a { font-size: 17px; color: var(--app-accent-text); }
.dot {
  inline-size: 26px; block-size: 26px; border-radius: 13px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}

/* ── assistant ────────────────────────────────────────────────────────────── */
.thread {
  flex: 1 1 auto; min-block-size: 0; overflow-y: auto; scrollbar-width: none;
  padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 10px;
}
.thread::-webkit-scrollbar { display: none; }
.modal-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 4px 16px 14px; gap: 12px;
}
.modal-head__t { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.circle-btn {
  inline-size: 38px; block-size: 38px; border-radius: 19px;
  background: var(--app-surface); color: var(--app-accent);
  display: grid; place-items: center;
}

.bubble { max-inline-size: 82%; padding: 11px 15px; border-radius: 20px; font-size: 17px; line-height: 1.34; }
.bubble--me { align-self: flex-end; background: var(--app-accent-fill); color: #fff; border-end-end-radius: 6px; }
.bubble--it { align-self: flex-start; background: var(--app-surface); border-end-start-radius: 6px; }
.bubble--in { animation: bubbleIn 320ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

.typing { display: flex; gap: 4px; align-items: center; padding: 14px 16px; }
.typing i {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--app-text-tertiary); animation: blink 1.1s infinite;
}
.typing i:nth-child(2) { animation-delay: 0.16s; }
.typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

.proposal {
  align-self: flex-start; inline-size: 82%;
  background: #D6E6FA; border-radius: var(--app-r-lg); padding: 14px 16px;
}
.proposal h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.proposal dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 16px; }
.proposal dt { color: var(--app-text-secondary); }
.proposal dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }

.acts { display: grid; gap: 8px; align-self: flex-start; inline-size: 82%; }
.acts__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn {
  padding: 13px; border-radius: var(--app-r-full); font-size: 17px; font-weight: 600; text-align: center;
}
.btn--fill { background: var(--app-accent-fill); color: #fff; }
.btn--plain { background: var(--app-surface); color: var(--app-accent-text); }

.composer {
  flex: none; margin: 0 16px 12px;
  display: flex; align-items: center; gap: 10px;
  background: var(--app-surface); border-radius: var(--app-r-full); padding: 12px 16px;
}
.composer__hint { flex: 1 1 auto; color: var(--app-text-tertiary); font-size: 17px; }
.composer__hint.is-typed { color: var(--app-text-primary); }
.composer__hint::after {
  content: ""; display: inline-block; inline-size: 2px; block-size: 1.05em;
  background: var(--app-accent); vertical-align: -0.18em; margin-inline-start: 1px;
  animation: caret 1s steps(1) infinite; opacity: 0;
}
.composer__hint.is-typing::after { opacity: 1; }
@keyframes caret { 50% { opacity: 0; } }

.prompts { flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
.prompts::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 9px 14px; border-radius: var(--app-r-full);
  background: var(--app-surface); color: var(--app-accent-text);
  font-size: 15px; white-space: nowrap;
}
.chip[disabled] { opacity: 0.45; cursor: default; }

/* ── search ───────────────────────────────────────────────────────────────── */
.search-head { display: flex; align-items: center; gap: 10px; padding-block: 4px 12px; }
.search-head h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.5px; }
.field {
  display: flex; align-items: center; gap: 9px;
  background: var(--app-surface); border-radius: var(--app-r-full);
  padding: 11px 15px;
}
.field__icon { display: grid; place-items: center; color: var(--app-text-tertiary); }
.field__icon svg { inline-size: 20px; block-size: 20px; }
.field__hint { flex: 1 1 auto; color: var(--app-text-tertiary); font-size: 17px; }

/* ── tab bar ──────────────────────────────────────────────────────────────── */
.tabs {
  /* Measured off AppStoreAssets/Screenshots/en/6.9/01-home.png: the capsule starts
     4.9% in and the row sits ~24pt off the bottom. */
  position: absolute; inset-block-end: 24px; inset-inline: 20px;
  display: flex; align-items: center; gap: 10px; z-index: 6;
}
.tabs__capsule {
  flex: 1 1 auto;
  display: flex; align-items: stretch;
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-radius: var(--app-r-full);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 24px -8px rgba(0,0,0,0.22);
  padding: 6px;
}
.tab {
  flex: 1 1 0; display: grid; justify-items: center; gap: 2px;
  padding-block: 7px; border-radius: var(--app-r-full);
  color: var(--app-text-primary);
  transition: background 180ms ease, color 180ms ease;
}
.tab span { font-size: 12px; font-weight: 500; letter-spacing: -0.1px; }
.tab[aria-current="page"] { background: rgba(60,60,67,0.10); color: var(--app-accent); }
.tab-island {
  /* The trailing `role="search"` island. Neutral glass, not an accent pill — it is a
     tab-bar item that stands taller than the row, which is the bulge tabChromeHeight
     has always carried. */
  flex: none; inline-size: 62px; block-size: 62px; border-radius: 31px;
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 24px -8px rgba(0,0,0,0.22);
  display: grid; place-items: center; color: var(--app-text-primary);
}
.tab-island[aria-current="page"] { color: var(--app-accent); }

/* The capsule is glass: it leans on backdrop-filter to blur the list scrolling under
   it. Where that is unsupported (or GPU-disabled) an 82%-white fill is not opaque
   enough and the rows read straight through the labels, so those cases get a solid
   surface instead. Same shape, no glass, still legible — the opaque fallback rule
   the app's own spec asks for. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .tabs__capsule, .tab-island { background: #F7F8FA; }
}

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