/* Samboard design system — from the Fable 5 design handoff (2026-07-04).
   Dark premium fintech look. Space Grotesk, indigo accent, green gain / red loss. */

:root {
  --bg:#0B1120; --surface:#141C30; --surface2:#0F1729; --surface3:#1B2540;
  --line:#26314C; --lineSoft:#1D2740;
  --accent:#7C83FF; --accentPress:#6870FF; --accentDim:rgba(124,131,255,.15);
  --gain:#3DDC97; --gainDim:rgba(61,220,151,.13);
  --loss:#FF6B6B; --lossDim:rgba(255,107,107,.12);
  --warn:#F5B544; --warnDim:rgba(245,181,68,.13);
  --ink:#EAF0FF; --ink2:#AEB9D4; --ink3:#7683A1; --ink4:#566080;
  --r-tile:16px; --r-card:18px; --r-input:12px; --r-pill:999px;
  --shadow-card:0 30px 60px -30px rgba(0,0,0,.7);
  --shadow-accent:0 14px 30px -12px rgba(124,131,255,.7);
  --shadow-pop:0 22px 55px -28px rgba(124,131,255,.5);
  --dur-fast:150ms;
  --dur-base:200ms;
  --dur-slow:300ms;
  --dur-xslow:400ms;
  --dur-thinking:calc(var(--dur-xslow) * 3.5);
  --delay-dot:var(--dur-base);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-io:cubic-bezier(0.4,0,0.2,1);
  --ease-in:cubic-bezier(0.4,0,1,1);
}

* { box-sizing:border-box; scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar { height:0; width:0; display:none; }
html, body { margin:0; padding:0; }
body {
  min-height:100vh;
  background:
    radial-gradient(900px 520px at 100% -6%, rgba(124,131,255,.12), transparent 58%),
    radial-gradient(760px 520px at -12% 108%, rgba(61,220,151,.055), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background:rgba(124,131,255,.30); color:var(--ink); }
a { color:inherit; text-decoration:none; }
.num, .money { font-variant-numeric:tabular-nums; }
h1,h2,h3 { letter-spacing:-.022em; margin:0; }
.gain { color:var(--gain); } .loss { color:var(--loss); } .warn { color:var(--warn); }
.muted { color:var(--ink3); } .muted2 { color:var(--ink2); }
.label { color:var(--ink3); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }

@keyframes sam-enter { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
@keyframes toast-enter { from{opacity:0; transform:translate(-50%, 8px);} to{opacity:1; transform:translateX(-50%);} }
@keyframes blink { 0%,100%{opacity:.35;} 50%{opacity:1;} }
@keyframes spin { to{transform:rotate(360deg);} }
.rise, .swap-enter { animation:sam-enter var(--dur-slow) var(--ease-out) both; }

.tiles.swap-enter { animation:none; }
.tiles.swap-enter > .tile { animation:sam-enter var(--dur-slow) var(--ease-out) both; }
.tiles.swap-enter > .tile:nth-child(2) { animation-delay:calc(var(--dur-fast) / 3); }
.tiles.swap-enter > .tile:nth-child(3) { animation-delay:calc(var(--dur-fast) * 2 / 3); }
.tiles.swap-enter > .tile:nth-child(4) { animation-delay:var(--dur-fast); }
.tiles.swap-enter > .tile:nth-child(5) { animation-delay:calc(var(--dur-fast) * 4 / 3); }
.tiles.swap-enter > .tile:nth-child(n+6) { animation-delay:calc(var(--dur-fast) * 5 / 3); }

#pl-content > .swap-enter:nth-child(2) { animation-delay:calc(var(--dur-fast) / 3); }
#pl-content > .swap-enter:nth-child(4) { animation-delay:calc(var(--dur-fast) * 2 / 3); }
#pl-content > .swap-enter:nth-child(n+5) { animation-delay:var(--dur-fast); }

/* Page settle: reveal top-level sections in quick, capped steps. */
.sam-main > .stack.rise { animation:none; }
.sam-main > .stack > * { animation:sam-enter var(--dur-slow) var(--ease-out) both; }
.sam-main > .stack > :nth-child(2) { animation-delay:calc(var(--dur-fast) / 3); }
.sam-main > .stack > :nth-child(3) { animation-delay:calc(var(--dur-fast) * 2 / 3); }
.sam-main > .stack > :nth-child(4) { animation-delay:var(--dur-fast); }
.sam-main > .stack > :nth-child(5) { animation-delay:calc(var(--dur-fast) * 4 / 3); }
.sam-main > .stack > :nth-child(n+6) { animation-delay:calc(var(--dur-fast) * 5 / 3); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto !important; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .rise, .swap-enter, .turn, .wf, .wf-row, .toast, .typing span,
  .tiles.swap-enter > .tile,
  .sam-main > .stack > * { animation:none !important; }
  .rise, .swap-enter, .turn, .wf, #ia-typing.htmx-indicator,
  .send:active, .chip:active, .badge-accent:active, .side-link:active, .tab:active,
  .tab-ia:active .tab-ia-btn, .card[hx-post]:active, .tile.tappable:active,
  .icon-btn:active, .pill:active, .btn:active, button:active, a.row:active,
  summary:active, button.wf-row:active { transform:none !important; }
}

/* ---------- Layout ---------- */
/* Phone: column (topbar above main). Desktop: row (sidebar beside main). */
.sam-layout { display:flex; flex-direction:column; min-height:100vh; }
.sam-main { flex:1; width:100%; min-width:0; max-width:520px; margin:0 auto; padding:18px 16px 96px; }

/* Top bar (phone) */
.sam-topbar {
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top));
  background:rgba(11,17,32,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--lineSoft);
}
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; }
.brand .accent { color:var(--accent); }
.brand-mark { width:30px; height:30px; border-radius:9px; background:var(--accentDim);
  display:flex; align-items:center; justify-content:center; }
