/* look18 · v481 — Joe, Sun 25 Oct 2026
   10:49am (a screenshot of the ? sheet on Today, its title under the clock, the Got it button off the bottom): "Make sure everything fits in one screen"
   10:49am (a screenshot of Find: a purple "Send a proposal", a teal "Money owed"): "Make sure all colors are correct throughout crm and website"
   The colors keep v479's one meaning each (look17-colors.css): red late · orange your next step · yellow waiting · blue booked ·
   green done · gray off · everything else navy and white. Off for one phone: localStorage nolook18 = "1". */

/* ---- 1 · the ? sheet: below the clock, every step and the color key on one screen ---------------------------------- */
html:not(.nolook18) body .je2-sh.je2-help-sh{max-height:calc(100% - env(safe-area-inset-top,0px) - 10px)!important;padding-top:.3rem!important}
html:not(.nolook18) body .je2-help-sh .je2-hd{margin:0 0 .1rem!important}
html:not(.nolook18) body .je2-help-sh .je2-hd h3{font-size:1rem!important}
html:not(.nolook18) body .je2-help-sh .je2-hd p{font-size:.74rem!important}
html:not(.nolook18) body .je2-help-sh .je2-hc{grid-template-columns:50px minmax(0,1fr)!important;gap:.6rem!important;padding:.28rem 0!important;align-items:start!important}
html:not(.nolook18) body .je2-help-sh .je2-pic,html:not(.nolook18) body .je2-help-sh .je2-pic svg{width:50px!important;height:40px!important;border-radius:9px!important}
html:not(.nolook18) body .je2-help-sh .je2-hc .je2-n{width:16px!important;height:16px!important;font-size:.6rem!important;line-height:16px!important}
html:not(.nolook18) body .je2-help-sh .je2-hc b{font-size:.84rem!important;line-height:1.2!important;margin:0 0 .04rem!important}
html:not(.nolook18) body .je2-help-sh .je2-hc span{font-size:.72rem!important;line-height:1.3!important}
html:not(.nolook18) body .je2-help-sh .je2-colors{margin:.4rem 0 .1rem!important;padding:.45rem .6rem .35rem!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:.7rem}
html:not(.nolook18) body .je2-help-sh .je2-colors h4{grid-column:1/-1;margin:0 0 .15rem!important;font-size:.82rem!important}
html:not(.nolook18) body .je2-help-sh .je2-cl{padding:.22rem 0!important;gap:.4rem!important;border-top:0!important}
html:not(.nolook18) body .je2-help-sh .je2-cl b{font-size:.74rem!important;line-height:1.2!important}
html:not(.nolook18) body .je2-help-sh .je2-cl span{font-size:.66rem!important;line-height:1.25!important}
html:not(.nolook18) body .je2-help-sh .je2-cl .jc-dot{width:11px!important;height:11px!important;margin-top:.12rem!important}
html:not(.nolook18) body .je2-help-sh .je2-x{min-height:44px!important;margin-top:.35rem!important}
html:not(.nolook18) body .je2-help-sh .je2-reach{margin-top:.3rem!important;padding:.3rem .55rem!important;font-size:.72rem!important;line-height:1.35!important}
html:not(.nolook18) body .je2-help-sh .je2-reach a{min-height:36px!important;line-height:36px!important}
/* a short phone (an iPhone SE): the little pictures go, the words stay */
@media (max-height:720px){
  html:not(.nolook18) body .je2-help-sh .je2-hc{grid-template-columns:20px minmax(0,1fr)!important;gap:.45rem!important}
  html:not(.nolook18) body .je2-help-sh .je2-pic{width:20px!important;height:20px!important;background:none!important;box-shadow:none!important;overflow:visible!important}
  html:not(.nolook18) body .je2-help-sh .je2-pic svg{display:none!important}
  html:not(.nolook18) body .je2-help-sh .je2-hc .je2-n{position:static!important}
  html:not(.nolook18) body .je2-help-sh .je2-hc span{font-size:.7rem!important}
  html:not(.nolook18) body .je2-help-sh .je2-hc{padding:.18rem 0!important}
  html:not(.nolook18) body .je2-help-sh .je2-cl{padding:.15rem 0!important}
  html:not(.nolook18) body .je2-help-sh .je2-cl span{font-size:.62rem!important}
  html:not(.nolook18) body .je2-help-sh .je2-reach{font-size:.68rem!important;padding:.22rem .5rem!important}
  html:not(.nolook18) body .je2-help-sh .je2-reach a{min-height:30px!important;line-height:30px!important}
}

