/* look13-actions.css — v468 B · one orange per screen, Apple's action colors.
   Joe, Fri 23 Oct 2026, 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".

   WHY. Before this, a solid orange Call sat on every customer row and every bill, an orange button in every work-order card and Setup
   row, and orange counts on the tiles. Orange, our "do this" color, was everywhere, so it meant nothing. The best iPhone apps keep ONE
   filled accent button per screen and tint everything that repeats in the color of what it does: the Phone app's green for calling,
   Messages' blue for texting, teal for money that came in, red words for deleting, and iOS's red badges for "this needs you".

   WHAT (colors only: builder C owns layout inside lists, so nothing here sets a size or a position, except on the badges):
     1 · calling (tel: links)                   → green tint (the Customers list's round call buttons too)
     2 · texting / asking / reminding           → blue tint (sms:, mailto:, Ask for it, Send reminder, Follow up's Text)
     3 · money                                  → teal tint (Got paid, Mark paid, + payment, Collect $450)
     4 · any other orange that repeats          → orange TINT (look13-actions.js marks it data-k13a="tint": a row or card action,
                                                  a second "+ New", Today's cards' buttons)
     5 · the screen's one main action           → stays solid orange (data-k13a="main": Today's New job, + New proposal, a Save,
                                                  a customer page's next step)
     6 · an export, Open, More                  → the neutral gray button (data-k13a="neutral")
     7 · deleting                               → red words on the neutral button
     8 · status pills, one tinted capsule each: Hot red · Warm orange · Cold blue · Not sent gray · bill not sent yet / waiting amber ·
         Paid / done green · Late / past due red · Booked blue · a message blue · a fact gray
     9 · badges, iOS red #D93B3B with white figures: the tab bar's counts, the Business tiles' counts, a group's "waiting" count,
         Today's Work the list, the More dot, Follow up's dot, and a new badge on a Your cards tile that has something hot.
         A count that is only a size (group totals, the "done" count) is a quiet gray pill. Switches stay iOS green (untouched).

   LIGHT MODE (html.je-light): easy2.js flips the literal colors of every rule that does not name je-light. So every color here is a
   variable: the dark values are set first, the light values again under html.je-light (that rule is never flipped, and it wins).
   OFF: localStorage nolook13 = 1 → html.nolook13; every rule is under html:not(.nolook13), so today's look comes back exactly. */

/* =========================================================================================== 0 · the colors ==== */
html:not(.nolook13){
  --k13-or-bg:rgba(255,106,26,.16);   --k13-or-tx:#FF9A5C;    /* Jetsy orange, tinted (a repeated action) */
  --k13-call-bg:rgba(62,213,152,.16);  --k13-call-tx:#4ADE80;  /* green (#3ED598): calling */
  --k13-msg-bg:rgba(75,163,245,.20);  --k13-msg-tx:#6CB4FF;   /* blue (#4BA3F5): texting, asking; lifted for small type on dark */
  --k13-pay-bg:rgba(54,194,180,.16);  --k13-pay-tx:#6BDCEF;   /* teal (#36C2B4): money that came in */
  --k13-red-bg:rgba(242,95,92,.16);   --k13-red-tx:#FF8A80;   /* red (#F25F5C): hot, late */
  --k13-ora-bg:rgba(255,178,89,.17);  --k13-ora-tx:#FFB547;   /* orange (#FFB259): warm */
  --k13-amb-bg:rgba(245,196,81,.15);  --k13-amb-tx:#FFD84A;   /* yellow (#F5C451): waiting on you, bill not sent yet */
  --k13-blu-bg:rgba(75,163,245,.20);  --k13-blu-tx:#6CB4FF;   /* blue: cold, booked, a message */
  --k13-grn-bg:rgba(62,213,152,.16);   --k13-grn-tx:#5BE38A;   /* green: paid, done */
  --k13-gry-bg:rgba(255,255,255,.08); --k13-gry-tx:#C7CDD6;   /* gray (#8A94A6 family): a fact, not a state */
  --k13-del-tx:#FF8A80;                                         /* deleting: red words */
  --k13-badge:#D93B3B; --k13-badge-tx:#FFFFFF;                  /* the iOS badge */
  --k13-quiet-bg:rgba(255,255,255,.14); --k13-quiet-tx:#E6EAF0; /* a count that is only a size */
}
html.je-light:not(.nolook13){
  --k13-or-bg:rgba(255,106,26,.12);   --k13-or-tx:#B5470B;
  --k13-call-bg:rgba(31,169,113,.15);  --k13-call-tx:#1C7A33;
  --k13-msg-bg:rgba(31,111,209,.12);   --k13-msg-tx:#0059C9;
  --k13-pay-bg:rgba(30,158,146,.15);  --k13-pay-tx:#0A6A7D;
  --k13-red-bg:rgba(217,59,59,.12);   --k13-red-tx:#C42B1C;
  --k13-ora-bg:rgba(217,130,43,.15);   --k13-ora-tx:#A04800;
  --k13-amb-bg:rgba(201,154,30,.22);   --k13-amb-tx:#7A5200;
  --k13-blu-bg:rgba(31,111,209,.12);   --k13-blu-tx:#0059C9;
  --k13-grn-bg:rgba(31,169,113,.15);   --k13-grn-tx:#1C7A33;
  --k13-gry-bg:rgba(10,20,40,.06);    --k13-gry-tx:#4A5262;
  --k13-del-tx:#C42B1C;
  --k13-badge:#D93B3B; --k13-badge-tx:#FFFFFF;
  --k13-quiet-bg:rgba(10,20,40,.08);  --k13-quiet-tx:#3A4252;
}

