/* The miniature product. Agent-built dashboards wear the starter
   template's styles (Inter, the console palette written out as hex);
   the app tiles are the app's own components at their real sizes. All
   figures are illustrative. */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- A dashboard, as the starter template draws it ---------- */
.tpl {
  --t-card: #0a0a0a;
  --t-mute: #262626;
  --t-hair: rgba(255, 255, 255, 0.14);
  --t-ink: #fafafa;
  --t-ink-2: #c4c4c4;
  --t-ink-3: #a1a1a1;
  --t-good: oklch(0.82 0.11 160);
  position: relative;
  height: 452px;
  overflow: hidden;
  padding: 24px;
  background: #000;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--t-ink);
}
.tpl::after { content: ""; position: absolute; inset: auto 0 0; height: 40px; pointer-events: none; background: linear-gradient(transparent, #000); }
.tpl-head { margin-bottom: 20px; }
.tpl h1 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; }
.tpl-head p { margin-top: 2px; font-size: 13px; color: var(--t-ink-3); }
.tpl h2 { margin: 24px 0 12px; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; }
.tpl .stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tpl .stat { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--t-hair); border-radius: 8px; background: var(--t-card); }
.tpl .stat-label { font-size: 13px; color: var(--t-ink-3); }
.tpl .stat-value { margin-top: 2px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tpl .stat-value.good { color: var(--t-good); }
.tpl .card { border: 1px solid var(--t-hair); border-radius: 8px; background: var(--t-card); overflow: hidden; }
.tpl .chart { height: 188px; padding: 14px 16px 12px; }
.tpl .chart svg { display: block; overflow: visible; }
.tpl .row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.tpl .row + .row { border-top: 1px solid var(--t-hair); }
.tpl .glyph { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--t-mute); font-size: 16px; font-weight: 600; color: var(--t-ink-2); }
.tpl .glyph.cat { background: var(--c); color: #fff; }
.tpl .glyph .ico { width: 16px; height: 16px; stroke-width: 2; }
.tpl .names { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tpl .name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl .sub { margin-top: 1px; color: var(--t-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl .bal { text-align: right; font-variant-numeric: tabular-nums; }

/* Chart marks: the console's monochrome (a white line over a fading
   white wash, gray rules), text in the page's Inter. */
.ch-grid { stroke: var(--t-hair); stroke-width: 1; shape-rendering: crispEdges; }
.ch-axis { font-family: "Inter", -apple-system, sans-serif; font-size: 11px; fill: var(--t-ink-3); font-variant-numeric: tabular-nums; }
.ch-line { fill: none; stroke: var(--t-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-proj { stroke: var(--t-ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ch-today { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.ch-tag { font-family: "Inter", -apple-system, sans-serif; font-size: 11px; font-weight: 500; fill: var(--t-ink-3); }
.ch-tag.hi { fill: var(--t-ink); }
.ch-dot { fill: var(--t-ink); }
.ch-halo { fill: rgba(255, 255, 255, 0.14); }

/* The dashboard settles in: each block rises a few pixels; the lines
   wipe in, then their marks. */
.tpl > *:not(.stat-grid), .tpl .stat { opacity: 0; transform: translateY(8px); animation: tpl-in 560ms var(--spring) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
.tpl.is-leaving > *:not(.stat-grid), .tpl.is-leaving .stat { animation: tpl-out 180ms var(--ease) forwards; }
@keyframes tpl-in { to { opacity: 1; transform: none; } }
@keyframes tpl-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-4px); } }
.tpl .ch-line { clip-path: inset(-4px 100% -4px -4px); animation: wipe 900ms var(--out) 420ms forwards; }
.tpl .ch-proj { animation-duration: 1000ms; animation-delay: 1200ms; }
.tpl .ch-area, .tpl .ch-mark { opacity: 0; animation: fade 600ms var(--out) 760ms forwards; }
.tpl .ch-mark.late { animation-delay: 2000ms; }
.tpl.no-anim .ch-line, .tpl.no-anim .ch-area, .tpl.no-anim .ch-mark { animation: none; clip-path: none; opacity: 1; }
@keyframes wipe { to { clip-path: inset(-4px -4px -4px -4px); } }
@keyframes fade { to { opacity: 1; } }

/* ---------- App tiles ---------- */
/* A typed field: the words, the caret right after them, and the
   placeholder under the caret until the first key. The caret holds
   solid while keys land and blinks only when the typing rests. */
.ui-field-in { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; height: 100%; }
.ui-field-in .ui-field-text, .ui-field-in .fp-input { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
.ui-field-ph { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--ui-ink-3); white-space: nowrap; pointer-events: none; }
.ui-field-in > :first-child:not(:empty) ~ .ui-field-ph { visibility: hidden; }
.v-caret { flex: none; width: 1.5px; height: 17px; margin-left: 1px; border-radius: 1px; background: var(--ui-ink); animation: caret 1.06s steps(1) infinite; }
.is-keying .v-caret { animation: none; }
@keyframes caret { 50% { opacity: 0; } }

/* Transactions: the phone list's day groups. Search filters as it
   types: a row that stops matching folds away. */
.vis-txn { padding: 20px; }
.vis-txn .ui-field .ui-kbd { margin-left: auto; }
.vis-txn.is-cropped::after { transition: opacity 400ms var(--ui-out); }
.vis-txn.is-filtered::after { opacity: 0; }
.ph-day { margin: 18px 0 10px; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; }
.ph-list { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-card); }
.ph-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px 16px; }
.ph-row + .ph-row, .ph-item + .ph-item .ph-row { border-top: 1px solid var(--ui-line); }
.ph-item { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 420ms var(--ui-spring); }
.ph-clip { min-height: 0; overflow: hidden; }
.ph-clip .ph-row { transition: opacity 220ms var(--ui-out); }
.ph-item.is-out { grid-template-rows: 0fr; }
.ph-item.is-out .ph-row { opacity: 0; }
.ph-id, .ph-amt { display: flex; flex-direction: column; min-width: 0; }
.ph-name { font-size: 15px; line-height: 20px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-cat { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px; letter-spacing: -0.01em; color: var(--ui-ink-2); white-space: nowrap; }
.ph-amt { align-items: flex-end; }
.ph-amt .num { font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--ui-ink-2); }
.ph-acct { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 20px; letter-spacing: -0.01em; color: var(--ui-ink-3); }
.ui-glyph.sm { width: 16px; height: 16px; font-size: 7px; letter-spacing: 0.28px; }

/* Spending: the page's head and its "Where it went" list. */
.vis-spend { padding: 20px; }
.sp-head { display: flex; align-items: baseline; gap: 6px; }
.sp-title { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; }
.sp-when { font-size: 16px; color: var(--ui-ink-3); }
.sp-total { margin-top: 2px; font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.03em; }
.sp-line { margin-top: 4px; font-size: 16px; line-height: 24px; }
.sp-line .ok { color: var(--ui-ok-text); }
.sp-list { margin-top: 16px; overflow: hidden; }
.sp-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; height: 44px; padding: 0 16px; }
.sp-row + .sp-row { border-top: 1px solid var(--ui-line); }
.sp-row .num { color: var(--ui-ink-2); }

/* Accounts: the net worth card. */
.vis-acct { padding: 20px; }
.nw { padding: 24px 24px 20px; }
.nw-label { display: block; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ui-ink-2); }
.nw-total { display: block; margin-top: 8px; font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -1.2px; }
.nw-total .cents { font-size: 24px; line-height: 1; letter-spacing: -0.5px; color: var(--ui-ink-3); }
.nw-sub { display: block; margin-top: 6px; color: var(--ui-ink-2); }
.nw-sub .ok { color: var(--ui-ok-text); }
.nw-mix { display: flex; gap: 2px; height: 8px; margin-top: 22px; overflow: hidden; border-radius: 96px; }
.nw-mix i { width: var(--w); background: var(--c); }
.nw-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--ui-ink-3); }
.nw-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nw-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.nw-legend b { font-weight: 400; color: var(--ui-ink-2); }

/* Find: the palette, as a popover over the page. */
.vis-find { padding: 20px; }
.fp { overflow: hidden; border-radius: 8px; background: var(--ui-popover); box-shadow: var(--ui-shadow-menu), var(--ui-shadow-popover); }
.fp-field { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; color: var(--ui-ink-3); font-size: 16px; }
.fp-field .ico { width: 16px; height: 16px; stroke-width: 2; flex: none; }
.fp-input { color: var(--ui-ink); }
.fp-field .ui-kbd { margin-left: auto; }
/* The results open under the field once the query lands, Spotlight's
   way: the palette grows, its groups settle in one after another. */
.fp-res { display: grid; grid-template-rows: 0fr; border-top: 1px solid transparent; transition: grid-template-rows 460ms var(--ui-spring), border-color 200ms var(--ui-out); }
.vis-find.is-typed .fp-res { grid-template-rows: 1fr; border-top-color: var(--ui-line); }
.fp-res-clip { min-height: 0; overflow: hidden; }
.fp-list { padding: 0 8px 8px; }
.fp-list > * { transition: opacity 300ms var(--ui-out), transform 460ms var(--ui-spring); transition-delay: calc(var(--i, 0) * 40ms + 80ms); }
.vis-find:not(.is-typed) .fp-list > * { opacity: 0; transform: translateY(-4px); transition-delay: 0s; }
.fp-label { padding: 12px 10px 4px; font-size: 13px; line-height: 19.5px; color: var(--ui-ink-3); }
.fp-item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 6px; }
.fp-item .ico { width: 16px; height: 16px; stroke-width: 2; flex: none; color: var(--ui-ink-2); }
.fp-item.sel { background: var(--ui-hover); }
.fp-name { white-space: nowrap; }
.fp-sub { min-width: 0; color: var(--ui-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Rules: a transaction's own page, where a rule's work shows. */
.vis-rule { padding: 20px; }
.rl-top { display: flex; flex-direction: column; }
.rl-amt { font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -0.03em; }
.rl-name { margin-top: 4px; font-size: 15px; line-height: 20px; font-weight: 500; }
.rl-card { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 12px 16px; }
.rl-card + .rl-card { margin-top: 10px; }
.rl-k { font-size: 13px; line-height: 18px; color: var(--ui-ink-2); }
.rl-v { line-height: 21px; }
.rl-cat { display: inline-flex; align-items: center; gap: 12px; }
.rl-cat .ui-cat { border-radius: 6px; }

/* Phone: the app at phone width, drawn at its real size and set in a
   phone scaled to the tile. */
.vis-phone { display: grid; justify-items: center; }
.v-phone {
  position: relative;
  width: 226px;
  height: 460px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 36px;
  background: #000;
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.16), 0 0 0 6px #141414, 0 0 0 7px oklch(1 0 0 / 0.1), 0 30px 60px oklch(0 0 0 / 0.6);
}
.v-ph-island { position: absolute; z-index: 2; top: 9px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 999px; background: #000; box-shadow: 0 0 0 1px oklch(1 0 0 / 0.05); }
.v-ph-screen { position: absolute; top: 0; left: 0; width: 390px; transform: scale(0.5795); transform-origin: top left; padding-top: 54px; }
.ph-bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; }
.ph-slash { width: 1px; height: 18px; margin: 0 2px; background: oklch(1 0 0 / 0.2); transform: rotate(20deg); }
.ph-scope { font-size: 15px; font-weight: 500; }
.ph-acts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ph-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 96px; border: 1px solid var(--ui-line); color: var(--ui-ink-3); }
.ph-av { width: 32px; height: 32px; margin-left: 4px; font-size: 14px; }
.ph-btn .ico { width: 18px; height: 18px; stroke-width: 2; }
.ph-tabs { display: flex; height: 44px; padding: 0 4px; border-bottom: 1px solid var(--ui-line); font-size: 15px; letter-spacing: -0.01em; color: var(--ui-ink-2); white-space: nowrap; overflow: hidden; }
.ph-tabs span { position: relative; display: inline-flex; align-items: center; padding: 0 12px; }
.ph-tabs span.on { color: var(--ui-ink); }
.ph-tabs span.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--ui-ink); }
.ph-body { padding: 12px 16px 0; }
.ph-body .ph-day { margin-top: 10px; }