/* look12-motion.css — v463 · E. Motion that feels native (Joe 22 Oct 2026 9:42am "Make 5 major upgrades to the look of our
   dashboard make it look like a billion dollar crm … think of yourself as a world class software engineer").
   The look of app/look12-motion.js's work: the press, the folds' arrows, the skeleton bars, the counters' digits, the success
   moment. One spring (look12-tokens: cubic-bezier(.2,.8,.2,1) 260 ms) and, for letting go of a press, the same spring with a
   touch of overshoot. Transform and opacity only, except the check's stroke (a 64 px drawing). Every rule is under
   html:not(.nolook12) (the off switch) and everything that moves is under prefers-reduced-motion: no-preference — app.css's
   global "animation:none; transition:none" under reduce stays the floor. Light mode: easy2.js flips the literal colours below
   like every rule; the few it cannot know are set under html.je-light at the end. */

html:not(.nolook12){
  --j12m-out:cubic-bezier(.3,1.45,.55,1);   /* letting go: the spring with a touch of overshoot (about +0.3 %) */
  --j12m-skl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='2' width='70%25' height='11' rx='5.5'/%3E%3Crect x='0' y='21' width='44%25' height='9' rx='4.5'/%3E%3C/svg%3E");
}

/* ---- 1 · press: one press, ours ------------------------------------------------------------------------------------------
   look12-motion.js puts data-j12p on the one element under the finger: "d" pressed (scale .97), "dl" a tall card (.985),
   "u" letting go. The older presses (look5 .98, look10 .965, look-motion .985, app.js .97/.992, todaycards/todayjump .97,
   askjetsy .96, menubar .94) pressed the button AND every row and card around it at once (":active" climbs the page); under
   look12 they step aside so there is one press. The two :not(#j12-z) only lift the rule above any #main :active rule. */
