/* look13-money.css — v468 · E · Money you can see, in Jetsy's own chart. Fri 23 Oct 2026.
   Joe 5:05pm: "Make 5 major upgrades to the look of our dashboard make it look like a billion dollar crm compare my 4 biggest
   competitors look and make ours better think of yourself as a world class software engineer who specializes in software
   development". Before, money was one number in a tile. Now Today's "Money in" tile opens the Money sheet (a bottom sheet with a
   grabber: the range's total, ▲/▼ against the range before, a smooth area chart you can scrub in Jetsy's own chart, Week · Month · 3 months ·
   Year, the newest payments and what is still owed), and the Invoices tab starts with "Paid this month" (total, change, a small
   chart). The markup is look13-money.js's. look12's tokens (look12-tokens.css) for type, surfaces, corners and the spring; Apple's
   green for money in (#3ED598 dark / #1FA971 light), its red for a drop. Every rule under html:not(.nolook13). Light mode: easy2.js
   flips each literal colour below at load; the exact light values are written under html.je-light (easy2 leaves those rules alone).
   Taps are 44 px or more; nothing is wider than the screen; reduced motion: nothing slides or draws in. */

/* ---------------------------------------------------------------- the sheet */
html:not(.nolook13).j13m-lock,html:not(.nolook13).j13m-lock body{overflow:hidden!important}
html:not(.nolook13) .j13m-wrap{position:fixed;inset:0;z-index:9995;font-family:var(--j12-sf);-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;color:var(--j12-t1);text-align:left;letter-spacing:normal}
html:not(.nolook13) .j13m-wrap *{box-sizing:border-box}
html:not(.nolook13) .j13m-back{position:absolute;inset:0;background:rgba(0,0,0,.52);touch-action:none;
  transition:opacity var(--j12-t) ease}
html:not(.nolook13) .j13m-panel{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:560px;
  max-height:calc(100% - max(28px, env(safe-area-inset-top) + 12px));display:flex;flex-direction:column;
  background:#111A29;border-radius:var(--j12-r-card) var(--j12-r-card) 0 0;
  box-shadow:0 -14px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
  padding-bottom:env(safe-area-inset-bottom);transition:transform 340ms var(--j12-spring);will-change:transform}
html:not(.nolook13) .j13m-wrap.j13m-in .j13m-back,html:not(.nolook13) .j13m-wrap.j13m-out .j13m-back{opacity:0}
html:not(.nolook13) .j13m-wrap.j13m-in .j13m-panel,html:not(.nolook13) .j13m-wrap.j13m-out .j13m-panel{transform:translateY(100%)}
html:not(.nolook13) .j13m-wrap.j13m-out .j13m-panel{transition-duration:240ms}

/* the grabber and the title row: drag them down to close */
html:not(.nolook13) .j13m-grab{flex:none;height:20px;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}
html:not(.nolook13) .j13m-grab span{display:block;width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.24)}
html:not(.nolook13) .j13m-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;
  padding:0 6px 0 16px;touch-action:none}