/* ================================================================================= 1–7 · the buttons ==== */
/* a tinted button: no gradient, no glow, no lit edge; the words and the icon in the color of what it does (every icon in these
   buttons strokes currentColor). Beats look12's orange (1,3,2)!important and its light copy (1,4,2)!important. */
html:not(.nolook13) body #main :is(a,button).b.b:is([href^="tel:"],[href^="sms:"],[href^="mailto:"],[data-act="billask"],[data-bact="gpask"],[data-bact="cctext"],[data-fu="text"],.au-btn,
  [data-cact="jobpay"],[data-bact="jbpaid"],[data-bact="payadd"],[data-bact="payadd2"],[data-bact="trkpaid"],[data-k13a="pay"],[data-k13a="tint"]){
  background-image:none!important;box-shadow:none!important;text-shadow:none!important;font-weight:650}
/* 1 · calling: green */
html:not(.nolook13) body #main :is(a,button).b.b[href^="tel:"]{background-color:var(--k13-call-bg)!important;color:var(--k13-call-tx)!important}
/* 2 · texting, asking, reminding: blue */
html:not(.nolook13) body #main :is(a,button).b.b:is([href^="sms:"],[href^="mailto:"],[data-act="billask"],[data-bact="gpask"],[data-bact="cctext"],[data-fu="text"],.au-btn){
  background-color:var(--k13-msg-bg)!important;color:var(--k13-msg-tx)!important}
/* 3 · money that came in: teal */
html:not(.nolook13) body #main :is(a,button).b.b:is([data-cact="jobpay"],[data-bact="jbpaid"],[data-bact="payadd"],[data-bact="payadd2"],[data-bact="trkpaid"],[data-k13a="pay"]){
  background-color:var(--k13-pay-bg)!important;color:var(--k13-pay-tx)!important}
/* 4 · a repeated orange action: tinted orange (look13-actions.js decides which) */
html:not(.nolook13) body #main :is(a,button).b.b[data-k13a="tint"]:not([href^="tel:"]):not([href^="sms:"]):not([href^="mailto:"]){
  background-color:var(--k13-or-bg)!important;color:var(--k13-or-tx)!important}
/* … and the two orange buttons that are not .b (Today's New job, a bare button.pri) when they are not the screen's main action */
html:not(.nolook13) body #main :is(button,a).j12-new.j12-new[data-k13a="tint"],
html:not(.nolook13) body #main :is(button,a).pri.pri[data-k13a="tint"]:not(.b){
  background:var(--k13-or-bg)!important;color:var(--k13-or-tx)!important;box-shadow:none!important;text-shadow:none!important}
/* 6 · an export, Open, More: the neutral button every other Open already is */
html:not(.nolook13) body #main :is(a,button).b.b[data-k13a="neutral"]{background:var(--k13-gry-bg)!important;color:var(--j12-t1,#F5F7FB)!important;
  box-shadow:inset 0 0 0 1px var(--j12-stroke,rgba(255,255,255,.11))!important;text-shadow:none!important;font-weight:600}
