/* Timelapse — white canvas, restrained gray rules, orange accent.
   Dense data, sparse interface (timelapse_system_design.md §0, §30).
   No gradients, no heavy shadows, no chart junk. */

:root{
  --canvas:#ffffff;
  --canvas-warm:#fdfcfb;
  --panel:#ffffff;
  --line:#e9e7e4;
  --line-soft:#f2f0ed;
  --ink:#16161a;
  --ink-mid:#5c5f66;
  --ink-soft:#8b8f98;
  --accent:#f26a1b;
  --accent-soft:#fff4ec;
  --accent-line:#f9d9c3;
  --pos:#0f9d58;
  --neg:#e0342b;
  --rail-w:196px;
  --rail-w-open:196px;
  --rail-w-icon:58px;
  --radius:9px;
  /* Notch / home-indicator insets. Zero everywhere that has no safe area. */
  --sa-l:env(safe-area-inset-left,0px);
  --sa-r:env(safe-area-inset-right,0px);
  --sa-b:env(safe-area-inset-bottom,0px);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  background:var(--canvas-warm);
  color:var(--ink);
  font-size:13px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* dvh, not vh: on mobile Safari/Chrome the collapsing address bar makes 100vh
   taller than the visible viewport, which cuts off the bottom of every page. */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden}

/* ── Left rail ─────────────────────────────────────────────────────────── */
/* One element, two behaviours: an in-flow column that can shrink to icons at
   desktop widths, and an off-canvas drawer below --bp-rail. The width is driven
   entirely by --rail-w so the collapse is a single custom-property swap. */
.rail{
  width:var(--rail-w);flex:0 0 var(--rail-w);
  background:var(--canvas);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:14px 10px;
  padding-left:max(10px,var(--sa-l));
  transition:flex-basis .18s ease,width .18s ease;
  overflow:hidden;
}
/* `rail-mini` is the single source of truth for "the rail is showing icons
   only". On desktop JS sets it from the user's stored preference; on a phone it
   tracks whether the drawer is shut. Every icon-only rule keys off this one
   class, so the two states cannot drift apart. */
body.rail-mini{--rail-w:var(--rail-w-icon)}
body.rail-mini .rail{padding-left:9px;padding-right:9px}
body.rail-mini .brand-name,
body.rail-mini .nav a .lbl,
body.rail-mini .tag-sim{display:none}
body.rail-mini .nav a{justify-content:center;padding-left:0;padding-right:0}
body.rail-mini .rail-head{flex-direction:column;gap:12px;padding-bottom:14px}
body.rail-mini .brand{padding:0}

/* Chevron folds it away; hamburger brings it back. Never both. */
.rail-toggle .i-burger{display:none}
body.rail-mini .rail-toggle .i-chevron{display:none}
body.rail-mini .rail-toggle .i-burger{display:block}

.rail-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 2px 16px;
}
.rail-toggle{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;
  background:transparent;border:none;border-radius:7px;
  color:var(--ink-soft);cursor:pointer;
}
.rail-toggle:hover{background:var(--line-soft);color:var(--ink)}

.scrim{
  position:fixed;inset:0;background:rgba(22,22,26,.38);
  z-index:55;opacity:0;pointer-events:none;transition:opacity .18s ease;
}

.brand{display:flex;align-items:center;gap:9px;padding:4px 6px;white-space:nowrap;min-width:0}
.brand-mark{
  width:22px;height:22px;border-radius:50%;
  background:var(--accent);position:relative;flex:0 0 22px;
}
.brand-mark::after{
  content:"";position:absolute;inset:6px 6px auto auto;
  width:8px;height:8px;border-radius:50%;background:#fff;
}
.brand-name{font-weight:650;font-size:16px;letter-spacing:-.2px}

