/* invest.css — the prototype-v11 look, ported for the real app.
   Light single look; Geist self-hosted; all motion honors
   prefers-reduced-motion. No external requests. */

@font-face{font-family:Geist;font-style:normal;font-weight:100 900;
  font-display:swap;src:url(/static/fonts/geist-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:Geist;font-style:italic;font-weight:100 900;
  font-display:swap;src:url(/static/fonts/geist-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;
  font-display:swap;src:url(/static/fonts/geist-mono-latin-wght-normal.woff2) format("woff2")}

:root{
  --bg:#FAF9F6; --surface:#F2F0EB; --ink:#1C1A17; --ink2:#5F5A52; --line:#E7E4DD;
  --link:#A8322A; --gold:#B97B16; --goldText:#8A5A0B; --goldTint:#F7ECD9;
  --rise:#1F7A45; --riseTint:#E6F2EA; --fall:#B42318; --fallTint:#FBE9E7;
  --white:#FFFFFF;
  --sans:Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;margin:0}
*{box-sizing:border-box}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--link);text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--link);outline-offset:2px}

/* The app is the viewport; on wide screens it sits centered at phone width */
#app{position:relative;height:100dvh;max-width:430px;margin:0 auto;background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
@media (min-width:520px){body{background:#E9E6DF}#app{max-height:844px;margin-top:max(0px,calc((100dvh - 844px)/2));border-radius:32px;box-shadow:0 0 0 1px #D9D5CC,0 20px 60px rgba(28,26,23,.12);height:min(844px,100dvh)}}

.screen{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--bg);view-transition-name:screen}
.screen.ghost{position:absolute!important;inset:0;height:100%;box-shadow:none;z-index:5}
.top{display:flex;align-items:center;gap:6px;padding:10px 12px 6px;flex:none}
.top .ttl{font-weight:600;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{min-width:44px;min-height:44px;width:44px;height:44px;border-radius:22px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;flex:none;position:relative}
.ib.fill{background:var(--surface)}
.ib.on{background:var(--ink);color:var(--bg)}
.av{width:28px;height:28px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.av.H{background:var(--ink);color:var(--bg)} .av.C{background:var(--gold);color:var(--white)}
.av.sm{width:22px;height:22px;font-size:11px}
.pair{display:flex}.pair .av{border:2px solid var(--bg)}.pair .av+.av{margin-left:-8px}
.scroll{flex:1 1 auto;overflow-y:auto;min-height:0;scroll-behavior:smooth}
.pad{padding:0 20px}
.muted{color:var(--ink2)} .small{font-size:14px} .cap{font-size:12px}
.tag{font-family:var(--mono);font-size:11px;color:var(--ink2);letter-spacing:.01em}
.h2{font-weight:600;font-size:18px;margin:0}
.big{font-size:44px;font-weight:600;letter-spacing:-.035em;line-height:1.1}
.num{font-variant-numeric:tabular-nums}
.rise{color:var(--rise)} .fall{color:var(--fall)}
.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.gold{background:var(--goldTint);color:var(--goldText)} .pill.ink{background:var(--ink);color:var(--bg)}
.pill.green{background:var(--riseTint);color:var(--rise)} .pill.grey{background:var(--surface);color:var(--ink2)} .pill.red{background:var(--fallTint);color:var(--fall)}
.banner{display:flex;align-items:center;gap:10px;margin:4px 12px 0;padding:10px 12px;border-radius:14px;background:var(--fallTint);color:var(--fall);font-size:14px;font-weight:500;flex:none}
.banner.warn{background:var(--goldTint);color:var(--goldText)}
.banner.info{background:var(--surface);color:var(--ink2)}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1 1 auto;min-width:0}
a.lnk,button.lnk{color:var(--link);text-decoration:none;border:0;background:transparent;padding:0;font-weight:500;min-height:40px}
.btn{border:0;border-radius:14px;min-height:44px;padding:0 16px;font-weight:600;font-size:15px}
.btn.pri{background:var(--ink);color:var(--bg)} .btn.sec{background:var(--white);color:var(--ink);box-shadow:0 0 0 1px var(--line)} .btn.dan{background:var(--fall);color:var(--white)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.big{min-height:52px;width:100%;font-size:16px}
.err{color:var(--fall);font-size:14px;margin:8px 0}

/* decisions */
.decbar{margin:20px 16px 0;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:var(--ink);color:var(--bg);border:0;width:calc(100% - 32px);text-align:left}
.decbar .ic{width:40px;height:40px;border-radius:12px;background:var(--gold);display:flex;align-items:center;justify-content:center;flex:none}
.decbar .sub{font-size:14px;color:#CFCAC0}
.inbox{margin:20px 16px 0;border-radius:20px;background:var(--ink);color:var(--bg);padding:6px 0}
.inbox .ir{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;color:var(--bg);padding:10px 16px;text-align:left;min-height:56px}
.inbox .ir+.ir{border-top:1px solid rgba(250,249,246,.12)}
.inbox .logo.txt{background:#3A3631;color:var(--bg)}

/* lists */
.list{display:flex;flex-direction:column}
.li{display:flex;gap:12px;align-items:center;padding:10px 0;border:0;background:transparent;width:100%;text-align:left;min-height:44px}
.logo{display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.logo.txt{background:var(--surface);border-radius:10px;font-weight:700;font-size:14px;width:40px;height:40px}
.lav{width:40px;height:40px;border-radius:20px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.datechip{width:44px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;background:var(--surface);padding:6px 0;line-height:1.1}
.datechip span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}
.datechip b{font-size:18px;font-weight:600}
.trow{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.tiles{display:flex;gap:8px;padding:0 16px}
.tile{flex:1 1 0;background:var(--surface);border-radius:16px;padding:12px 14px;border:0;text-align:left}
.sect{padding:28px 20px 0;display:flex;align-items:center;gap:8px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.kv span:first-child{color:var(--ink2)}
.kgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 12px;padding:20px 20px 0}
.kgrid .l{font-size:13px;color:var(--ink2)} .kgrid .v{font-weight:600}
.pts{display:flex;flex-direction:column;gap:14px;padding:8px 20px 0;margin:0;list-style:none}
.pts li{display:flex;gap:12px;align-items:flex-start}
.order{padding:6px 20px 0;display:flex;flex-direction:column;gap:4px}
.orderline{font-size:14px;color:var(--ink2)}
.final{display:flex;align-items:center;gap:10px;margin:0 12px 12px;padding:12px 14px;border-radius:16px;background:var(--surface);font-size:14px;flex:none}

/* financial table (horizontal scroll, sticky first column) */
.fwrap{overflow-x:auto;margin:12px 0 0;-webkit-overflow-scrolling:touch}
.ft2{border-collapse:collapse;font-size:14px;min-width:100%}
.ft2 th,.ft2 td{padding:10px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.ft2 th{font-weight:500;color:var(--ink2);font-size:13px}
.ft2 th:first-child,.ft2 td:first-child{text-align:left;position:sticky;left:0;background:var(--bg);padding-left:20px;min-width:110px;white-space:normal}

/* charts */
svg.scrub{display:block;width:100%;height:auto;touch-action:none}
.legend{display:flex;align-items:center;gap:14px;padding:6px 20px 0;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .sw{display:inline-block;width:14px;height:2.5px;border-radius:2px}
.legend .sw.dash{height:0;border-top:2px dotted #A9A49A;border-radius:0;background:none}
.legend .sw.dash.gold{border-top-color:#B97B16}
svg.scrub .enddot,svg.scrub .cmpline{transition:opacity .15s}
.periods{display:flex;justify-content:space-between;padding:4px 14px 0;flex:none}
.periods button{border:0;background:transparent;border-radius:999px;min-width:50px;min-height:40px;font-size:14px;font-weight:600;color:var(--ink2)}
.periods button[aria-pressed="true"]{background:var(--trendTint,var(--ink));color:var(--trend,var(--bg))}

/* sign-in / enroll */
.auth{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 28px}
.auth .mark{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--ink2)}
.inp{width:100%;border:1px solid var(--line);border-radius:14px;min-height:52px;padding:0 14px;font:inherit;background:var(--white);color:var(--ink)}
.seg2{display:flex;background:var(--surface);border-radius:999px;padding:3px}
.seg2 button{border:0;background:transparent;border-radius:999px;padding:0 12px;min-height:40px;font-size:14px;font-weight:600;color:var(--ink2)}
.seg2 button[aria-pressed="true"]{background:var(--white);color:var(--ink)}

/* htmx busy indicator: none (swaps are fast and silent) */

/* ---- motion (View Transitions + class fallback) ---- */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(screen){animation:vtOut .32s cubic-bezier(.2,.8,.2,1)}
  ::view-transition-new(screen){animation:vtIn .32s cubic-bezier(.2,.8,.2,1)}
  html[data-navdir=back]::view-transition-old(screen){animation-name:vtOutBack}
  html[data-navdir=back]::view-transition-new(screen){animation-name:vtInBack}
  html[data-navdir=fade]::view-transition-old(screen){animation:vtFadeOut .2s linear}
  html[data-navdir=fade]::view-transition-new(screen){animation:vtFadeIn .22s ease-out}
  @keyframes vtIn{from{transform:translateX(100%)}to{transform:none}}
  @keyframes vtOut{to{transform:translateX(-28%);opacity:.6}}
  @keyframes vtInBack{from{transform:translateX(-28%);opacity:.6}to{transform:none;opacity:1}}
  @keyframes vtOutBack{to{transform:translateX(100%)}}
  @keyframes vtFadeIn{from{opacity:0}to{opacity:1}}
  @keyframes vtFadeOut{to{opacity:0}}
  /* fallback path (no startViewTransition): ghost clones use classes */
  .screen.in-fwd{position:relative;z-index:2;animation:inFwd .36s cubic-bezier(.2,.8,.2,1);box-shadow:-12px 0 32px rgba(28,26,23,.10)}
  .ghost.out-fwd{z-index:1;animation:outFwd .36s cubic-bezier(.2,.8,.2,1) forwards}
  .screen.in-back{animation:inBack .32s cubic-bezier(.2,.8,.2,1)}
  .ghost.out-back{z-index:3;animation:outBack .32s cubic-bezier(.2,.8,.2,1) forwards;box-shadow:-12px 0 32px rgba(28,26,23,.10)}
  .screen.in-fade{position:relative;z-index:2;animation:inFade .22s ease-out}
  .ghost.out-fade{z-index:1;animation:outFade .22s linear forwards}
  @keyframes outFade{to{opacity:0}}
  @keyframes inFwd{from{transform:translateX(100%)}to{transform:none}}
  @keyframes outFwd{to{transform:translateX(-28%);opacity:.6}}
  @keyframes inBack{from{transform:translateX(-28%);opacity:.6}to{transform:none;opacity:1}}
  @keyframes outBack{to{transform:translateX(100%)}}
  @keyframes inFade{from{opacity:0}to{opacity:1}}
  svg .drawin{stroke-dasharray:1;stroke-dashoffset:1;animation:drawin .7s cubic-bezier(.2,.8,.2,1) forwards}
  svg .fadein{opacity:0;animation:fadein .45s .35s ease-out forwards}
  @keyframes drawin{to{stroke-dashoffset:0}} @keyframes fadein{to{opacity:1}}
  .li,.btn,.tile,.decbar,.chip,.ib,.periods button,.seg2 button{transition:transform .14s ease,background-color .14s ease}
  .li:active,.btn:active,.tile:active,.decbar:active,.chip:active,.ib:active,.periods button:active,.seg2 button:active{transform:scale(.97)}
}
@media (prefers-reduced-motion:reduce){
  .screen,.ghost,svg .drawin,svg .fadein{animation:none!important;transition:none!important}
}