@media (prefers-reduced-motion:no-preference){
  html:not(.nolook12) body .b:active,html:not(.nolook12) body .b.pri:active,html:not(.nolook12) body .b.ring:active,
  html:not(.nolook12) body .tj-c:active,html:not(.nolook12) body .tc-b:active,html:not(.nolook12) body .je2-tb:active,
  html:not(.nolook12) body .jnote-b:active,html:not(.nolook12) body .ja-chip:active,html:not(.nolook12) body .jmb-plus:active,
  html:not(.nolook12) body .tick:active,html:not(.nolook12) body #main .lx-t:active,html:not(.nolook12) body #tabbar .tb:active,
  html:not(.nolook12) body .jobwrap:active,html:not(.nolook12) body .need:active,html:not(.nolook12) body .bc-hd:active,
  html:not(.nolook12) body .person:active,html:not(.nolook12) body .call .hd:active,html:not(.nolook12) body .mo-h:active,
  html:not(.nolook12) body .jb-h:active,html:not(.nolook12) body .ld-h:active,html:not(.nolook12) body .dt:active,
  html:not(.nolook12) body .vc:active,html:not(.nolook12) body .bdet>summary:active,html:not(.nolook12) body .cmp-fold>summary:active,
  html:not(.nolook12) body .txn .txt:active{transform:none}

  html:not(.nolook12) body [data-j12p="d"]:not(#j12-z):not(#j12-z),
  html:not(.nolook12) body [data-j12p="dl"]:not(#j12-z):not(#j12-z){
    transition:transform 120ms cubic-bezier(.2,.8,.2,1),background-color .15s ease,color .15s ease,box-shadow .15s ease,filter .12s ease,opacity .15s ease}
  html:not(.nolook12) body [data-j12p="d"]:not(#j12-z):not(#j12-z){transform:scale(.97)}
  html:not(.nolook12) body [data-j12p="dl"]:not(#j12-z):not(#j12-z){transform:scale(.985)}
  html:not(.nolook12) body [data-j12p="u"]:not(#j12-z):not(#j12-z){
    transition:transform 420ms var(--j12m-out),background-color .15s ease,color .15s ease,box-shadow .15s ease,filter .12s ease,opacity .15s ease}
  /* a row of an inset grouped list (look12-today's "Your cards") lights up instead, the way iOS does: a row that shrank would
     open gaps in its group */
  html:not(.nolook12) body #main section.bc.tc-collapsed.j12-row[data-j12p]:not(#j12-z):not(#j12-z){transform:none}
  html:not(.nolook12) body #main section.bc.tc-collapsed.j12-row[data-j12p="d"],html:not(.nolook12) body #main section.bc.tc-collapsed.j12-row[data-j12p="dl"]{
    background:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)) 64px 0/calc(100% - 64px) 1px no-repeat,#1D2A40!important}
  html:not(.nolook12) body #main section.bc.tc-collapsed.j12-row.j12-r1[data-j12p="d"],html:not(.nolook12) body #main section.bc.tc-collapsed.j12-row.j12-r1[data-j12p="dl"]{background:#1D2A40!important}
  html.je-light:not(.nolook12) body #main section.bc.tc-collapsed.j12-row[data-j12p="d"],html.je-light:not(.nolook12) body #main section.bc.tc-collapsed.j12-row[data-j12p="dl"]{
    background:linear-gradient(rgba(10,20,40,.08),rgba(10,20,40,.08)) 64px 0/calc(100% - 64px) 1px no-repeat,#E9EEF5!important}
  html.je-light:not(.nolook12) body #main section.bc.tc-collapsed.j12-row.j12-r1[data-j12p="d"],html.je-light:not(.nolook12) body #main section.bc.tc-collapsed.j12-row.j12-r1[data-j12p="dl"]{background:#E9EEF5!important}

  /* ---- 1b · the fold arrows (look12.css draws them; they turn with the spring as the fold opens) --------------------- */
  html:not(.nolook12) body #main summary .rmchev::before,
  html:not(.nolook12) body #main details.cb-g>summary .cb-ch::before{transition:transform var(--j12-t,260ms) var(--j12-spring,cubic-bezier(.2,.8,.2,1))}
}

/* ---- 2 · one motion per change: look-motion's 180 ms tab fade, its card cascade and its fold fade step aside (the JS plays
   them on the spring, never twice on a swipe). Outside #main (a sheet's fold) look-motion keeps its own. -------------- */
html:not(.nolook12) body #main.jlk-in>*,html:not(.nolook12) body #main.jlk-in section.bc,
html:not(.nolook12) body #main details.jlk-open>summary~*{animation:none}

/* ---- 3 · counters: tabular digits, so a number that counts up never jiggles its neighbours ------------------------------ */
html:not(.nolook12) body [data-j12-count],html:not(.nolook12) body .j12-kv[data-j12-num]{font-variant-numeric:tabular-nums}

/* ---- 4 · loading: skeleton bars instead of "Loading…" ----------------------------------------------------------------------
   b · a line on its own: two rounded bars (70 % and 44 %), 30 px, a sheen across them. The words stay (transparent), so a screen
       reader still reads "Loading…". The bars are the line's own background seen through a mask, so nothing is added to the page.
   i · a few words in a row or a header (a card's sub line): one short pill. */
@keyframes j12-sheen{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
html:not(.nolook12) body [data-j12skl="b"]{position:relative!important;display:block!important;min-height:34px;margin-top:.25rem;margin-bottom:.25rem;
  padding-top:0!important;padding-bottom:0!important;overflow:hidden!important;color:transparent!important;-webkit-text-fill-color:transparent;text-shadow:none!important;
  font-size:1px!important;line-height:34px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:rgba(255,255,255,.085)!important;
  -webkit-mask:var(--j12m-skl) 0 50%/100% 32px no-repeat;mask:var(--j12m-skl) 0 50%/100% 32px no-repeat;pointer-events:none;-webkit-user-select:none;user-select:none}
html:not(.nolook12) body [data-j12skl="i"]{position:relative!important;display:inline-block!important;flex:0 0 auto!important;width:4.6em!important;min-width:0!important;max-width:40%!important;
  height:.62em!important;min-height:8px;align-self:center!important;vertical-align:middle;
  overflow:hidden!important;color:transparent!important;-webkit-text-fill-color:transparent;text-shadow:none!important;white-space:nowrap!important;
  border:0!important;border-radius:999px!important;box-shadow:none!important;background:rgba(255,255,255,.085)!important;padding:0!important;pointer-events:none}
html:not(.nolook12) body [data-j12skl]::before{display:none!important}
html:not(.nolook12) body [data-j12skl]::after{content:""!important;position:absolute!important;top:0;bottom:0;left:0;width:100%;height:auto;margin:0;border:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.13) 50%,rgba(255,255,255,0) 100%)!important;transform:translateX(-100%);
  animation:j12-sheen 1.5s cubic-bezier(.4,0,.2,1) infinite}
