/* ============================================================================
   exotic — css/motion-sense.css · inference & time (the DD review five)
   ========================================================================== */

/* ---- 1 · time machine ---- */
.sn-tm{position:relative;width:100%;cursor:grab;touch-action:pan-y;
  display:flex;flex-direction:column;gap:12px}
.sn-tm.grabbing{cursor:grabbing}
.sn-tm-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sn-tm-val{display:flex;align-items:baseline}
.sn-tm-val .cur{font-family:var(--font-num);font-size:34px;font-weight:600;
  letter-spacing:-0.03em;line-height:1;color:var(--ink)}
.sn-tm-when{display:flex;align-items:center;gap:10px}
.sn-tm-when .d{font-family:var(--font-num);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:var(--track-caps,.07em);color:var(--muted)}
.sn-tm.scrubbed .sn-tm-when .d{color:var(--ink)}
.sn-now{font-family:var(--font-num);font-size:9.5px;text-transform:uppercase;
  letter-spacing:var(--track-caps,.07em);color:var(--muted);background:var(--surface);
  border:1px solid var(--hairline-2);border-radius:var(--rad-pill,999px);padding:4px 10px;
  cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity var(--t-med,.24s) var(--ease-out),color var(--t-fast,.15s) var(--ease-out)}
.sn-tm.scrubbed .sn-now{opacity:1;pointer-events:auto}
.sn-now:hover{color:var(--ink)}
.sn-tm-rows{display:flex;flex-direction:column;min-height:118px}
.sn-tm-row{display:flex;align-items:baseline;gap:10px;font-size:12.5px;padding:5px 0;
  border-bottom:1px solid var(--hairline-2);
  transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
.sn-tm-row:last-child{border-bottom:0}
.sn-tm-row .t{color:var(--ink);font-weight:500}
.sn-tm-row .dt{font-family:var(--font-num);font-size:10px;color:var(--muted)}
.sn-tm-row .a{margin-left:auto;font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:12px;font-weight:600}
.sn-tm-row .a.up{color:var(--up)} .sn-tm-row .a.down{color:var(--down)}
/* a row whose day hasn't happened yet doesn't exist — it leaves DOWNWARD,
   the direction the past lives in this list */
.sn-tm-row.gone{opacity:0;transform:translateY(5px);pointer-events:none;
  height:0;padding:0;border-bottom-width:0;overflow:hidden}
.sn-tm-rail{position:relative;height:26px;border-radius:var(--rad-1,8px);
  background:repeating-linear-gradient(90deg,var(--hairline) 0 1px,transparent 1px 11.1%)
    var(--bg-sunken);cursor:grab}
.sn-tm.grabbing .sn-tm-rail{cursor:grabbing}
.sn-tm-rail:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.sn-tm-rail .mk{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:var(--g4);box-shadow:0 0 0 3px color-mix(in oklab,var(--g4) 22%,transparent)}

/* ---- 2 · the dial ---- */
.sn-dial{position:relative;flex:0 0 auto;cursor:grab;touch-action:pan-y;
  display:grid;place-items:center}
.sn-dial.grabbing{cursor:grabbing}
.sn-dial:focus-visible{outline:none;border-radius:50%;box-shadow:var(--focus-ring)}
.sn-dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sn-dial circle{fill:var(--hairline)}
.sn-dial circle.h{fill:var(--muted)}
.sn-dial circle.sel{fill:var(--g4);r:3}
.sn-dial .notch{position:absolute;left:50%;top:-3px;width:2px;height:8px;margin-left:-1px;
  border-radius:1px;background:var(--g4)}
.sn-dial .face{text-align:center;font-family:var(--font-num);line-height:1.15;pointer-events:none}
.sn-dial .face b{display:block;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-0.02em;color:var(--ink)}
.sn-dial .face span{display:block;font-size:8px;text-transform:uppercase;
  letter-spacing:var(--track-caps,.07em);color:var(--muted);margin-top:3px}
.sn-dial .face.past b{color:var(--ink-2)}

/* ---- 3 · deposit ---- */
.sn-dep{display:flex;flex-direction:column;gap:14px;width:100%;max-width:360px}
.sn-dep-src{display:flex;align-items:baseline;gap:9px;font-size:12.5px;color:var(--muted)}
.sn-dep-src b{font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--ink)}
.sn-dep-src .cp{font-family:var(--font-num);font-size:9.5px;text-transform:uppercase;
  letter-spacing:var(--track-caps,.07em);color:var(--muted);background:var(--surface);
  border:1px solid var(--hairline-2);border-radius:var(--rad-pill,999px);padding:3px 9px;
  cursor:pointer;min-width:58px;transition:color var(--t-fast,.15s) var(--ease-out)}
.sn-dep-src .cp:hover{color:var(--ink)}
.sn-dep-field label{display:block;font-family:var(--font-num);font-size:9.5px;
  text-transform:uppercase;letter-spacing:var(--track-caps,.07em);color:var(--muted);
  margin-bottom:7px}
.sn-dep-field .wrap{position:relative;display:flex;align-items:center;gap:7px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--rad-2,12px);
  padding:11px 13px;transition:border-color var(--t-fast,.15s) var(--ease-out)}