.nav{display:flex;flex-direction:column;gap:1px}
.nav a{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:7px;
  color:var(--ink-mid);font-weight:500;font-size:13.5px;
}
.nav a .ico{width:16px;flex:0 0 16px;text-align:center;font-size:13px;opacity:.75}
.nav a .lbl{white-space:nowrap}
.nav a:hover:not(.disabled){background:var(--line-soft);color:var(--ink)}
.nav a.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav a.active .ico{opacity:1}
.nav a.disabled{opacity:.45;cursor:default}
.rail-sep{height:1px;background:var(--line);margin:14px 8px}

/* ── Top bar ───────────────────────────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  height:54px;flex:0 0 54px;
  background:var(--canvas);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 20px;padding-right:max(20px,var(--sa-r));position:relative;
}
.search{width:min(420px,42vw)}
.search input{
  width:100%;padding:8px 12px;font:inherit;
  border:1px solid var(--line);border-radius:8px;background:var(--canvas-warm);
  color:var(--ink);outline:none;
}
.search input:focus{border-color:var(--accent-line);background:#fff}
.topbar-right{position:absolute;right:20px;display:flex;align-items:center;gap:14px}
.live{
  font-size:11.5px;font-weight:650;letter-spacing:.3px;color:var(--ink-mid);
  display:flex;align-items:center;gap:6px;
}
.live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--pos);
}

/* ── View ──────────────────────────────────────────────────────────────── */
.view{flex:1;overflow:auto;padding:20px 22px 26px}
.loading{color:var(--ink-soft);padding:40px;text-align:center}
.page-head{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.page-head h1{font-size:19px;font-weight:650;letter-spacing:-.3px}
.page-head .asof{font-size:12px;color:var(--ink-soft)}
.page-sub{font-size:12.5px;color:var(--ink-soft);margin-bottom:16px}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:start}
.layout-wide{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}

.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
.panel + .panel{margin-top:14px}
.panel-head{
  padding:11px 14px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.panel-title{font-size:13px;font-weight:620}
.panel-title small{font-weight:500;color:var(--ink-soft);margin-left:6px}
.panel-body{padding:12px 14px}
.scroll-x{overflow-x:auto}

/* ── Tables ────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
thead th{
  font-size:11px;font-weight:600;color:var(--ink-soft);
  text-align:right;padding:9px 10px;border-bottom:1px solid var(--line);
  white-space:nowrap;position:sticky;top:0;background:var(--panel);
}
thead th:first-child{text-align:left}
tbody td{
  padding:6.5px 10px;text-align:right;font-size:12.5px;
  border-bottom:1px solid var(--line-soft);white-space:nowrap;
}
tbody td:first-child{text-align:left;font-weight:600}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--canvas-warm)}
.group-row td{
  font-size:10.5px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-soft);padding:12px 10px 5px;background:transparent;
}
.group-row:hover td{background:transparent}
.num{font-variant-numeric:tabular-nums}
.pos{color:var(--pos)}
.neg{color:var(--neg)}
.muted{color:var(--ink-soft)}
.dash{color:#c9ccd2}

/* ── Rail cards ────────────────────────────────────────────────────────── */
.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 13px;
}
.card + .card{margin-top:12px}
.card h3{font-size:12px;font-weight:620;margin-bottom:9px}
.card h3 small{font-weight:500;color:var(--ink-soft);margin-left:5px}
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:4.5px 0;font-size:12.5px}
.kv .k{color:var(--ink-mid)}
.kv .v{font-weight:620;font-variant-numeric:tabular-nums}
.ranklist{display:flex;flex-direction:column;gap:1px}
.rankrow{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:baseline;padding:4px 0;font-size:12.5px}
.rankrow .i{color:var(--ink-soft);font-size:11px}
.rankrow .t{font-weight:600}
.rankrow .v{font-variant-numeric:tabular-nums;font-weight:600}
.sub-label{font-size:10.5px;font-weight:650;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-soft);margin:10px 0 4px}
.sub-label:first-child{margin-top:0}