html.je-light:not(.nolook13) body #main :is(a,button).b.b[data-k13a="neutral"]{color:#1A2230!important;box-shadow:inset 0 0 0 1px rgba(10,20,40,.10)!important}
/* 7 · deleting: red words */
html:not(.nolook13) body #main :is(a,button).b.b:is([data-act="invdel"],[data-act="delcall"],[data-bact$="del"],[data-bact="paydel2"],[data-bact="pe-delyes"]):not(.pri):not(.danger){
  color:var(--k13-del-tx)!important}
/* the Customers list's round call / text buttons (look8 draws the glyph in currentColor through a mask): green and blue circles */
html:not(.nolook13) body #main .cp-row a.cp-call.cp-call[href^="tel:"]{background:var(--k13-call-bg)!important;color:var(--k13-call-tx)!important;box-shadow:none!important}
html:not(.nolook13) body #main .cp-row a.cp-call.cp-call[href^="sms:"]{background:var(--k13-msg-bg)!important;color:var(--k13-msg-tx)!important;box-shadow:none!important}

/* ===================================================================================== 8 · status pills ==== */
/* each rule beats look12's §5 by one class (look12: (1,3,2)!important; its amber "not ok/late/quiet" lines (1,5,2) and (1,7,3)) */
/* red: hot · late · past due · needs a person now */
html:not(.nolook13) body #main :is(.ld-st.ld-st.hot,.chip.chip.escalated,.chip.chip.late,.chip.chip.inv-od,.pill.pill.late,.pill.pill.od,.pill.pill.crit,.j10-st.j10-st.late),
html:not(.nolook13) body #main .job .bd .inv-st.inv-st span.late,
html:not(.nolook13) body #main [data-j10s] span[style][style*="#FF8A5B"]{background:var(--k13-red-bg)!important;color:var(--k13-red-tx)!important}
/* the flame in a Hot pill (drawn orange): it takes the pill's red */
html:not(.nolook13) body #main .ld-st.hot svg :is(path,circle){stroke:currentColor!important}
html:not(.nolook13) body #main .ld-st.hot svg :is(path,circle):not([fill="none"]){fill:currentColor!important}
/* orange: warm */
html:not(.nolook13) body #main .ld-st.ld-st.warm{background:var(--k13-ora-bg)!important;color:var(--k13-ora-tx)!important}
/* blue: cold · booked · a message · new */
html:not(.nolook13) body #main :is(.ld-st.ld-st.cold,.chip.chip.booked,.chip.chip.message,.chip.chip.new,.pill.pill.new,.chip.chip.edited){
  background:var(--k13-blu-bg)!important;color:var(--k13-blu-tx)!important}
/* gray: not sent · a draft · a fact */
html:not(.nolook13) body #main :is(.ld-st.ld-st.no,.chip.chip.spam,.chip.chip.es,.chip.chip.repeat,.pill.pill.pend,.j10-st.j10-st.quiet,.chip.chip.draft,.pill.pill.draft),
html:not(.nolook13) body #main .job .bd .inv-st.inv-st span.quiet{background:var(--k13-gry-bg)!important;color:var(--k13-gry-tx)!important}
/* green: paid · done · good */
html:not(.nolook13) body #main :is(.chip.chip.paid,.pill.pill.paid,.pill.pill.good,.j10-st.j10-st.ok,.ld-st.ld-st.ok),
html:not(.nolook13) body #main .job .bd .inv-st.inv-st span.ok{background:var(--k13-grn-bg)!important;color:var(--k13-grn-tx)!important}
/* amber: waiting on you · due today · bill not sent yet · no painter yet */
html:not(.nolook13) body #main .j10-st.j10-st:not(.ok):not(.late):not(.quiet),
html:not(.nolook13) body #main .job .bd .inv-st.inv-st span:not(.ok):not(.late):not(.quiet),
html:not(.nolook13) body #main :is(.pill.pill.due,.chip.chip.due,.pill.pill.watch,.chip.chip.escalated_cant_answer,.chip.chip.escalated_over_quote,.chip.chip.escalated_wants_human,.chip.chip.escalated_upset){
  background:var(--k13-amb-bg)!important;color:var(--k13-amb-tx)!important}
/* the one status line under a customer's name (Customers list): its words in the color of its state */
html:not(.nolook13) body #main .cl-s.cl-s.cl-due{color:var(--k13-amb-tx)!important}
html:not(.nolook13) body #main .cl-s.cl-s.cl-quote{color:var(--k13-ora-tx)!important}
html:not(.nolook13) body #main .cl-s.cl-s.cl-booked{color:var(--k13-blu-tx)!important}
html:not(.nolook13) body #main .cl-s.cl-s.cl-paid{color:var(--k13-grn-tx)!important}
/* Today's Open proposals tile: "1 hot" is red, like the Hot pill it counts */
html:not(.nolook13) #j12-cc .j12-k-props .j12-due{color:var(--k13-red-tx)!important}