/* ---- 2 · Find → Start something: four actions, none of them a status — navy and white, the + in Jetsy's orange --------- */
html:not(.nolook18) body .jfind-wrap .jfind-add button[data-new]{--l14-pill-bg:var(--c-plain-bg)!important;--l14-pill-ink:var(--c-plain-tx)!important;
  background:var(--c-plain-bg)!important;color:var(--c-plain-tx)!important;box-shadow:inset 0 0 0 1px var(--c-plain-ring)!important}

/* ---- 3 · words that said the wrong thing ------------------------------------------------------------------------------- */
/* your roadmap: an idea is not started (gray), what's next is on the schedule (blue), done stays green */
html:not(.nolook18) body #main [style*="#B79CFF"],html:not(.nolook18) body #main [style*="#b79cff"]{color:var(--c-off-tx)!important}
html:not(.nolook18) body #main [style*="#FFD15C"],html:not(.nolook18) body #main [style*="#ffd15c"]{color:var(--c-booked-tx)!important}
/* the owner's desk: a heading is not "waiting" */
html:not(.nolook18) body #main .desk .k{color:var(--c-off-tx)!important}
html:not(.nolook18) body #main [style*="#FFF1B8"],html:not(.nolook18) body #main .desk .mt b{color:var(--c-plain-tx)!important}
/* something that needs you is orange, not red (red is only late) and not yellow (yellow is waiting on the customer) */
html:not(.nolook18) body #main :is(.rn-w.hot,.fu-why.hot,.at-t,.hc-pill.bad,.m5-line.warn,.j10-st){color:var(--c-next-tx)!important}
html:not(.nolook18) body #main .hc-pill.bad{background:var(--c-next-bg)!important}
/* not set up yet is gray (off) */
html:not(.nolook18) body #main .j50-st.amber{color:var(--c-off-tx)!important;background:var(--c-off-bg)!important}
/* taking something away is gray, never red */
html:not(.nolook18) body #main :is(.b.danger,.b.sm.danger,a.jaf-del){color:var(--c-off-tx)!important;border-color:var(--c-plain-ring)!important;background:transparent!important}
/* the call log's dots: a booked call is blue, a message needs you (orange), spam is off */
html:not(.nolook18) body #main .dot.booked{background:var(--c-booked)!important}
html:not(.nolook18) body #main .dot.message{background:var(--c-next)!important}
html:not(.nolook18) body #main .chip.spam{color:var(--c-off-tx)!important;background:var(--c-off-bg)!important}
html:not(.nolook18) body #main .ld-st.no{color:var(--c-off-tx)!important;background:var(--c-off-bg)!important}
/* actions are navy and white (the one main button orange): + Add to calendar, Quick price */
html:not(.nolook18) body #main#main .jcal .jc-add{color:var(--c-next-tx)!important}
html:not(.nolook18) body #main .qp-today{border-color:var(--c-plain-ring)!important}
html:not(.nolook18) body #main .qp-today .qp-i{background:var(--c-next-bg)!important;color:var(--c-next-tx)!important}
html:not(.nolook18) body #main .qp-today .qp-a{color:var(--c-next-tx)!important}
/* labels with no meaning: plain */
html:not(.nolook18) body #main :is(.mads-goal,.ai4-msg.bad,.co-dot,.cob){color:var(--c-off-tx)!important}
/* every initials coin the same navy, wherever it is (a business, a customer, a payer) */
html:not(.nolook18):not(#j18x) body :is(#main,.j13m,.j13m-sh,.je2-sh) :is(.av,.j10-av,.j13-av,.j13-coin,.j13m-av):not(:has(img)){background:var(--c-coin-bg)!important;color:var(--c-coin-tx)!important}
/* the last few (the v481 audit of every tab and sheet): empty-state icons quiet, a warning dot orange, the 5.0 day's dot quiet, "no painter yet" orange */
html:not(.nolook18):not(#j18x) body #main .j12-ei,html:not(.nolook18):not(#j18x) body #main .j12-ei :is(path,rect,circle,line,polyline){stroke:var(--c-icon)!important}
html:not(.nolook18):not(#j18x) body #main li.warn > i{background:var(--c-next)!important}
html:not(.nolook18):not(#j18x) body #main .j50-dayname > i{background:var(--c-icon)!important}
html:not(.nolook18):not(#j18x):not(#j18y):not(#j18z) body #main#main .j10-st{color:var(--c-next-tx)!important}
/* Up next on Today: Booked, In progress, Appointment, Route, Work order sent are all on the calendar — blue, like the card's blue edge */
html:not(.nolook18):not(#j18x):not(#j18y):not(#j18z) #j12-cc .j12-vt .j12-chip.j12-info{background:var(--c-booked-bg)!important;color:var(--c-booked-tx)!important}
html:not(.nolook18):not(#j18x):not(#j18y):not(#j18z) #j12-cc .j12-vt .j12-chip.j12-info > i{background:var(--c-booked)!important}
/* Business tiles: a two- or three-digit count (48, 99+) sat on the tile's name — its right edge now stops at the icon's corner */
html:not(.nolook18):not(#j18x) body #lx .lx-grid .lx-t .lx-b.lx-b{left:auto!important;right:calc(100% - 52px)!important}
/* the tab bar: the words scrolling under it no longer read through it */
html:not(.nolook18):not(.je-light) body nav.tabs{background-color:rgba(12,17,27,.9)!important}
/* v482 (Joe 25 Oct 12:58pm "Can you fix the your receptionist text that scrolls down with screen"): Setup's heading scrolls with the page */
html:not(.nolook18):not(#j18x) body #main > #setco ~ .h.j6-hi{position:static!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:transparent!important}
/* a heading that stays at the top of its list (Call log, Work orders, Customers…): solid, the rows never read through it */
html:not(.nolook18):not(.je-light):not(#j18x) body #main .h.j6-hi{background:rgba(6,9,15,.97)!important}
/* v482 (Joe 25 Oct 1:01pm "Make the top blend in when you swipe"): the orange glow at the top starts from the plain background, so the space a
   pull opens above the page (the phone fills it with the plain color) meets the page with no line */
html:not(.nolook18):not(.je-light):not(#j18x) body{background:linear-gradient(180deg,#06090F 0,rgba(6,9,15,0) 170px) no-repeat,radial-gradient(120% 460px at 50% -160px,rgba(255,106,26,.15),rgba(255,106,26,0) 72%) no-repeat,#06090F!important}
html:not(.nolook18):not(.je-light):not(#j18x) body::before{background:#06090F!important}
/* v484 · a customer's review ------------------------------------------------------------------------------------------- */
/* Setup → Screen → Language: two buttons side by side, the one in use filled */
html:not(.nolook18):not(#j18x) body #main .je2-lang{display:flex;gap:6px;flex:none}
html:not(.nolook18):not(#j18x) body #main .je2-lang .b{min-height:40px;padding:0 .75rem;border-radius:999px;background:transparent!important;color:var(--c-plain-tx,#E9F2FB)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)!important;border:0!important;font-weight:700}
html:not(.nolook18):not(#j18x) body #main .je2-lang .b[aria-pressed=true]{background:#F2F7FC!important;color:#0B1E33!important;box-shadow:none!important}
html.je-light:not(.nolook18) body #main .je2-lang .b{color:#0B1E33!important;box-shadow:inset 0 0 0 1px rgba(11,30,51,.25)!important}
html.je-light:not(.nolook18) body #main .je2-lang .b[aria-pressed=true]{background:#0B1E33!important;color:#F2F7FC!important}
/* "No password yet … Choose one": navy and white — blue only means booked */
html:not(.nolook18):not(#j18x) body #jpwbar{background:rgba(255,255,255,.05)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)!important}
html:not(.nolook18):not(#j18x) body #jpwbar a[data-pb=go]{background:transparent!important;color:#F2F7FC!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)!important}
html.je-light:not(.nolook18) body #jpwbar{background:rgba(11,30,51,.04)!important;box-shadow:inset 0 0 0 1px rgba(11,30,51,.14)!important}
html.je-light:not(.nolook18) body #jpwbar a[data-pb=go]{color:#0B1E33!important;box-shadow:inset 0 0 0 1.5px rgba(11,30,51,.35)!important}
/* "No phone on this package": a package not bought is off (gray), not waiting (yellow) */
html:not(.nolook18):not(#j18x) body .demobar.demo-nophone>b{color:var(--c-off-tx,#9AA6B6)!important}
/* the tab bar: solid, so a switch or a line under it never shows through */
html:not(.nolook18):not(.je-light):not(#j18x) body nav.tabs{background-color:rgba(12,17,27,.97)!important}

/* ================================================== v486 · a second customer's review (Joe 25 Oct 3:10pm) ==== */
/* the top bar: words under it no longer show through while scrolling (the tab bar has been solid since v481) */
html:not(.nolook18):not(.je-light) body #j6bar.j6-bar{background:rgba(12,17,27,.93)!important}
/* the package line steps aside while the free-trial bar shows; its words are plain, not yellow (yellow means waiting) */
html:not(.nolook18) body>.demobar.demo-quiet{display:none!important}
html:not(.nolook18) body .demobar.demo-nophone>span{color:var(--j12-t2,#B5C6D8)!important}