/* skel.js's own bars (a card's rows, the whole-screen shape while a tab loads): the same colour, corners and sheen */
html:not(.nolook12) body .jskel-wrap .jskel{background:rgba(255,255,255,.075);border-radius:8px}
html:not(.nolook12) body .jskel-wrap .jskel-row .jskel.dot{border-radius:12px}
html:not(.nolook12) body .jskel-wrap .jskel-strip .jskel{border-radius:16px}
html:not(.nolook12) body .jskel-wrap .jskel-row .jskel.b{border-radius:8px;background:rgba(255,255,255,.075)}
html:not(.nolook12) body .jskel-wrap .jskel::after{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 50%,rgba(255,255,255,0) 100%);
  animation:j12-sheen 1.5s cubic-bezier(.4,0,.2,1) infinite}
@media (prefers-reduced-motion:reduce){
  html:not(.nolook12) body [data-j12skl]::after,html:not(.nolook12) body .jskel-wrap .jskel::after{animation:none;opacity:0}
}

/* ---- 5 · done: a ring and a check that draw themselves, the word, the customer (look12-motion.js shows it 1.6 s) --------- */
@keyframes j12-hud-in{0%{opacity:0;transform:scale(.86)}100%{opacity:1;transform:scale(1)}}
@keyframes j12-hud-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.96)}}
@keyframes j12-draw{100%{stroke-dashoffset:0}}
@keyframes j12-pop{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}
html:not(.nolook12) body .j12-done{position:fixed;left:0;right:0;top:calc(50% - 86px);z-index:9400;width:164px;max-width:calc(100vw - 32px);margin:0 auto;
  box-sizing:border-box;padding:20px 14px 16px;border-radius:26px;text-align:center;pointer-events:none;
  background:rgba(17,26,41,.82);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),0 24px 60px rgba(0,0,0,.5);
  font-family:var(--j12-sf,-apple-system,system-ui,sans-serif);
  animation:j12-hud-in 260ms cubic-bezier(.2,.8,.2,1) both,j12-hud-out 260ms cubic-bezier(.4,0,1,1) 1320ms forwards}
html:not(.nolook12) body .j12-done svg{display:block;width:64px;height:64px;margin:0 auto 10px;overflow:visible;animation:j12-pop 420ms cubic-bezier(.2,.8,.2,1) 560ms both}
html:not(.nolook12) body .j12-done .j12-d0{fill:rgba(52,211,153,.14);stroke:none}
html:not(.nolook12) body .j12-done .j12-dc{fill:none;stroke:#34D399;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:170;stroke-dashoffset:170;
  animation:j12-draw 440ms cubic-bezier(.65,0,.35,1) 70ms forwards}
html:not(.nolook12) body .j12-done .j12-dk{fill:none;stroke:#34D399;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;
  animation:j12-draw 300ms cubic-bezier(.65,0,.35,1) 400ms forwards}
html:not(.nolook12) body .j12-done b{display:block;font:650 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:-.01em;color:#F5F7FB}
html:not(.nolook12) body .j12-done small{display:block;margin-top:2px;font:500 13px/18px var(--j12-sf,-apple-system,system-ui,sans-serif);color:#A7B3C6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){html:not(.nolook12) body .j12-done{display:none}}
html.nolook12 .j12-done{display:none}

/* ---- light mode: what easy2's flip cannot know (rules with je-light in them are never flipped) ------------------------------ */
html.je-light:not(.nolook12) body [data-j12skl]{background:rgba(16,32,58,.085)!important}
html.je-light:not(.nolook12) body [data-j12skl]::after{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%)!important}
html.je-light:not(.nolook12) body .jskel-wrap .jskel,html.je-light:not(.nolook12) body .jskel-wrap .jskel-row .jskel.b{background:rgba(16,32,58,.07)}
html.je-light:not(.nolook12) body .jskel-wrap .jskel::after{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 100%)}
html.je-light:not(.nolook12) body .j12-done{background:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px rgba(10,20,40,.08),0 20px 50px rgba(16,32,58,.18)}
html.je-light:not(.nolook12) body .j12-done .j12-d0{fill:rgba(16,185,129,.12)}
html.je-light:not(.nolook12) body .j12-done .j12-dc,html.je-light:not(.nolook12) body .j12-done .j12-dk{stroke:#0E9F6E}
html.je-light:not(.nolook12) body .j12-done b{color:#0B1220}
html.je-light:not(.nolook12) body .j12-done small{color:#5B677A}