/* ── Metric tiles ──────────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.tile{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 13px;
}
.tile .label{font-size:11px;color:var(--ink-soft);margin-bottom:5px}
.tile .value{font-size:19px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.tile .value.sm{font-size:16px}
.tile .note{font-size:11px;color:var(--ink-soft);margin-top:3px}

/* ── Controls ──────────────────────────────────────────────────────────── */
.controls{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
select,.btn{
  font:inherit;font-size:12.5px;padding:7px 11px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel);
  color:var(--ink);cursor:pointer;outline:none;
}
select:focus,.btn:focus{border-color:var(--accent-line)}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.seg button{
  font:inherit;font-size:12px;padding:6.5px 10px;border:none;background:transparent;
  color:var(--ink-mid);cursor:pointer;border-right:1px solid var(--line-soft);
}
.seg button:last-child{border-right:none}
.seg button:hover{background:var(--line-soft)}
.seg button.on{background:var(--accent-soft);color:var(--accent);font-weight:640}
.badge{
  font-size:11px;padding:3px 8px;border-radius:20px;
  background:var(--line-soft);color:var(--ink-mid);font-weight:560;
}
.badge.warn{background:#fff6e8;color:#a9670a}
/* Simulated-data marker. Deliberately loud: the PnL page shows a constructed
   book, and on a public site that must not read as a track record. */
.badge.sim{
  background:#fff1e8;color:#c2410c;border:1px solid var(--accent-line);
  font-weight:700;letter-spacing:.6px;font-size:10px;
}
.tag-sim{
  margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:#c2410c;background:#fff1e8;
  border:1px solid var(--accent-line);border-radius:20px;padding:1px 6px;
}

/* ── Watchlists ────────────────────────────────────────────────────────── */
.muted-row td{opacity:.5}
.addbar{display:flex;gap:8px}
.addbar input{
  flex:1;padding:8px 11px;font:inherit;border:1px solid var(--line);
  border-radius:8px;background:var(--canvas-warm);outline:none;
}
.addbar input:focus{border-color:var(--accent-line);background:#fff}
.addmsg{font-size:11.5px;min-height:16px;margin-top:6px}
.wl-item{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:7px 9px;border-radius:7px;cursor:pointer;font-size:12.5px;
}
.wl-item:hover{background:var(--line-soft)}
.wl-item.on{background:var(--accent-soft);color:var(--accent);font-weight:620}
.wl-item .t{font-weight:600}
button.mini{
  font:inherit;font-size:11px;line-height:1;padding:4px 7px;margin-left:3px;
  border:1px solid var(--line);border-radius:6px;background:var(--panel);
  color:var(--ink-mid);cursor:pointer;
}
button.mini:hover:not(:disabled){background:var(--line-soft);color:var(--ink)}
button.mini:disabled{opacity:.3;cursor:default}
button.mini.danger:hover{border-color:var(--neg);color:var(--neg)}
.btn.danger:hover{border-color:var(--neg);color:var(--neg)}

/* ── Charts ────────────────────────────────────────────────────────────── */
.chart{width:100%;display:block}
.chart .grid{stroke:var(--line-soft);stroke-width:1}
.chart .axis{fill:var(--ink-soft);font-size:10px}
.chart .lbl{fill:var(--ink-mid);font-size:10px;font-weight:600}
.legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--ink-mid)}
/* The narrow viewBox scales down on a phone; nudge the type back up so axis
   labels land at roughly the same rendered size as on desktop. */
