/* ============================================================================
   exotic — css/app/activity.css · one unified timeline
   ----------------------------------------------------------------------------
   Two voices in one stream: things I did (solid icons) and things the
   exchange did (dashed icons + a micro-tag + one plain sentence inline).
   Collapsed rows stay scannable; each type expands into only the details
   that matter for it. Requires tokens + exotic + lobby + app css.
   ========================================================================== */

/* ---- filters ---- */
.act-filters{display:flex;gap:8px;flex-wrap:wrap}
.act-filters button{font-family:var(--font-num);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  color:var(--muted);background:var(--surface);border:1px solid var(--hairline-2);border-radius:var(--rad-pill);
  padding:8px 16px;cursor:pointer;box-shadow:var(--crisp);transition:color var(--t1),background var(--t1),border-color var(--t1)}
.act-filters button:hover{color:var(--ink)}
.act-filters button.on{color:var(--ink);background:var(--card);border-color:var(--hairline-2);box-shadow:var(--crisp)}

/* ---- timeline ---- */
.tl{display:flex;flex-direction:column;gap:6px}
.day-h{font-family:var(--font-num);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  padding:18px 0 6px}   /* 0: the 4px pad broke the page's shared left axis */
.day-h:first-child{padding-top:2px}

.arow{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--rad-3);box-shadow:var(--elev-1);
  overflow:hidden;transition:box-shadow var(--t1)}
.arow:hover{box-shadow:var(--elev-2)}
.arow-t:active{background:var(--surface-2)}
.arow-t{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto 18px;gap:13px;align-items:center;
  padding:12px 16px;cursor:pointer}
.arow .ic{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font-size:14px;
  font-family:var(--font-num);color:var(--ink-2);background:var(--surface-2);border:1px solid var(--hairline-2);box-shadow:var(--crisp)}
.arow.ex .ic{background:var(--bg-sunken);border-style:dashed;box-shadow:none;color:var(--muted)}
.arow .ic.up{color:var(--up);background:var(--up-bg);border-color:transparent}
.arow .ic.down{color:var(--down);background:var(--down-bg);border-color:transparent;border-style:solid}
/* tinted EXCHANGE icons keep the dashed 'exchange voice' ring — liquidation
   and backstop rows are the ones that most need to read as the venue acting */
.arow.ex .ic.up{border-color:color-mix(in oklab,var(--up) 40%,transparent);border-style:dashed}
.arow.ex .ic.down{border-color:color-mix(in oklab,var(--down) 40%,transparent);border-style:dashed}
.arow .bd{min-width:0}
.arow .ttl{font-size:13.5px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.arow .extag{font-family:var(--font-num);font-size:8.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  border:1px dashed var(--hairline);border-radius:var(--rad-pill);padding:2px 7px;font-weight:400}
.arow .plain{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45;max-width:60ch;text-wrap:pretty}
.arow .amt{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink);white-space:nowrap;text-align:right}
.arow .amt.up{color:var(--up)} .arow .amt.down{color:var(--down)} .arow .amt.mut{color:var(--muted)}
.arow .when{font-family:var(--font-num);font-size:10.5px;color:var(--muted);white-space:nowrap}
.arow .chev{font-size:13px;color:var(--muted);text-align:center;transition:transform var(--t1)}
.arow.open .chev{transform:rotate(90deg)}