.brand-mark svg { width:17px; height:17px; }
.icon-btn { width:38px; height:38px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface2); color:var(--ink2); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.icon-btn svg { width:18px; height:18px; }

/* Bottom tab bar (phone) */
.sam-tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:space-around; align-items:center;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom)); gap:4px;
  background:rgba(11,17,32,.92); backdrop-filter:blur(14px); border-top:1px solid var(--lineSoft);
}
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1;
  color:var(--ink3); font-size:.62rem; font-weight:600; padding:4px 0; }
.tab svg { width:22px; height:22px; }
.tab.active { color:var(--ink); } .tab.active svg { color:var(--accent); }
.tab-ia { margin-top:-18px; }
.tab-ia .tab-ia-btn {
  width:52px; height:52px; border-radius:16px; background:var(--accent); color:#0B1120;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-accent); }
.tab-ia .tab-ia-btn svg { width:26px; height:26px; }

/* Sidebar (desktop) */
.sam-sidebar { display:none; }

@media (min-width:1024px) {
  .sam-layout { flex-direction:row; }
  .sam-topbar, .sam-tabbar { display:none; }
  .sam-sidebar {
    display:flex; flex-direction:column; gap:6px; width:250px; flex:0 0 250px;
    position:sticky; top:0; height:100vh; padding:22px 16px; border-right:1px solid var(--lineSoft);
    background:rgba(15,23,41,.5);
  }
  .sam-sidebar .brand { padding:6px 8px 16px; }
  .side-link { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
    color:var(--ink2); font-weight:600; font-size:.92rem; }
  .side-link svg { width:19px; height:19px; color:var(--ink3); }
  .side-link:hover { background:var(--surface2); color:var(--ink); }
  .side-link.active { background:var(--accentDim); color:var(--ink); }
  .side-link.active svg { color:var(--accent); }
  .side-group { padding:16px 12px 5px; font-size:.66rem; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--ink4); }
  .side-group:first-of-type { padding-top:4px; }
  .side-spacer { flex:1; }
  .sam-main { max-width:1080px; margin:0; padding:30px 34px 40px; }
}