.sn-dep-field .wrap:focus-within{border-color:color-mix(in oklab,var(--g3) 55%,var(--hairline));
  box-shadow:var(--focus-ring)}
.sn-dep-field .cur{font-family:var(--font-num);font-size:15px;color:var(--muted)}
.sn-dep-field input{flex:1;border:0;background:none;outline:none;min-width:0;
  font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:16px;
  font-weight:600;color:var(--ink)}
/* the offer: a chip, not an autofill — a wrong inference costs one glance */
.sn-chip{position:absolute;right:9px;top:50%;translate:0 -50%;
  font-family:var(--font-num);font-size:11px;font-weight:500;color:var(--ink);
  background:var(--surface);border:1px solid color-mix(in oklab,var(--g4) 46%,var(--hairline));
  border-radius:var(--rad-pill,999px);padding:5px 11px;cursor:pointer;white-space:nowrap;
  opacity:0;transform:translateY(3px);
  transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
.sn-chip.in{opacity:1;transform:none}
.sn-chip:active{transform:scale(.97)}

/* ---- 4 · ⌘K ---- */
.sn-k{position:absolute;inset:0;z-index:6;display:grid;place-items:start center;
  padding-top:26px;background:color-mix(in oklab,var(--bg) 55%,transparent);
  opacity:0;transition:opacity 160ms var(--ease-out)}
.sn-k.on{opacity:1}
.sn-k-panel{width:min(430px,92%);background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--rad-3,16px);box-shadow:var(--elev-3);overflow:hidden;
  transform:scale(.97) translateY(-4px);transition:transform 160ms var(--ease-emph,cubic-bezier(.16,1,.3,1))}
.sn-k.on .sn-k-panel{transform:none}
.sn-k-in{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--hairline-2)}
.sn-k-in .glyph{font-family:var(--font-num);font-size:10px;color:var(--muted);
  border:1px solid var(--hairline-2);border-radius:6px;padding:2px 6px}
.sn-k-in input{flex:1;border:0;background:none;outline:none;font-family:var(--font-sans);
  font-size:14px;color:var(--ink)}
.sn-k-list{max-height:212px;overflow-y:auto;padding:6px}
.sn-k-list .r{display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;
  border:0;background:none;padding:9px 10px;border-radius:var(--rad-2,12px);cursor:pointer;
  font-size:13px}
.sn-k-list .r.hi,.sn-k-list .r:hover{background:var(--bg-sunken)}
.sn-k-list .r b{font-weight:500;color:var(--ink)}
.sn-k-list .r .s{font-family:var(--font-num);font-size:10px;color:var(--muted)}
.sn-k-list .r .p{margin-left:auto;font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:12px;color:var(--ink-2)}
.sn-k-list .r .c{font-family:var(--font-num);font-size:11px;font-weight:600;width:52px;text-align:right}
.sn-k-list .r .c.up{color:var(--up)} .sn-k-list .r .c.down{color:var(--down)}
.sn-k-list .none{padding:16px;font-size:12.5px;color:var(--muted);text-align:center}
.sn-k-out{font-family:var(--font-num);font-size:11px;color:var(--muted);min-height:16px}
.sn-k-out b{color:var(--ink-2);font-weight:500}
.sn-prose{font-size:14px;line-height:1.65;color:var(--ink-2);max-width:56ch;margin:0}
.sn-prose b{color:var(--ink);font-weight:500;text-decoration:underline dotted;
  text-underline-offset:3px;text-decoration-color:var(--muted)}

/* ---- 5 · the clock's chevrons ---- */
.sn-chev{position:absolute;inset:0;pointer-events:none;z-index:3}
.sn-chev i{position:absolute;top:50%;translate:0 -50%;font-style:normal;font-size:22px;
  line-height:1;color:var(--g4);opacity:0;transition:opacity 300ms var(--ease-out)}
.sn-chev i{left:12px} .sn-chev i.r{left:auto;right:12px}
.sn-chev.on i{opacity:.9;animation:snChev 1.9s var(--ease-inout,ease-in-out) 1}
@keyframes snChev{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}60%{transform:translateX(3px)}}
.sn-chev.on i.r{animation-name:snChevR}
@keyframes snChevR{0%,100%{transform:translateX(0)}30%{transform:translateX(5px)}60%{transform:translateX(-3px)}}

/* ---- reduced motion: states stay, travel goes ---- */
@media (prefers-reduced-motion:reduce){
  .sn-tm-row{transition:opacity 120ms linear}
  .sn-tm-row.gone{transform:none}
  .sn-chip{transition:opacity 120ms linear;transform:none}
  .sn-chip.in{transform:none}
  .sn-k,.sn-k-panel{transition:none}
  .sn-k-panel{transform:none}
  .sn-chev{display:none}
}
html.mk-reduce .sn-tm-row{transition:opacity 120ms linear}
html.mk-reduce .sn-tm-row.gone{transform:none}
html.mk-reduce :is(.sn-chip,.sn-k,.sn-k-panel){transition:none;transform:none}
html.mk-reduce .sn-chev{display:none}