/* look17-colors.css — v479 · one color, one meaning (Joe, Sat 24 Oct 2026, 6:34pm: "Create a color system so that every color means
   one thing only so that it's easy to understand crm. For example red means passed due. Or build whatever you suggest").
     RED     late          past due, overdue, a missed call nobody returned
     ORANGE  your next step something new, something that needs you, the main button — and Jetsy's own color
     YELLOW  waiting       a quote sent, a bill not paid yet (not late), waiting on the customer
     BLUE    booked        on the calendar, scheduled, in progress
     GREEN   done          paid, won, finished, answering
     GRAY    off           not set up, lost, put away
   Everything with no meaning is navy and white: customers' coins, card icons, the Call / Text / Proposal / app buttons, the company tags.
   The ? sheet on every tab ends with this legend (easy2.js). Loaded last (after look16-own.css). Off for one phone: localStorage
   nolook17 = 1 (html.nolook17). Every rule sits under html:not(.nolook17) with fake ids so it wins over looks 10–16 whatever the order. */

html:not(.nolook17){
  --c-late:#F25F5C;   --c-late-bg:rgba(242,95,92,.16);   --c-late-tx:#FF8A87;
  --c-next:#FF6A1A;   --c-next-bg:rgba(255,106,26,.16);  --c-next-tx:#FFA066;
  --c-wait:#F5C451;   --c-wait-bg:rgba(245,196,81,.16);  --c-wait-tx:#F5C451;
  --c-booked:#4BA3F5; --c-booked-bg:rgba(75,163,245,.18);--c-booked-tx:#7CC0FF;
  --c-done:#3ED598;   --c-done-bg:rgba(62,213,152,.16);  --c-done-tx:#5BE3A8;
  --c-off:#8A94A6;    --c-off-bg:rgba(201,212,230,.10);  --c-off-tx:rgba(214,224,240,.66);
  --c-plain-bg:rgba(201,212,230,.09); --c-plain-tx:#DCE7F2; --c-plain-ring:rgba(201,212,230,.16);
  --c-coin-bg:#1E2A3C; --c-coin-tx:#DCE7F2; --c-icon:#AEBBD0;
  /* look13's status tokens: each now says the system's one meaning */
  --k13-red-bg:var(--c-late-bg);   --k13-red-tx:var(--c-late-tx);
  --k13-ora-bg:var(--c-next-bg);   --k13-ora-tx:var(--c-next-tx);
  --k13-amb-bg:var(--c-wait-bg);   --k13-amb-tx:var(--c-wait-tx);
  --k13-blu-bg:var(--c-booked-bg); --k13-blu-tx:var(--c-booked-tx);
  --k13-grn-bg:var(--c-done-bg);   --k13-grn-tx:var(--c-done-tx);
  --k13-gry-bg:var(--c-off-bg);    --k13-gry-tx:var(--c-off-tx);
  --k13-badge:var(--c-next);       --k13-badge-tx:#1A0C02;
  /* buttons that do something are not a status: navy and white (the one main button on a screen stays orange) */
  --k13-call-bg:var(--c-plain-bg); --k13-call-tx:var(--c-plain-tx);
  --k13-msg-bg:var(--c-plain-bg);  --k13-msg-tx:var(--c-plain-tx);
  --k13-pay-bg:var(--c-plain-bg);  --k13-pay-tx:var(--c-plain-tx);
  --j14-prop-bg:var(--c-plain-bg); --j14-prop-tx:var(--c-plain-tx);
  --j14-app-bg:var(--c-plain-bg);  --j14-app-tx:var(--c-plain-tx);
  --j14-ai-bg:var(--c-plain-bg);   --j14-ai-tx:var(--c-plain-tx);
  /* the calendar's kinds: anything booked is blue; a call to return and a new lead need you (orange); overdue red; done green */
  --j14-k-site:var(--c-booked); --j14-k-est:var(--c-booked); --j14-k-appt:var(--c-booked); --j14-k-route:var(--c-booked); --j14-k-resv:var(--c-booked);
  --j14-k-due:var(--c-next); --j14-k-inn:var(--c-next); --j14-k-late:var(--c-late); --j14-k-done:var(--c-done);
}
html.je-light:not(.nolook17){
  --c-late:#D93B3B;   --c-late-bg:rgba(217,59,59,.10);   --c-late-tx:#B42323;
  --c-next:#E2561B;   --c-next-bg:rgba(226,86,27,.10);   --c-next-tx:#C2410C;
  --c-wait:#B7791F;   --c-wait-bg:rgba(183,121,31,.12);  --c-wait-tx:#8A5A10;
  --c-booked:#1F6FD1; --c-booked-bg:rgba(31,111,209,.10);--c-booked-tx:#1F5FB8;
  --c-done:#1FA971;   --c-done-bg:rgba(31,169,113,.12);  --c-done-tx:#15784F;
  --c-off:#6B7A90;    --c-off-bg:rgba(16,32,58,.06);     --c-off-tx:rgba(16,32,58,.60);
  --c-plain-bg:rgba(16,32,58,.06); --c-plain-tx:#1A2A40; --c-plain-ring:rgba(16,32,58,.14);
  --c-coin-bg:#E8EDF4; --c-coin-tx:#24324A; --c-icon:#4A5A72;
  --k13-red-bg:var(--c-late-bg);   --k13-red-tx:var(--c-late-tx);
  --k13-ora-bg:var(--c-next-bg);   --k13-ora-tx:var(--c-next-tx);
  --k13-amb-bg:var(--c-wait-bg);   --k13-amb-tx:var(--c-wait-tx);
  --k13-blu-bg:var(--c-booked-bg); --k13-blu-tx:var(--c-booked-tx);
  --k13-grn-bg:var(--c-done-bg);   --k13-grn-tx:var(--c-done-tx);
  --k13-gry-bg:var(--c-off-bg);    --k13-gry-tx:var(--c-off-tx);
  --k13-badge:var(--c-next);       --k13-badge-tx:#FFFFFF;
  --k13-call-bg:var(--c-plain-bg); --k13-call-tx:var(--c-plain-tx);
  --k13-msg-bg:var(--c-plain-bg);  --k13-msg-tx:var(--c-plain-tx);
  --k13-pay-bg:var(--c-plain-bg);  --k13-pay-tx:var(--c-plain-tx);
  --j14-prop-bg:var(--c-plain-bg); --j14-prop-tx:var(--c-plain-tx);
  --j14-app-bg:var(--c-plain-bg);  --j14-app-tx:var(--c-plain-tx);
  --j14-ai-bg:var(--c-plain-bg);   --j14-ai-tx:var(--c-plain-tx);
  --j14-k-site:var(--c-booked); --j14-k-est:var(--c-booked); --j14-k-appt:var(--c-booked); --j14-k-route:var(--c-booked); --j14-k-resv:var(--c-booked);
  --j14-k-due:var(--c-next); --j14-k-inn:var(--c-next); --j14-k-late:var(--c-late); --j14-k-done:var(--c-done);
}