/* ---- expansion ---- */
.arow-x{border-top:1px dashed var(--hairline-2);padding:13px 16px 15px 63px}
.ax-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px 26px}
/* stacked label-over-value — long pairs read cleanly instead of wrapping */
.ax-grid .kv{flex-direction:column;align-items:flex-start;gap:3px}
.ax-grid .kv span:first-child{font-family:var(--font-num);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ax-grid .kv .v{font-family:var(--font-num);font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ax-grid .kv .v.up{color:var(--up)} .ax-grid .kv .v.down{color:var(--down)}
.ax-note{margin-top:11px;font-size:12.5px;line-height:1.55;color:var(--ink-2);max-width:64ch;text-wrap:pretty}
.ax-note b{color:var(--ink);font-weight:600}
.ax-link{display:inline-flex;margin-top:11px;font-family:var(--font-num);font-size:11px;color:var(--ink-2);text-decoration:none}
.ax-link:hover{color:var(--ink)}

/* funding breakdown */
.fx-rows{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-width:420px}
.fx-row{display:flex;justify-content:space-between;gap:16px;font-family:var(--font-num);font-size:12px;color:var(--ink-2)}
.fx-row .v{font-variant-numeric:tabular-nums;color:var(--ink)}
.fx-row .v.up{color:var(--up)} .fx-row .v.down{color:var(--down)}

/* liquidation account — calm, complete */
.lq{display:flex;flex-direction:column;gap:13px;max-width:64ch}
.lq p{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.lq p b{color:var(--ink);font-weight:600}
.lq .h{font-family:var(--font-num);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:-8px}
.lq-path{background:var(--bg-sunken);border:1px solid var(--hairline-2);border-radius:var(--rad-2);padding:12px 12px 6px}
.lq-path .lq-plot{position:relative;height:128px;margin-right:46px}
.lq-path svg{width:100%;height:100%;display:block;overflow:visible}
.lq-path .lq-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--down);transform:translate(-50%,-50%);
  border:2px solid var(--surface)}
.lq-path .lq-dot.from{background:var(--ink-2)}
.lq-path .lq-yl{position:absolute;left:calc(100% + 10px);transform:translateY(-50%);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:10px;color:var(--muted);pointer-events:none}
.lq-path .lq-x{position:relative;height:16px;margin:6px 46px 0 0;font-family:var(--font-num);font-size:10px;color:var(--muted)}
.lq-path .lq-x .lq-xl{position:absolute;transform:translateX(-50%);white-space:nowrap}
.lq-path .lq-x .lq-xl:first-child{transform:none}
.lq-path .lq-x .lq-xl:last-child{transform:translateX(-100%)}
.lq-path .lq-lb{position:absolute;font-family:var(--font-num);font-size:10px;white-space:nowrap;pointer-events:none;z-index:1;
  background:color-mix(in oklab,var(--bg-sunken) 88%,transparent);border:1px solid var(--hairline-2);
  border-radius:var(--rad-pill);padding:1px 8px}
.lq-path .lq-lb.liq{left:8px;color:var(--down);border-color:color-mix(in oklab,var(--down) 30%,transparent);transform:translateY(-50%)}
.lq-path .lq-lb.from{left:12px;color:var(--muted);transform:translateY(-135%)}
.lq-path .lq-lb.to{right:14px;color:var(--down);border-color:color-mix(in oklab,var(--down) 30%,transparent);transform:translateY(-50%)}

/* end cap */
.tl-end{padding:22px 0 4px;text-align:center;font-family:var(--font-num);font-size:11px;color:var(--muted)}

/* 700 → 640: the timestamp used to vanish 60px before the phone pass began —
   one cliff, one breakpoint (D36) */
@media (max-width:640px){
  .arow-t{grid-template-columns:34px minmax(0,1fr) auto 16px}
  .arow .when{display:none}
  .arow-x{padding-left:16px}
}

/* ---- phone app treatment (design/phone-app-feel) ---- */
@media (max-width:640px){
  /* titles like "net for Jul 9" never orphan the date on its own line */
  .arow .ttl{text-wrap:balance}
  /* one active dialect app-wide: raised white pill, not an ink slab */
  /* the H1 already says it — the sentence is web furniture */
  .pg-head .sub{display:none}
  /* filters: one full-bleed thumb row; the right fade says "more this way" */
  .act-filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -14px;padding:2px 14px;
}
  /* fades tell the truth: only a side with more content wears one — JS toggles
     .fade-l/.fade-r (the .mets pattern, D42) */
  .act-filters.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  .act-filters.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px);mask-image:linear-gradient(90deg,transparent,#000 30px)}
  .act-filters.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
  .act-filters::-webkit-scrollbar{display:none}
  /* inactive chips flatten so the raised white ACTIVE pill actually reads
     (all-white pills differed only by text color); 44px = touch law */
  .act-filters button{flex:0 0 auto;min-height:44px;background:none;box-shadow:none;border-color:transparent}
  /* expanded-row values may outgrow a 151px column ("Approved · arrives
     today") — wrapping beats bleeding into the neighbour */
  .ax-grid .kv .v{white-space:normal}
  /* ---- density pass: the grouping reads at 12px of air, and each px of
     row chrome given back is a px the titles stop wrapping into ---- */
  .day-h{padding:12px 0 6px}
  .arow-t{padding:11px 14px;gap:11px}
  .arow-x{padding:12px 14px 14px}
  .ax-grid{gap:11px 22px}
}

/* expanded-row timestamp: desktop already shows it on the row (.when) —
   on phone the row drops it for density, so the DETAIL carries it */
.ax-when{display:none}
@media (max-width:700px){
  .ax-when{display:block;font-family:var(--font-num);font-size:10.5px;color:var(--muted);margin-top:10px}
}