.chart.m .axis{font-size:12px}
.chart.m .lbl{font-size:11px}
.legend .sw{display:inline-block;width:14px;height:2.5px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* ── Utilization bar ───────────────────────────────────────────────────── */
.bar{height:8px;border-radius:5px;background:var(--line-soft);overflow:hidden;margin-top:8px}
.bar > span{display:block;height:100%;background:var(--accent);border-radius:5px}

/* ── Assistant ─────────────────────────────────────────────────────────── */
.assistant{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0;height:100%;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.threads{border-right:1px solid var(--line);padding:12px;overflow:auto}
.threads-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.threads-head h3{font-size:13px;font-weight:620}
.thread{padding:9px 10px;border-radius:7px;cursor:pointer;font-size:12.5px;line-height:1.35;color:var(--ink-mid)}
.thread:hover{background:var(--line-soft)}
.thread.on{background:var(--accent-soft);color:var(--ink);border-left:2px solid var(--accent)}
.convo{display:flex;flex-direction:column;min-height:0}
.convo-body{flex:1;overflow:auto;padding:18px 22px}
.q{font-size:15px;font-weight:640;margin-bottom:14px}
.section{margin-bottom:16px}
.section h4{font-size:13px;font-weight:620;display:flex;align-items:center;gap:8px;margin-bottom:7px}
.section .n{
  width:19px;height:19px;border-radius:5px;background:var(--accent-soft);color:var(--accent);
  font-size:11px;display:inline-flex;align-items:center;justify-content:center;font-weight:680;
}
.section ul{list-style:none;padding-left:27px}
.section li{font-size:12.5px;color:var(--ink-mid);line-height:1.65;position:relative}
.section li::before{content:"•";position:absolute;left:-13px;color:var(--ink-soft)}
.bottom-line{
  background:#f4f8ff;border:1px solid #dde8fb;border-radius:8px;padding:11px 13px;font-size:12.5px;
}
.bottom-line b{font-weight:650}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chip{font-size:10.5px;padding:3px 8px;border-radius:20px;border:1px solid var(--line);color:var(--ink-soft)}
.composer{border-top:1px solid var(--line);padding:12px 18px;display:flex;gap:10px}
.composer input{
  flex:1;padding:10px 13px;font:inherit;border:1px solid var(--line);
  border-radius:9px;background:var(--canvas-warm);outline:none;
}
.composer input:focus{border-color:var(--accent-line);background:#fff}
.composer button{
  padding:0 16px;border:none;border-radius:9px;background:var(--accent);color:#fff;
  font:inherit;font-weight:600;cursor:pointer;
}

/* Forward-looking note — visually separated from statements about what the
   page shows today, so the two are never read as the same claim. */
.callout{
  margin:0 14px 14px;padding:11px 13px;
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:8px;font-size:12.5px;line-height:1.65;color:var(--ink-mid);
}
.callout b{color:var(--ink);font-weight:640}

.note-bar{
  font-size:11.5px;color:var(--ink-soft);padding:9px 13px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);margin-top:14px;
}
/* ── Column switcher (phones) ──────────────────────────────────────────── */
/* The one place a horizontal scroll is allowed: a control strip, never data.
   It swaps which metric occupies the single value column of a narrow table, so
   every horizon stays reachable without the table itself scrolling sideways. */
.chipbar{
  display:none;gap:6px;overflow-x:auto;scrollbar-width:none;
  margin-bottom:12px;padding-bottom:2px;-webkit-overflow-scrolling:touch;
}
.chipbar::-webkit-scrollbar{display:none}
.chipbar button{
  flex:0 0 auto;font:inherit;font-size:12.5px;padding:6px 12px;
  border:1px solid var(--line);border-radius:20px;background:var(--panel);
  color:var(--ink-mid);cursor:pointer;white-space:nowrap;
}
.chipbar button.on{
  background:var(--accent-soft);color:var(--accent);
  border-color:var(--accent-line);font-weight:640;
}

/* Definition tables (Documentation). Term/body split as a class rather than an
   inline width, so the mobile rule below can actually stack them. */
.deftable td:first-child{width:180px;vertical-align:top}
.deftable td:last-child{
  text-align:left;font-weight:400;color:var(--ink-mid);
  white-space:normal;line-height:1.55;
}

@media (max-width:1180px){
  .layout{grid-template-columns:minmax(0,1fr)}
}

/* ── Phones / narrow tablets ───────────────────────────────────────────── */
@media (max-width:820px){
  /* The rail never disappears on a phone — it stays as a permanently visible
     icon strip, and the hamburger widens it into an overlay. .main keeps a
     fixed margin of one icon width, so opening the drawer covers the page
     instead of reflowing every table underneath it. */
  .rail{
    position:fixed;top:0;left:0;bottom:0;z-index:60;
    width:var(--rail-w);flex-basis:auto;
    transition:width .2s ease;
  }
  .main{margin-left:var(--rail-w-icon)}
  body.rail-mini .rail{padding-left:max(9px,var(--sa-l))}
  body:not(.rail-mini){--rail-w:min(76vw,250px)}
  body:not(.rail-mini) .rail{box-shadow:2px 0 18px rgba(22,22,26,.14)}
  body:not(.rail-mini) .scrim{opacity:1;pointer-events:auto}

  .topbar{padding:0 12px;padding-left:12px;padding-right:max(12px,var(--sa-r));gap:8px}
  .search{flex:1;width:auto;min-width:0}
  /* 16px is the iOS Safari threshold — below it, focusing an input zooms the
     whole page and the user is left scrolled sideways. */
  .search input,.addbar input,.composer input{font-size:16px}
  .topbar-right{position:static;flex:0 0 auto}
  .live-word{display:none}
  .live{font-size:11px}

  .view{padding:14px 11px calc(20px + var(--sa-b));padding-right:max(11px,var(--sa-r))}
  .page-head{flex-wrap:wrap;gap:6px 10px}
  .page-head h1{font-size:17px}
  .page-sub{font-size:12px;margin-bottom:12px}

  /* Two tiles per row reads better than three cramped ones at 360px. */
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tile{padding:9px 11px}
  .tile .value{font-size:17px}
  .tile .value.sm{font-size:14px}

  /* Tables are built narrow in JS at this width, so they fit without sideways
     scrolling. .scroll-x stays as a safety valve rather than the mechanism. */
  .chipbar{display:flex}
  thead th{padding:8px 7px;font-size:10.5px}
  tbody td{padding:7px 7px;font-size:12.5px}
  .group-row td{padding:11px 7px 4px}
  .panel-head{padding:10px 11px;flex-wrap:wrap}
  .panel-body{padding:11px}
  .controls{gap:6px;margin-bottom:12px}
  .controls select,.controls .btn{font-size:12.5px}
  /* Horizon segments outgrow any phone; let the strip itself scroll. */
  .seg{overflow-x:auto;max-width:100%;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:0 0 auto}

  .card{padding:11px 12px}
  .deftable td:first-child,.deftable td:last-child{display:block;width:auto;padding:8px 10px}
  .deftable td:first-child{padding-bottom:2px;border-bottom:none}
  .deftable td:last-child{padding-top:0}

  /* Assistant: thread list stops being a sidebar and becomes a chip strip. */
  .assistant{grid-template-columns:minmax(0,1fr);height:auto}
  .threads{
    border-right:none;border-bottom:1px solid var(--line);
    display:flex;gap:6px;overflow-x:auto;padding:10px;scrollbar-width:none;
  }
  .threads::-webkit-scrollbar{display:none}
  .threads-head{display:none}
  #thread-list{display:flex;gap:6px}
  .thread{
    flex:0 0 auto;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:12px;
  }
  .thread.on{border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent)}
  .convo-body{padding:14px 13px}
  .q{font-size:14px}
  .section ul{padding-left:20px}
  .section li{font-size:12.5px;line-height:1.6}
  .section li::before{left:-12px}
  .composer{padding:10px 12px calc(10px + var(--sa-b))}

  .legend{gap:10px;font-size:11px;width:100%}
  .callout{margin:0 11px 11px}
  .note-bar{line-height:1.6}
  .addbar{flex-wrap:wrap}
  .addbar input{flex:1 1 100%}
}

/* Very narrow (iPhone SE and similar). */
@media (max-width:400px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  thead th,tbody td{padding-left:6px;padding-right:6px}
  tbody td{font-size:12px}
  .page-head h1{font-size:16px}
}