/* ------------------------------------------------------------------------- statuses that said two things -- */
/* a hot lead needs you (orange), a warm one is waiting (yellow), a cold one is off (gray) — hot was red, red is only "late" now */
html:not(.nolook17):not(#j17x):not(#j17y) body #main .ld-st.ld-st.hot{background:var(--c-next-bg)!important;color:var(--c-next-tx)!important}
html:not(.nolook17):not(#j17x):not(#j17y) body #main .ld-st.ld-st.warm{background:var(--c-wait-bg)!important;color:var(--c-wait-tx)!important}
html:not(.nolook17):not(#j17x):not(#j17y) body #main .ld-st.ld-st.cold{background:var(--c-off-bg)!important;color:var(--c-off-tx)!important}
html:not(.nolook17):not(#j17x):not(#j17y) body #main#main .ld-n>.ld-st.hot{background:var(--c-next)!important}
html:not(.nolook17):not(#j17x):not(#j17y) body #main#main .ld-n>.ld-st.warm{background:var(--c-wait)!important}
html:not(.nolook17):not(#j17x):not(#j17y) body #main#main .ld-n>.ld-st.cold{background:var(--c-off)!important}
/* something new, a message, a caller who wants a person: needs you (orange) — new was blue, blue is only "booked" now */
html:not(.nolook17):not(#j17x):not(#j17y) body #main :is(.chip.chip.message,.chip.chip.new,.pill.pill.new,.chip.chip.escalated,.chip.chip.escalated_cant_answer,.chip.chip.escalated_over_quote,.chip.chip.escalated_wants_human,.chip.chip.escalated_upset){
  background:var(--c-next-bg)!important;color:var(--c-next-tx)!important}
html:not(.nolook17):not(#j17x):not(#j17y) body #main .chip.chip.edited{background:var(--c-off-bg)!important;color:var(--c-off-tx)!important}
/* a quote out is waiting on the customer (yellow) — it was orange */
html:not(.nolook17):not(#j17x):not(#j17y) body #main .cl-s.cl-s.cl-quote{color:var(--c-wait-tx)!important}
/* Today's summary: "2 need you", "11 hot" need you (orange) */
html:not(.nolook17):not(#j17x):not(#j17y) #j12-cc .j12-due{color:var(--c-next-tx)!important}
/* money that came in is done (green): the summary's 7-day band and the money sheet's bars */
html:not(.nolook17):not(#j17x) #j12-cc .j12-spark .j12-sl{stroke:var(--c-done)!important}
html:not(.nolook17):not(#j17x) #j12-cc .j12-spark .j12-s0{stop-color:var(--c-done)!important}
html:not(.nolook17):not(#j17x) .j13m-bar{fill:var(--c-done)!important}
html:not(.nolook17):not(#j17x) .j13m-bar.j13m-bar0{fill:var(--c-off-bg)!important}
html:not(.nolook17):not(#j17x) .j13m-bar.j13m-hit{fill:var(--c-done-tx)!important}

/* ------------------------------------------------------------------------- no meaning: navy and white -- */
/* customers' coins (one color each was "one customer, one color" — it read as a status) */
html:not(.nolook17):not(#j17x):not(#j17y) body #main#main :is(.av[style*="--avh"],.j10-av,.jwl-av,.jcm-av,.pcard>.ptop>.av.big),
html:not(.nolook17):not(#j17x):not(#j17y) body .j13m-av{background:var(--c-coin-bg)!important;color:var(--c-coin-tx)!important;box-shadow:inset 0 0 0 1px var(--c-plain-ring)!important}
html:not(.nolook17):not(#j17x) .j13-coin{--j13-co:var(--c-coin-bg)!important;--j13-co-ink:var(--c-coin-tx)!important}
/* card icons: one quiet color for every kind */
html:not(.nolook17):not(#j17x) :is([data-l13c],[data-l14c],.j13-ico,.j14-ico:not(.j14-goldi),.l14-ico){--l13-c:var(--c-icon)!important;--l14-c:var(--c-icon)!important;--j15c:var(--c-icon)!important}
/* the company tags on rows (a company is not a status) */
html:not(.nolook17):not(#j17x):not(#j17y) body :is(.co-dot){color:var(--c-off-tx)!important;background:none!important}
html:not(.nolook17):not(#j17x):not(#j17y) body .co-dot i{background:var(--c-off)!important}

/* ------------------------------------------------------------------------- the legend in the ? sheet -- */
html:not(.nolook17) .je2-colors{margin:.9rem 0 .2rem;padding:.75rem .85rem .35rem;border-radius:14px;background:var(--c-plain-bg);box-shadow:inset 0 0 0 1px var(--c-plain-ring)}
html:not(.nolook17) .je2-colors h4{margin:0 0 .45rem;font-size:.95rem;line-height:1.25;font-weight:800}
html:not(.nolook17) .je2-cl{display:flex;align-items:flex-start;gap:.65rem;padding:.38rem 0}
html:not(.nolook17) .je2-cl+.je2-cl{border-top:1px solid var(--c-plain-ring)}
html:not(.nolook17) .je2-cl b{display:block;font-size:.88rem;line-height:1.25}
html:not(.nolook17) .je2-cl span{display:block;font-size:.78rem;line-height:1.35;opacity:.8}
html:not(.nolook17) .je2-cl .jc-dot{flex:none;width:14px;height:14px;margin-top:.15rem;border-radius:50%}
html:not(.nolook17) .jc-dot.jc-late{background:var(--c-late)} html:not(.nolook17) .jc-dot.jc-next{background:var(--c-next)}
html:not(.nolook17) .jc-dot.jc-wait{background:var(--c-wait)} html:not(.nolook17) .jc-dot.jc-booked{background:var(--c-booked)}
html:not(.nolook17) .jc-dot.jc-done{background:var(--c-done)} html:not(.nolook17) .jc-dot.jc-off{background:var(--c-off)}
html.nolook17 .je2-colors{display:none}
/* the company badges on rows and cards (.cob: their company's color) */
html:not(.nolook17):not(#j17x):not(#j17y) body .cob{color:var(--c-off-tx)!important;border-color:var(--c-plain-ring)!important;background:none!important}
/* Today's group headings (todayjump: one color per group) and the assistant's name (pink): words, not statuses */
html:not(.nolook17):not(#j17x):not(#j17y) body #main .tj-gh{color:var(--c-off-tx)!important}
html:not(.nolook17):not(#j17x) body #main :is(b,span)[style*="#FFB3D6"]{color:var(--c-plain-tx)!important}
/* the money sheet: more money than before is good (green); less is not late, so it is gray — red only ever means late;
   (light mode had Apple's own darker green and red here) */
html:not(.nolook17):not(#j17x) :is(.j13m-cmp,.j13m-pd).j13m-up,html:not(.nolook17):not(#j17x) .j13m-ra{color:var(--c-done-tx)!important}
html:not(.nolook17):not(#j17x) :is(.j13m-cmp,.j13m-pd).j13m-dn,html:not(.nolook17):not(#j17x) .j13m-ra.j13m-neg{color:var(--c-off-tx)!important}
/* the folded rows' group tints on Today (day, money, business, grow, Jetsy) and the summary's info chip: words, not statuses */
html:not(.nolook17):not(#j17x) body #main section.bc.tc-collapsed[data-j12-g]{--j12-g:var(--c-icon)!important;--j12-g-bg:var(--c-plain-bg)!important}
html:not(.nolook17):not(#j17x):not(#j17y) #j12-cc .j12-chip.j12-info{background:var(--c-off-bg)!important;color:var(--c-off-tx)!important}
/* a customer's one-line status on Customers, said by the system */
html:not(.nolook17):not(#j17x):not(#j17y) body #main .cl-s.cl-s.cl-late{color:var(--c-late-tx)!important}
html:not(.nolook17):not(#j17x):not(#j17y) body #main .cl-s.cl-s.cl-due{color:var(--c-wait-tx)!important}
html:not(.nolook17):not(#j17x):not(#j17y) body #main .cl-s.cl-s.cl-booked{color:var(--c-booked-tx)!important}
html:not(.nolook17):not(#j17x):not(#j17y) body #main .cl-s.cl-s.cl-paid{color:var(--c-done-tx)!important}
/* the counts on the company chips at the top (things waiting on you in that company): orange, like every count */
html:not(.nolook17):not(#j17x):not(#j17y) body .j406-bdg{background:var(--c-next)!important;color:var(--k13-badge-tx)!important}
/* red only ever means late: a caller who wants a person (and the reason why) needs you — orange; "not switched on" is off — gray;
   Delete removes something — gray (it is not late); a company's own dot is not a status — gray */
html:not(.nolook17):not(#j17x):not(#j17y) body #main .dot.escalated{background:var(--c-next)!important}
html:not(.nolook17):not(#j17x):not(#j17y) body #main .why{color:var(--c-next-tx)!important}
html:not(.nolook17):not(#j17x):not(#j17y) body #main .ai4-msg.bad{color:var(--c-off-tx)!important}
html:not(.nolook17):not(#j17x):not(#j17y) body #main :is(button,a)[data-act$="del"],
html:not(.nolook17):not(#j17x):not(#j17y) body #main :is(button,a)[data-act*="delete"]{color:var(--c-off-tx)!important;background:var(--c-off-bg)!important}
html:not(.nolook17):not(#j17x):not(#j17y) body .j406-dot{background:var(--c-off)!important}

/* v480 · an icon look13-icons has not sorted yet (its first tenth of a second on a new screen) is already the quiet color: it was
   orange (the tile, the letters before the icon, the icon's lines) and then went gray in front of him (Joe 24 Oct 10:07pm). Every one
   of them is sorted a moment later (data-l13c), and the sorted look is this same color — so this only removes the orange moment. */
html:not(.nolook17):not(#j17x) body :is(.lx-t .lx-m, #lx .lx-t .lx-m, .cmk-m.j6-mi, main summary.cb-s>.cb-nm>.j6-ji, main .h>h2>.j6-ji, section.bc>.bc-hd h2>.ji:first-child):not([data-l13c]){
  background:color-mix(in srgb,var(--c-icon) 20%,transparent)!important;background-image:none!important;color:var(--c-icon)!important;box-shadow:none!important;border:0!important}
html:not(.nolook17):not(#j17x) body :is(.lx-t .lx-m, .cmk-m.j6-mi, main summary.cb-s>.cb-nm>.j6-ji, main .h>h2>.j6-ji, section.bc>.bc-hd h2>.ji:first-child):not([data-l13c]) svg [stroke]:not([stroke="none"]){stroke:var(--c-icon)!important}
html:not(.nolook17):not(#j17x) body :is(.lx-t .lx-m, .cmk-m.j6-mi, main summary.cb-s>.cb-nm>.j6-ji, main .h>h2>.j6-ji, section.bc>.bc-hd h2>.ji:first-child):not([data-l13c]) svg [fill]:not([fill="none"]):not([fill*="4FA8FF"]):not([fill$="fff"]){fill:var(--c-icon)!important}
html:not(.nolook17):not(#j17x) body :is(.lx-t .lx-m, .cmk-m.j6-mi, main summary.cb-s>.cb-nm>.j6-ji, main .h>h2>.j6-ji, section.bc>.bc-hd h2>.ji:first-child):not([data-l13c]) svg [fill*="4FA8FF"]{fill:var(--c-icon)!important;fill-opacity:.28!important}