html:not(.nolook13) .j13m-title{margin:0;font:var(--j12-t-title);letter-spacing:var(--j12-ls-title);color:var(--j12-t1);outline:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html:not(.nolook13) .j13m-done{flex:none;min-width:64px;min-height:44px;padding:0 12px;border:0;border-radius:var(--j12-r-btn);
  background:transparent;color:#FF6A1A;font:600 17px/22px var(--j12-sf);cursor:pointer}
html:not(.nolook13) .j13m-done:active{opacity:.55}

html:not(.nolook13) .j13m-body{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:2px 16px 22px}

/* the header: the range's money, how it compares, which days (a scrubbed point takes the first two lines while the finger is down) */
html:not(.nolook13) .j13m-head{padding:2px 0 0;min-height:86px}
html:not(.nolook13) .j13m-total{font:800 36px/42px var(--j12-sf);letter-spacing:-.03em;color:var(--j12-t1);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook13) .j13m-cmp{margin-top:1px;font:600 15px/20px var(--j12-sf);color:var(--j12-t2);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook13) .j13m-cmp.j13m-up{color:#3ED598}
html:not(.nolook13) .j13m-cmp.j13m-dn{color:#F25F5C}
html:not(.nolook13) .j13m-cmp.j13m-at{color:var(--j12-t1)}
html:not(.nolook13) .j13m-dates{margin-top:2px;font:var(--j12-t-foot);color:var(--j12-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Week · Month · 3 months · Year — an segmented control: one track, the picked segment raised; each segment a 44 px tap */
html:not(.nolook13) .j13m-seg{position:relative;display:flex;margin:12px 0 4px;height:44px;padding:0 2px}
html:not(.nolook13) .j13m-seg::before{content:"";position:absolute;left:0;right:0;top:5px;bottom:5px;border-radius:9px;
  background:rgba(110,124,148,.24)}
html:not(.nolook13) .j13m-sg{position:relative;flex:1 1 0;min-width:0;height:44px;margin:0;padding:0 4px;border:0;background:transparent;
  color:var(--j12-t2);font:500 13px/18px var(--j12-sf);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
/* the raised piece is the segment's ::before, painted under its label (isolation keeps it inside the button) */
html:not(.nolook13) .j13m-sg{isolation:isolate}
html:not(.nolook13) .j13m-sg::before{content:"";position:absolute;left:0;right:0;top:7px;bottom:7px;border-radius:7px;background:transparent;
  transition:background var(--j12-tq) ease,box-shadow var(--j12-tq) ease;z-index:-1}
html:not(.nolook13) .j13m-sg.j13m-on{color:var(--j12-t1);font-weight:600}
html:not(.nolook13) .j13m-sg.j13m-on::before{background:rgba(255,255,255,.17);box-shadow:0 3px 8px rgba(0,0,0,.18),0 1px 1px rgba(0,0,0,.12)}
html:not(.nolook13) .j13m-sg:focus-visible{outline:none}
html:not(.nolook13) .j13m-sg:focus-visible::before{box-shadow:0 0 0 2px #4BA3F5}

/* the chart: a smooth green line over a soft fill, a dashed floor, the high point's value; touch and drag to read a day */
html:not(.nolook13) .j13m-chart{margin-top:6px}
html:not(.nolook13) .j13m-plot{position:relative;height:196px;touch-action:pan-y;cursor:crosshair;outline:none;border-radius:12px;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html:not(.nolook13) .j13m-plot:focus-visible{box-shadow:0 0 0 2px #4BA3F5}
html:not(.nolook13) .j13m-svg{display:block;width:100%;height:196px;overflow:visible}
html:not(.nolook13) .j13m-svg .j13m-base{stroke:rgba(255,255,255,.18);stroke-width:1;stroke-dasharray:3 4}
html:not(.nolook13) .j13m-svg .j13m-grid{stroke:rgba(255,255,255,.09);stroke-width:1;stroke-dasharray:2 4}
html:not(.nolook13) .j13m-line{fill:none;stroke:#3ED598;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
html:not(.nolook13) .j13m-line.j13m-flat{stroke:rgba(255,255,255,.26);stroke-width:2}
html:not(.nolook13) .j13m-area{stroke:none}
html:not(.nolook13) .j13m-g0{stop-color:#3ED598;stop-opacity:.32}
html:not(.nolook13) .j13m-g1{stop-color:#3ED598;stop-opacity:0}
html:not(.nolook13) .j13m-end{fill:#3ED598;stroke:#111A29;stroke-width:2.5}
html:not(.nolook13) .j13m-cl{stroke:rgba(255,255,255,.55);stroke-width:1.5}
html:not(.nolook13) .j13m-cd{fill:#3ED598;stroke:#FFFFFF;stroke-width:2.5}
html:not(.nolook13) .j13m-yl{position:absolute;right:0;font:500 12px/16px var(--j12-sf);color:var(--j12-t3);font-variant-numeric:tabular-nums;
  pointer-events:none}
html:not(.nolook13) .j13m-empty{position:absolute;left:0;right:0;top:42%;transform:translateY(-50%);text-align:center;padding:0 12px;
  font:var(--j12-t-call);color:var(--j12-t2);pointer-events:none}
html:not(.nolook13) .j13m-axis{position:relative;height:20px;margin-top:6px;pointer-events:none}
html:not(.nolook13) .j13m-xl{position:absolute;top:0;font:500 12px/16px var(--j12-sf);color:var(--j12-t3);white-space:nowrap;
  font-variant-numeric:tabular-nums}
html:not(.nolook13) .j13m-xl.j13m-am{transform:translateX(-50%)}
html:not(.nolook13) .j13m-xl.j13m-ae{transform:translateX(-100%)}

/* Latest payments: one inset-grouped list, hairlines that start after the coin */
html:not(.nolook13) .j13m-h{margin:20px 4px 8px;font:var(--j12-t-head);color:var(--j12-t1)}
html:not(.nolook13) .j13m-list{border-radius:var(--j12-r-row);background:#162133;overflow:hidden}
html:not(.nolook13) .j13m-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:62px;margin:0;padding:10px 14px;
  border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
html:not(.nolook13) .j13m-row + .j13m-row::before{content:"";position:absolute;top:0;left:66px;right:0;height:1px;background:rgba(255,255,255,.07)}
html:not(.nolook13) .j13m-row:active{background:#1D2A40}
html:not(.nolook13) .j13m-row:focus-visible,html:not(.nolook13) .j13m-owed:focus-visible,html:not(.nolook13) .j13m-paid:focus-visible{outline:2px solid #4BA3F5;outline-offset:-2px}
html:not(.nolook13) .j13m-av{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:hsl(var(--avh,210) 42% 20%);color:hsl(var(--avh,210) 85% 78%);box-shadow:inset 0 0 0 1px hsl(var(--avh,210) 55% 38% / .9);
  font:800 15px/1 var(--j12-sf);letter-spacing:.02em}
html:not(.nolook13) .j13m-rt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
html:not(.nolook13) .j13m-rn{font:600 16px/21px var(--j12-sf);color:var(--j12-t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook13) .j13m-rs{font:500 13px/18px var(--j12-sf);color:var(--j12-t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook13) .j13m-ra{flex:none;font:600 16px/21px var(--j12-sf);color:#3ED598;font-variant-numeric:tabular-nums}
html:not(.nolook13) .j13m-ra.j13m-neg{color:#F25F5C}
html:not(.nolook13) .j13m-none{padding:16px;border-radius:var(--j12-r-row);background:#162133;font:var(--j12-t-call);color:var(--j12-t2)}

/* Owed to you → Invoices */
html:not(.nolook13) .j13m-owed{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;margin:12px 0 0;padding:0 14px 0 16px;
  border:0;border-radius:var(--j12-r-row);background:#162133;color:inherit;font:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
html:not(.nolook13) .j13m-owed:active{background:#1D2A40}
html:not(.nolook13) .j13m-ot{flex:none;font:600 16px/21px var(--j12-sf);color:var(--j12-t1)}
html:not(.nolook13) .j13m-ov{flex:1 1 auto;min-width:0;text-align:right;font:500 15px/20px var(--j12-sf);color:var(--j12-t2);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook13) .j13m-chev{flex:none;width:9px;height:9px;margin-left:2px;border-top:2px solid rgba(214,224,240,.36);
  border-right:2px solid rgba(214,224,240,.36);transform:rotate(45deg);border-radius:1px}

/* ------------------------------------------------- Paid this month (Invoices) */
html:not(.nolook13) #main > .j13m-paid{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 8px;padding:14px 16px 14px 18px;
  min-height:88px;border:1px solid rgba(255,255,255,.07);border-radius:var(--j12-r-card);background:#111A29;color:inherit;
  font-family:var(--j12-sf);text-align:left;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.28);-webkit-tap-highlight-color:transparent;
  box-sizing:border-box}
html:not(.nolook13) #main > .j13m-paid:active{background:#162133}
html:not(.nolook13) .j13m-pl{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
html:not(.nolook13) .j13m-pk{font:600 13px/18px var(--j12-sf);color:var(--j12-t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook13) .j13m-pv{font:800 28px/34px var(--j12-sf);letter-spacing:-.025em;color:var(--j12-t1);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook13) .j13m-pd{font:600 13px/18px var(--j12-sf);color:var(--j12-t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook13) .j13m-pd.j13m-up{color:#3ED598}
html:not(.nolook13) .j13m-pd.j13m-dn{color:#F25F5C}
html:not(.nolook13) .j13m-pr{flex:none;width:112px;height:46px;display:block}
html:not(.nolook13) .j13m-mini{display:block;width:112px;height:46px;overflow:visible}
html:not(.nolook13) .j13m-mini .j13m-line{stroke-width:2}
html:not(.nolook13) .j13m-mini .j13m-prev{fill:none;stroke:rgba(214,224,240,.3);stroke-width:1.5;stroke-dasharray:3 3;stroke-linecap:round}
html:not(.nolook13) .j13m-mini .j13m-end{stroke-width:2}

/* reduced motion: nothing slides, fades or draws in */
@media (prefers-reduced-motion:reduce){
  html:not(.nolook13) .j13m-back,html:not(.nolook13) .j13m-panel,html:not(.nolook13) .j13m-sg::before{transition:none!important}
}

/* ---------------------------------------------------------------- light mode (exact values; easy2 leaves je-light rules alone) */
html.je-light:not(.nolook13) .j13m-wrap{color:#0B1420}
html.je-light:not(.nolook13) .j13m-back{background:rgba(10,20,40,.32)}
html.je-light:not(.nolook13) .j13m-panel{background:#FFFFFF;box-shadow:0 -10px 34px rgba(16,32,58,.16),inset 0 1px 0 rgba(10,20,40,.04)}
html.je-light:not(.nolook13) .j13m-grab span{background:rgba(10,20,40,.18)}
html.je-light:not(.nolook13) .j13m-title,html.je-light:not(.nolook13) .j13m-total,html.je-light:not(.nolook13) .j13m-h,
html.je-light:not(.nolook13) .j13m-rn,html.je-light:not(.nolook13) .j13m-ot,html.je-light:not(.nolook13) .j13m-pv,
html.je-light:not(.nolook13) .j13m-cmp.j13m-at{color:#0B1420}
html.je-light:not(.nolook13) .j13m-done{color:#C2410C}
html.je-light:not(.nolook13) .j13m-cmp,html.je-light:not(.nolook13) .j13m-pd,html.je-light:not(.nolook13) .j13m-pk,
html.je-light:not(.nolook13) .j13m-rs,html.je-light:not(.nolook13) .j13m-ov,html.je-light:not(.nolook13) .j13m-empty,
html.je-light:not(.nolook13) .j13m-none{color:#56657A}
html.je-light:not(.nolook13) .j13m-cmp.j13m-up,html.je-light:not(.nolook13) .j13m-pd.j13m-up,html.je-light:not(.nolook13) .j13m-ra{color:#248A3D}
html.je-light:not(.nolook13) .j13m-cmp.j13m-dn,html.je-light:not(.nolook13) .j13m-pd.j13m-dn,html.je-light:not(.nolook13) .j13m-ra.j13m-neg{color:#D70015}
html.je-light:not(.nolook13) .j13m-dates,html.je-light:not(.nolook13) .j13m-xl,html.je-light:not(.nolook13) .j13m-yl{color:#5F6E84}
html.je-light:not(.nolook13) .j13m-seg::before{background:rgba(110,124,148,.12)}
html.je-light:not(.nolook13) .j13m-sg{color:#3A475A}
html.je-light:not(.nolook13) .j13m-sg.j13m-on{color:#0B1420}
html.je-light:not(.nolook13) .j13m-sg.j13m-on::before{background:#FFFFFF;box-shadow:0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04)}
html.je-light:not(.nolook13) .j13m-svg .j13m-base{stroke:rgba(10,20,40,.2)}
html.je-light:not(.nolook13) .j13m-svg .j13m-grid{stroke:rgba(10,20,40,.1)}
html.je-light:not(.nolook13) .j13m-line{stroke:#1FA971}
html.je-light:not(.nolook13) .j13m-line.j13m-flat{stroke:rgba(10,20,40,.24)}
html.je-light:not(.nolook13) .j13m-g0{stop-color:#1FA971;stop-opacity:.26}
html.je-light:not(.nolook13) .j13m-g1{stop-color:#1FA971;stop-opacity:0}
html.je-light:not(.nolook13) .j13m-end{fill:#1FA971;stroke:#FFFFFF}
html.je-light:not(.nolook13) .j13m-cl{stroke:rgba(10,20,40,.38)}
html.je-light:not(.nolook13) .j13m-cd{fill:#1FA971;stroke:#FFFFFF}
html.je-light:not(.nolook13) .j13m-list,html.je-light:not(.nolook13) .j13m-owed,html.je-light:not(.nolook13) .j13m-none{background:#F2F4F7}
html.je-light:not(.nolook13) .j13m-row + .j13m-row::before{background:rgba(10,20,40,.08)}
html.je-light:not(.nolook13) .j13m-row:active,html.je-light:not(.nolook13) .j13m-owed:active{background:#E5E9EF}
html.je-light:not(.nolook13) .j13m-av{background:hsl(var(--avh,210) 70% 92%);color:hsl(var(--avh,210) 55% 30%);
  box-shadow:inset 0 0 0 1px hsl(var(--avh,210) 45% 80%)}
html.je-light:not(.nolook13) .j13m-chev{border-color:rgba(52,64,84,.3)}
html.je-light:not(.nolook13) .j13m-mini .j13m-prev{stroke:rgba(52,64,84,.32)}
html.je-light:not(.nolook13) #main > .j13m-paid{background:#FFFFFF;border-color:rgba(10,20,40,.08);box-shadow:0 3px 10px rgba(16,32,58,.08)}
html.je-light:not(.nolook13) #main > .j13m-paid:active{background:#F2F4F7}