/* ---------- Cards, tiles ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:16px; box-shadow:var(--shadow-card); }
.card + .card, .stack > * + * { margin-top:12px; }
.stack { display:flex; flex-direction:column; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(158px,1fr)); gap:12px; }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-tile);
  padding:16px; box-shadow:var(--shadow-card); position:relative; }
.tile .label { display:flex; align-items:center; justify-content:space-between; }
.tile .val { font-size:1.5rem; font-weight:700; margin-top:6px; letter-spacing:-.02em; }
.tile .delta { font-size:.75rem; font-weight:600; margin-top:6px; }
.tile.tappable { cursor:pointer; }
.tile .expand { color:var(--ink4); width:15px; height:15px; }
.tile.glow-gain { box-shadow:var(--shadow-card), 0 0 0 1px rgba(61,220,151,.4) inset; }
.tile.glow-loss { box-shadow:var(--shadow-card), 0 0 0 1px rgba(255,107,107,.4) inset; }

/* KPI mini cards */
.kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px; }
.kpi .k-val { font-size:1.15rem; font-weight:700; margin-top:4px; }

/* ---------- Pills, buttons, badges ---------- */
.pills { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.pill { white-space:nowrap; padding:9px 15px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--surface2); color:var(--ink2); font-size:.85rem; font-weight:600; cursor:pointer; }
.pill:hover { border-color:#33406b; color:var(--ink); }
.pill.active { background:var(--accent); color:#0B1120; border-color:var(--accent); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px;
  border-radius:var(--r-input); font-weight:600; font-size:.9rem; cursor:pointer; border:1px solid transparent; }
.btn svg { width:16px; height:16px; }
.btn-accent { background:var(--accent); color:#0B1120; box-shadow:var(--shadow-accent); }
.btn-accent:hover { background:var(--accentPress); }
.btn-ghost { background:var(--surface2); color:var(--ink2); border-color:var(--line); }
.btn-ghost:hover { color:var(--ink); border-color:#33406b; }
.btn-block { width:100%; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-pill);
  font-size:.68rem; font-weight:700; letter-spacing:.02em; }
.badge-gain { background:var(--gainDim); color:var(--gain); }
.badge-loss { background:var(--lossDim); color:var(--loss); }
.badge-warn { background:var(--warnDim); color:var(--warn); }
.badge-accent { background:var(--accentDim); color:var(--accent); }

/* Quiet, shared interaction language: tonal hover, compact press. */
.icon-btn, .pill, .btn, .send, .chip, .badge-accent, .brand, .side-link, .tab, .tab-ia-btn,
.card[hx-post], .tile.tappable, button.wf-row, button, a.row, summary {
  transition:background-color var(--dur-fast) var(--ease-io), color var(--dur-fast) var(--ease-io),
    border-color var(--dur-fast) var(--ease-io), transform var(--dur-fast) var(--ease-io),
    box-shadow var(--dur-fast) var(--ease-io), opacity var(--dur-fast) var(--ease-io);
  -webkit-tap-highlight-color:transparent;
  transform-origin:center;
}
.icon-btn:active, .pill:active, .btn:active, .send:active, .chip:active, .badge-accent:active, .brand:active,
.side-link:active, .tab:active, .card[hx-post]:active, .tile.tappable:active,
button.wf-row:active, button:active, a.row:active, summary:active { transform:scale(.97); }
.tab-ia:active { transform:none; }
.tab-ia:active .tab-ia-btn { transform:scale(.97); box-shadow:0 9px 22px -12px rgba(124,131,255,.65); }
.icon-btn:focus-visible, .pill:focus-visible, .btn:focus-visible, .send:focus-visible,
.chip:focus-visible, .badge-accent:focus-visible, .brand:focus-visible, .side-link:focus-visible, .tab:focus-visible,
.card[hx-post]:focus-visible, .tile.tappable:focus-visible, button.wf-row:focus-visible,
button:focus-visible, a.row:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px;
}
@media (hover:hover) {
  .icon-btn:hover, .btn-ghost:hover, .pill:hover, button.wf-row:hover { background-color:var(--surface3); }
  .btn-accent:hover, .send:hover, .tab-ia-btn:hover { background-color:var(--accentPress); }
  .chip:hover { color:var(--ink); border-color:#33406b; background:var(--surface3); }
  .badge-accent:hover { background:rgba(124,131,255,.22); }
  .tab:hover { color:var(--ink2); }
  .side-link:hover, .card[hx-post]:hover, .tile.tappable:hover { border-color:#33406b; }
  a.row:hover, summary:hover { background-color:rgba(124,131,255,.055); }
}

/* ---------- Alerts ---------- */
.alert { border-radius:var(--r-card); padding:14px 16px; border:1px solid var(--line); }
.alert-loss { background:var(--lossDim); border-color:rgba(255,107,107,.4); border-left:3px solid var(--loss); }
.alert-title { font-weight:700; }

/* ---------- Waterfall ---------- */
.wf { animation:sam-enter var(--dur-slow) var(--ease-out) both; box-shadow:var(--shadow-pop), var(--shadow-card); }
.wf-row { display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--lineSoft); }
.wf > div > .wf-row { animation:sam-enter var(--dur-slow) var(--ease-out) both; }
.wf > div > .wf-row:nth-child(2) { animation-delay:calc(var(--dur-fast) / 3); }
.wf > div > .wf-row:nth-child(3) { animation-delay:calc(var(--dur-fast) * 2 / 3); }
.wf > div > .wf-row:nth-child(4) { animation-delay:var(--dur-fast); }
.wf > div > .wf-row:nth-child(5) { animation-delay:calc(var(--dur-fast) * 4 / 3); }
.wf > div > .wf-row:nth-child(n+6) { animation-delay:calc(var(--dur-fast) * 5 / 3); }
.wf-row:last-child { border-bottom:0; }
.wf-row .wf-amt { font-weight:600; }
.wf-row .wf-sub { color:var(--ink3); text-align:right; font-size:.85rem; }
.wf-bar { grid-column:1 / -1; height:6px; border-radius:4px; background:var(--surface3); overflow:hidden; margin-top:2px; }
.wf-bar > span { display:block; height:100%; border-radius:4px; }
.wf-row.wf-total { font-weight:700; border-top:1px solid var(--line); border-bottom:0; padding-top:13px; }
button.wf-row { width:100%; text-align:left; background:none; border-left:0; border-right:0; border-top:0; cursor:pointer; }

/* ---------- Inputs ---------- */
.input, input[type=text], input[type=password], input[type=number], input[type=date], select {
  width:100%; padding:11px 14px; border-radius:var(--r-input); border:1px solid var(--line);
  background:var(--surface2); color:var(--ink); font-family:inherit; font-size:16px; line-height:1.2;
  transition:border-color var(--dur-base) var(--ease-io), background-color var(--dur-base) var(--ease-io),
    box-shadow var(--dur-base) var(--ease-io); }
.input::placeholder { color:var(--ink4); }
input:focus, select:focus { outline:none; border-color:var(--accent); background:var(--surface); caret-color:var(--accent);
  box-shadow:0 0 0 3px rgba(124,131,255,.14); }
label.field { display:block; font-size:.8rem; color:var(--ink3); margin-bottom:5px; font-weight:600; }

/* ---------- List rows ---------- */
.list { display:flex; flex-direction:column; }
.row { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--lineSoft);
  transition:background-color var(--dur-fast) var(--ease-io); }
.row:last-child { border-bottom:0; }
.row .r-main { flex:1; min-width:0; }
.row .r-title { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .r-sub { color:var(--ink3); font-size:.78rem; margin-top:2px; }
.row .r-right { text-align:right; white-space:nowrap; }
table tbody tr { transition:background-color var(--dur-fast) var(--ease-io); }
@media (hover:hover) {
  .row:hover, table tbody tr:hover { background-color:rgba(124,131,255,.055); }
}

/* ---------- AI chat ---------- */
.chat-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.chat-avatar { width:46px; height:46px; border-radius:13px; background:var(--accentDim);
  display:flex; align-items:center; justify-content:center; color:var(--accent); }
.chat-avatar svg { width:24px; height:24px; }
.ask { display:flex; gap:10px; }
.ask input { flex:1; }
.ask .send { width:52px; height:48px; border-radius:12px; background:var(--accent); color:#0B1120;
  border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-accent); }
.ask .send svg { width:20px; height:20px; }
.chips { display:flex; gap:8px; overflow-x:auto; margin:12px 0; }
.chip { white-space:nowrap; padding:8px 13px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--surface2); color:var(--ink2); font-size:.82rem; font-weight:600; cursor:pointer; }
.turn { margin-top:16px; animation:sam-enter var(--dur-slow) var(--ease-out) both;
  transform-origin:center top; }