/* ============================================================================================ 9 · badges ==== */
/* the tab bar: Today's needs-you count and menubar's waiting counts are the iOS badge; a done count (.cool) is a quiet gray pill.
   (look12-nav: (1,4,3)!important, light (1,5,3); warm/cool one class more — these are one class more again) */
html:not(.nolook13) body nav.tabs #tabbar .tb.tb .badge.badge,
html:not(.nolook13) body nav.tabs #tabbar .tb.tb .jmb-b.jmb-b,
html:not(.nolook13) body nav.tabs #tabbar .tb.tb .jmb-b.jmb-b.warm{background:var(--k13-badge)!important;color:var(--k13-badge-tx)!important;
  font-weight:600!important;font-size:12px!important}
html:not(.nolook13) body nav.tabs #tabbar .tb.tb .jmb-b.jmb-b.cool{background:var(--k13-quiet-bg)!important;color:var(--k13-quiet-tx)!important}
html:not(.nolook13) body nav.tabs #tabbar .tb.tb .jmb-dot.jmb-dot,
html:not(.nolook13) body nav.tabs #tabbar .tb.tb.je-more .je-md.je-md{background:var(--k13-badge)!important}
/* the Business tiles' counts (look12 painted them as little orange buttons): the iOS badge, round, 18 px */
html:not(.nolook13) body #main .lx-b.lx-b{background:var(--k13-badge)!important;color:var(--k13-badge-tx)!important;box-shadow:none!important;
  box-sizing:border-box!important;min-width:18px!important;height:18px!important;padding:0 5px!important;border-radius:999px!important;
  font-family:var(--j12-sf,-apple-system,system-ui,sans-serif)!important;font-size:12px!important;font-weight:600!important;line-height:18px!important;
  font-variant-numeric:tabular-nums;letter-spacing:0!important}
/* a group's "waiting" count on Business (board.js .lx-hot) */
html:not(.nolook13) body #main .lx-hot.lx-hot{background:var(--k13-badge)!important;color:var(--k13-badge-tx)!important;font-weight:600!important}
/* Follow up's "something waiting" dot, and the count on Today's Work the list */
html:not(.nolook13) body #main i.fu-dot{background:var(--k13-badge)!important}
html:not(.nolook13) body #j12-cc .j12-work.j12-work>b{background:var(--k13-badge)!important;color:var(--k13-badge-tx)!important;font-weight:600!important;
  font-variant-numeric:tabular-nums}
/* a Your cards tile with something hot: its count as the iOS badge on the icon's corner, like the Business tiles (look13-actions.js
   copies it from the tile's own words, "12 to do" → data-k13n="12", and measures the icon: --k13-br = the icon's right edge + 5 px,
   --k13-bt = its top − 6 px); the words go quiet, the badge carries the urgency */
html:not(.nolook13) body #main .tj-c[data-k13n]{position:relative}
html:not(.nolook13) body #main .tj-c[data-k13n]::after{content:attr(data-k13n);position:absolute;top:var(--k13-bt,6px);right:calc(100% - var(--k13-br,43px));
  box-sizing:border-box;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--k13-badge);color:var(--k13-badge-tx);
  box-shadow:0 0 0 2px var(--j12-card,#111A29);font:600 12px/18px var(--j12-sf,-apple-system,system-ui,sans-serif);font-variant-numeric:tabular-nums;
  text-align:center;pointer-events:none;z-index:1}
html.je-light:not(.nolook13) body #main .tj-c[data-k13n]::after{box-shadow:0 0 0 2px #FFFFFF}
html:not(.nolook13) body #main .tj-c[data-k13n] .tj-s.hot{color:var(--j12-t2,#A7B3C6)!important}
/* the owner's company row (Joe: Happy Brush 2 · Jetsy 12): the counts on the chips that are not picked are the iOS badge too */
html:not(.nolook13) body #co-bar>button:not([aria-pressed="true"]) .j406-bdg.j406-bdg{background:var(--k13-badge)!important;color:var(--k13-badge-tx)!important;
  font-weight:600!important;font-size:12px!important}