.bubble-q { max-width:80%; margin-left:auto; background:var(--accent); color:#0B1120;
  padding:11px 15px; border-radius:16px 16px 5px 16px; font-weight:600; }
.answer { display:flex; gap:10px; margin-top:12px; }
.answer .chat-avatar { width:34px; height:34px; border-radius:10px; flex:0 0 34px; }
.answer .chat-avatar svg { width:18px; height:18px; }
.bubble-a { background:var(--surface); border:1px solid var(--line); border-radius:5px 16px 16px 16px;
  padding:13px 15px; color:var(--ink); box-shadow:var(--shadow-card); }
.data-card { margin-top:10px; background:var(--surface2); border:1px solid var(--line); border-radius:14px; padding:14px; }
.data-card .dc-row { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--lineSoft); }
.data-card .dc-row:last-child { border-bottom:0; }
.data-card .dc-row .dc-val { font-weight:700; }
.typing { display:inline-flex; gap:5px; padding:14px; }
.typing span { width:7px; height:7px; border-radius:50%; background:var(--ink3);
  animation:blink var(--dur-thinking) var(--ease-io) infinite; }
.typing span:nth-child(2){ animation-delay:var(--delay-dot); }
.typing span:nth-child(3){ animation-delay:calc(var(--delay-dot) * 2); }
#ia-typing.htmx-indicator { order:-1; display:none; opacity:0;
  transform:translateY(8px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out),
    display var(--dur-slow) allow-discrete; }
#ia-typing.htmx-request, .htmx-request #ia-typing { display:flex; opacity:1; transform:none; }
@starting-style {
  #ia-typing.htmx-request, .htmx-request #ia-typing { opacity:0; transform:translateY(8px); }
}
#ia-typing .bubble-a { padding:13px 16px; align-items:center; min-height:0; }

/* ---------- Toast ---------- */
.toast { position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:60;
  background:var(--gainDim); border:1px solid rgba(61,220,151,.4); color:var(--gain);
  padding:11px 18px; border-radius:var(--r-pill); font-weight:600; font-size:.85rem;
  animation:toast-enter var(--dur-slow) var(--ease-out) both; transform-origin:center bottom; }

/* ---------- Chart ---------- */
.chart-wrap { height:150px; display:flex; align-items:flex-end; gap:4px; padding-top:8px; }
.chart-bar { flex:1; background:var(--surface3); border-radius:3px 3px 0 0; min-height:2px; }

.section-title { font-weight:700; font-size:1.05rem; margin:22px 0 12px; }
.page-title { font-size:1.55rem; font-weight:700; }
.sub { color:var(--ink3); font-size:.85rem; margin-top:3px; }