/* look13-lists.css — v468 C · lists in Jetsy's own list look. Every rule under html:not(.nolook13). 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" (the plan: /home/claude/docs/v468-look-plan.md, upgrade C). WHY: the lists were stacks of separate heavy cards — a Proposals row with an orange headset and two or three chips, an invoice card with four big buttons in two rows, every customer its own floating card. The best apps (Mail, Contacts, Settings) put the rows of one section in ONE rounded inset-grouped container with hairlines that start after the picture, and give every row the same anatomy: 40 px coin · name 17/22 600 · one subtitle 15/20 · (a quiet third line) · trailing amount over one status pill, or one action. What this file does — LAYOUT only. The colors of buttons and pills are look13-actions.css's (builder B): nothing here sets a button's or a pill's background or text color. The coins' colors are look10's hue. 1 · the containers: Calls, Proposals, Customers, Invoices, Follow up, the Text inbox — one grouped surface per section, hairline separators inset to start after the coin, no gaps, no per-row shadows or colored outlines; Work orders' cards join into one group; 2 · the rows: coin · text · trailing. Proposals: the customer's coin instead of the orange headset (look13-lists.js adds it), Hot / Warm / Cold as a small dot before the name (its word stays for screen readers), the one status pill trailing, a value of just "—" not drawn. Calls: the coin with the call's status dot as its badge, the time over the pill. Names stay on one line and end in "…" when long (a business badge after a name gives way first); 3 · Invoices and Work orders: compact — the header row (coin · name · amount), the status pill and a slim 4 px progress bar, then ONE action bar: the row's same buttons joined side by side in one rounded bar, a hairline between them (no button removed, no handler changed). When the words don't fit on one line (Spanish, a small phone) the bar takes a second row; look13-lists.js measures where each button landed and rounds the bar's four outer corners. An open "More" shows its buttons under the bar, two by two. Follow up and Up next use the same bar; 4 · search fields as search bars, the filter chips as an segmented control (one track, the picked segment raised; it scrolls sideways when it doesn't fit), empty states centered and airy, the Text inbox's bubbles like Messages. Dark and light (html.je-light). Taps stay ≥ 44 px. Off: localStorage nolook13 = 1 (html.nolook13) gives back today's look exactly. The selectors carry #main#main so they win over look10/look12's (#main, !important) and the older inline rules at any class count. */ /* ---------------------------------------------------------------------------------------------------------- tokens -- */ html:not(.nolook13){ --j13l-grp:#111A29; --j13l-in:#162133; --j13l-sep:rgba(255,255,255,.10); --j13l-edge:rgba(255,255,255,.06); --j13l-t1:#F5F7FB; --j13l-t2:#A7B3C6; --j13l-t3:#8794A8; --j13l-press:rgba(255,255,255,.045); --j13l-seg-sep:rgba(255,255,255,.14); --j13l-track:rgba(110,124,148,.24); --j13l-on:#5B6A80; --j13l-on-t:#FFFFFF; --j13l-on-sh:0 3px 8px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.04); --j13l-field:rgba(110,124,148,.24); --j13l-ph:#8A94A6; --j13l-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 12px 28px -18px rgba(0,0,0,.6); --j13l-in-msg:#26252A; --j13l-out-msg:#4BA3F5; --j13l-r:12px; } html.je-light:not(.nolook13){ --j13l-grp:#FFFFFF; --j13l-in:#F5F6F9; --j13l-sep:rgba(52,64,84,.16); --j13l-edge:rgba(10,20,40,.06); --j13l-t1:#0B1220; --j13l-t2:#5B6472; --j13l-t3:#7C8594; --j13l-press:rgba(0,0,0,.035); --j13l-seg-sep:rgba(52,64,84,.18); --j13l-track:rgba(110,124,148,.12); --j13l-on:#FFFFFF; --j13l-on-t:#0B1220; --j13l-on-sh:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04); --j13l-field:rgba(110,124,148,.12); --j13l-ph:#8A8A8E; --j13l-shadow:0 0 0 1px rgba(10,20,40,.05) inset,0 10px 24px -16px rgba(16,32,58,.22); --j13l-in-msg:#E9E9EB; --j13l-out-msg:#1F6FD1; } /* ------------------------------------------------------------------------------------------ 1 · the grouped surface -- */ /* one rounded container per section; the rows inside lose their own card, shadow and colored outline */ html:not(.nolook13) body #main#main :is(.leads,.calls,.people,.cb-body>.jobs){ display:flex!important;flex-direction:column!important;gap:0!important;padding:0!important;margin-left:0;margin-right:0; background:var(--j13l-grp)!important;border-radius:16px!important;box-shadow:var(--j13l-shadow),inset 0 0 0 1px var(--j13l-edge)!important} /* inside a card (Proposals sits in its card) the group is one step lighter, so it still reads as a group */ html:not(.nolook13) body #main#main section.bc :is(.leads,.jobs){background:var(--j13l-in)!important;box-shadow:inset 0 0 0 1px var(--j13l-edge)!important} html:not(.nolook13) body #main#main :is(.leads>.ld,.calls>.call,.people>.person,.cb-body>.jobs>.jobwrap){ position:relative;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0} /* the hairline: half a pixel, starting where the text starts (after the 40 px coin and its gaps) */ html:not(.nolook13) body #main#main :is(.leads>.ld+.ld,.calls>.call+.call,.people>.person+.person,.cb-body>.jobs>.jobwrap+.jobwrap)::before{ content:"";position:absolute;left:68px;right:0;top:0;height:1px;background:var(--j13l-sep);transform:scaleY(.5);transform-origin:0 0;pointer-events:none;z-index:1} /* an invoice row is a small card of its own (it has a bar): its hairline runs the row's width */ html:not(.nolook13) body #main#main .cb-body>.jobs>.jobwrap+.jobwrap::before{left:16px} /* the first and last rows round with the container (a pressed row lights up inside the corners) */ html:not(.nolook13) body #main#main :is(.leads>.ld,.calls>.call,.people>.person,.cb-body>.jobs>.jobwrap):first-child{border-top-left-radius:16px!important;border-top-right-radius:16px!important} html:not(.nolook13) body #main#main :is(.leads>.ld,.calls>.call,.people>.person,.cb-body>.jobs>.jobwrap):last-child{border-bottom-left-radius:16px!important;border-bottom-right-radius:16px!important} html:not(.nolook13) body #main#main :is(.ld-h,.call>.hd,.person .cp-open,.jtx-row):active{background:var(--j13l-press)!important} @media (prefers-reduced-motion:no-preference){ html:not(.nolook13) body #main#main :is(.ld-h,.call>.hd,.person .cp-open,.jtx-row):active{transform:none!important} } /* the coin every list row now starts with (look10's color; look13-lists.js adds it where there was none) */ html:not(.nolook13) body #main#main .j13-av, html:not(.nolook13) body #main#main :is(.person .av,.job .bd .nm>.j10-av,[data-j10s] .j10-wo-name>.j10-av){ flex:none!important;display:inline-grid!important;place-items:center;width:40px!important;height:40px!important;min-width:40px;border-radius:50%!important; font:600 15px/1 var(--j12-sf,-apple-system,system-ui,sans-serif)!important;letter-spacing:.01em!important;margin:0!important;padding:0!important} html:not(.nolook13) body #main#main .j13-av.j13-av-ph{background:rgba(138,148,166,.28)!important;color:var(--j13l-t2)!important} html:not(.nolook13) body #main#main .j13-av.j13-av-ph svg{width:24px;height:24px;margin-top:4px} html.je-light:not(.nolook13) body #main#main .j13-av.j13-av-ph{background:rgba(138,148,166,.22)!important;color:#8A94A6!important} /* a name line on Invoices and Work orders (the name is bare text after the coin): the coin at the left, the name on one line, and a business badge after it (Joe's account) — when the two don't fit side by side the badge takes the line under the name, so nothing is cut; a name too long for the line fades out at its end */ html:not(.nolook13) body #main#main :is(.cb-body>.jobs .job .bd>.nm,[data-j10s] .j10-wo-name){ position:relative;display:flex!important;flex-wrap:wrap!important;align-items:center!important;align-content:center!important;column-gap:6px!important;row-gap:2px!important; min-width:0;min-height:40px;padding-left:52px!important;white-space:nowrap!important;overflow:hidden!important;overflow-wrap:normal!important; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent)} html:not(.nolook13) body #main#main :is(.cb-body>.jobs .job .bd>.nm,[data-j10s] .j10-wo-name)>.j10-av{position:absolute!important;left:0;top:50%;margin-top:-20px!important} html:not(.nolook13) body #main#main :is(.cb-body>.jobs .job .bd>.nm,[data-j10s] .j10-wo-name)>:not(.j10-av){flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden} /* a name line where the name has its own element (Calls, Customers): the name keeps its room, the badge after it shrinks down to its logo */ html:not(.nolook13) body #main#main :is(.call>.hd>.who .n,.person>.cp-open .nm){display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:6px!important; min-width:0;max-width:100%;white-space:nowrap!important;overflow:hidden!important} html:not(.nolook13) body #main#main :is(.call>.hd>.who .n,.person>.cp-open .nm)>span{flex:0 0 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html:not(.nolook13) body #main#main :is(.call>.hd>.who .n,.person>.cp-open .nm)>span:not(.cob):not(:last-child){max-width:calc(100% - 30px)} html:not(.nolook13) body #main#main :is(.call>.hd>.who .n,.person>.cp-open .nm)>.cob{display:block!important;flex:0 1 auto;min-width:24px;line-height:16px!important;text-overflow:ellipsis} html:not(.nolook13) body #main#main :is(.call>.hd>.who .n,.person>.cp-open .nm)>.cob>img{display:inline-block!important;vertical-align:top;margin-right:4px} /* ------------------------------------------------------------------------------------------------- 2a · Proposals -- */ /* coin · name (the Hot / Warm / Cold dot before it, the one status pill after it) · value date / when */ html:not(.nolook13) body #main#main .ld-h{ display:grid!important;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"av nm v" "av f v";column-gap:12px!important;row-gap:2px!important; align-items:center!important;width:100%;min-height:64px!important;padding:11px 16px!important;margin:0!important;text-align:left;background:transparent!important;border:0!important; border-radius:inherit!important;box-shadow:none!important} html:not(.nolook13) body #main#main .ld-h>.j13-av{grid-area:av;align-self:center} html:not(.nolook13) body #main#main .ld-h.j13-has-av>svg.ln-ic{display:none!important} html:not(.nolook13) body #main#main .ld-h:not(.j13-has-av)>svg.ln-ic{grid-area:av;justify-self:center;width:24px;height:24px} html:not(.nolook13) body #main#main .ld-h>.ld-n{grid-area:nm;display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:6px!important;min-width:0;margin:0!important} html:not(.nolook13) body #main#main .ld-h>.ld-n>span:not(.ld-st){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font:600 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;letter-spacing:-.01em!important} /* the lead's temperature: a dot before the name; the word is still there for VoiceOver */ html:not(.nolook13) body #main#main .ld-n>.ld-st:is(.hot,.warm,.cold){order:-1;flex:none!important;width:8px!important;height:8px!important;min-width:8px!important;min-height:8px!important; padding:0!important;margin:0 1px 0 0!important;border:0!important;border-radius:50%!important;font-size:0!important;line-height:0!important;overflow:hidden!important;box-shadow:none!important} html:not(.nolook13) body #main#main .ld-n>.ld-st:is(.hot,.warm,.cold)>*{display:none!important} /* (a dot is not a pill: its three colors are set here — Apple's red, orange and cyan) */ html:not(.nolook13) body #main#main .ld-n>.ld-st.hot{background:#F25F5C!important} html:not(.nolook13) body #main#main .ld-n>.ld-st.warm{background:#FFB259!important} html:not(.nolook13) body #main#main .ld-n>.ld-st.cold{background:#5CC8E6!important} html.je-light:not(.nolook13) body #main#main .ld-n>.ld-st.hot{background:#D93B3B!important} html.je-light:not(.nolook13) body #main#main .ld-n>.ld-st.warm{background:#D9822B!important} html.je-light:not(.nolook13) body #main#main .ld-n>.ld-st.cold{background:#2A9CC7!important} /* the other pills (Not sent, Sent, Won …) trail the name, pushed to the row's right edge */ html:not(.nolook13) body #main#main .ld-n>.ld-st:not(.hot):not(.warm):not(.cold){flex:none;margin-left:auto!important} html:not(.nolook13) body #main#main .ld-n>.ld-st:not(.hot):not(.warm):not(.cold)~.ld-st:not(.hot):not(.warm):not(.cold){margin-left:0!important} html:not(.nolook13) body #main#main .ld-h>.ld-v{grid-area:v;justify-self:end;align-self:center;margin:0 0 0 4px!important;white-space:nowrap; font:600 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;font-variant-numeric:tabular-nums!important;letter-spacing:-.01em} html:not(.nolook13) body #main#main .ld-h>.ld-v.j13-nov{display:none!important} html:not(.nolook13) body #main#main .ld-h>.ld-f{grid-area:f;min-width:0;margin:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;text-transform:none!important;letter-spacing:0!important} html:not(.nolook13) body #main#main .ld>.ld-p,html:not(.nolook13) body #main#main .ld>.ld-why{margin:-4px 0 0!important;padding:0 16px 12px 68px!important; font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;color:var(--j13l-t2)!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* anything else a lead row holds under its head (a quick action row, an open editor) lines up with the text */ html:not(.nolook13) body #main#main .ld>:not(.ld-h):not(.ld-p):not(.ld-why){margin-left:68px!important;margin-right:16px!important} /* ------------------------------------------------------------------------------------------------------ 2b · Calls -- */ html:not(.nolook13) body #main#main .call>.hd{ display:grid!important;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"av who rt";column-gap:12px!important;align-items:center!important; position:relative;width:100%;min-height:64px!important;padding:11px 16px!important;margin:0!important;text-align:left;background:transparent!important;border:0!important;border-radius:inherit!important;box-shadow:none!important} html:not(.nolook13) body #main#main .call>.hd>.j13-av{grid-area:av} /* the status dot rides on the coin, bottom right, ringed in the list's color */ html:not(.nolook13) body #main#main .call>.hd.j13-has-av>.dot{position:absolute!important;left:45px;top:43px;width:12px!important;height:12px!important;margin:0!important; border-radius:50%!important;box-shadow:0 0 0 2.5px var(--j13l-grp)!important;z-index:2} html:not(.nolook13) body #main#main section.bc .calls>.call>.hd.j13-has-av>.dot{box-shadow:0 0 0 2.5px var(--j13l-in)!important} html:not(.nolook13) body #main#main .call>.hd:not(.j13-has-av)>.dot{grid-area:av;justify-self:center} /* the name block is plain blocks (the old column-and-wrap flex let a long name run under the time) */ html:not(.nolook13) body #main#main .call>.hd>.who{grid-area:who;display:block!important;min-width:0;overflow:hidden} html:not(.nolook13) body #main#main .call>.hd>.who .n{font:600 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;letter-spacing:-.01em!important} html:not(.nolook13) body #main#main .call>.hd>.who .m{display:block;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;letter-spacing:0!important;color:var(--j13l-t2)!important} html:not(.nolook13) body #main#main .call>.hd>.rt{grid-area:rt;display:flex!important;flex-direction:column!important;align-items:flex-end!important;justify-content:center;gap:4px!important;margin:0!important} html:not(.nolook13) body #main#main .call>.hd>.rt>.t{order:-1;white-space:nowrap;font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;font-variant-numeric:tabular-nums; letter-spacing:0!important;text-transform:none!important;color:var(--j13l-t2)!important} /* an opened call: its details use the row's full width (they keep their own inner padding; their buttons, two by two, keep their words on one line) */ html:not(.nolook13) body #main#main .call>.hd~*{margin-left:0!important;margin-right:0!important} html:not(.nolook13) body #main#main .call>.hd~*:last-child{margin-bottom:12px!important} /* --------------------------------------------------------------------------------------------------- 2c · Customers -- */ /* the row: [ coin · name / status / last contact · phone ] then the round Text and Call */ html:not(.nolook13) body #main#main .people>.person{display:flex!important;align-items:center!important;gap:8px!important;min-height:72px!important;padding:0 12px 0 0!important} html:not(.nolook13) body #main#main .person>.cp-open{flex:1 1 auto;min-width:0;display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;grid-template-rows:auto auto!important; column-gap:12px!important;row-gap:1px!important;align-items:center!important;align-content:center!important;min-height:72px;padding:12px 0 12px 16px!important;margin:0!important; text-align:left;background:transparent!important;border:0!important;border-radius:inherit!important;box-shadow:none!important} html:not(.nolook13) body #main#main .person>.cp-open>.av{grid-column:1!important;grid-row:1 / span 2!important;align-self:center!important} html:not(.nolook13) body #main#main .person>.cp-open .nm{grid-area:1 / 2!important;font:600 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;letter-spacing:-.01em!important} /* status on its own line; "Last contact" and the phone number share the quiet third line (app.js's own " · " between them), the number giving way first */ html:not(.nolook13) body #main#main .person>.cp-open .m{grid-area:2 / 2!important;display:flex!important;flex-wrap:wrap!important;align-items:baseline;column-gap:4px;min-width:0;margin:0!important; white-space:nowrap!important;overflow:hidden!important;opacity:1!important;font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;color:var(--j13l-t2)!important} html:not(.nolook13) body #main#main .person .m>*{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html:not(.nolook13) body #main#main .person .m>.cl-s{flex:0 0 100%;font-weight:500} html:not(.nolook13) body #main#main .person .m>:is(.cl-ago,.cl-ph){font-size:13px!important;line-height:18px!important;color:var(--j13l-t3)!important} html:not(.nolook13) body #main#main .person .m>.cl-ago{flex:0 0 auto} html:not(.nolook13) body #main#main .person .m>.cl-ph{flex:1 1 0} /* the round Text and Call: 44 px circles side by side (their colors are look13-actions') */ html:not(.nolook13) body #main#main .person>.cp-call{flex:none!important;position:relative;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important; margin:0!important;padding:0!important;border-radius:50%!important} /* ------------------------------------------------------------------------------- 3 · Invoices: compact rows with one bar -- */ html:not(.nolook13) body #main#main .cb-body>.jobs>.jobwrap>.job{position:relative;display:flex!important;align-items:flex-start!important;gap:10px!important;padding:14px 16px!important;margin:0!important; width:100%;text-align:left;background:transparent!important;border:0!important;border-radius:inherit!important;box-shadow:none!important} html:not(.nolook13) body #main#main .cb-body>.jobs .job>.bd{flex:1 1 auto;min-width:0;display:block!important} html:not(.nolook13) body #main#main .cb-body>.jobs .job .bd>.nm{max-width:calc(100% - 84px);font:600 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;letter-spacing:-.01em!important} /* the amount: the row's big number, top right, level with the name */ html:not(.nolook13) body #main#main .cb-body>.jobs .job>.bd:first-child+.when:not(.ipr-left){position:absolute!important;top:23px!important;right:16px!important;left:auto!important; min-width:0!important;margin:0!important;text-align:right!important;white-space:nowrap; font:700 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;font-variant-numeric:tabular-nums!important;letter-spacing:-.01em!important} /* a "Not finished yet" row (one button that opens the job): what's left to pay, then the chevron, both in the row */ html:not(.nolook13) body #main#main .cb-body>.jobs .job.ipr-open{align-items:center!important} html:not(.nolook13) body #main#main .cb-body>.jobs .job.ipr-open .bd>.nm{max-width:100%} html:not(.nolook13) body #main#main .cb-body>.jobs .job>.when.ipr-left{position:static!important;flex:none;min-width:0!important;margin:0!important;text-align:right!important} html:not(.nolook13) body #main#main .cb-body>.jobs .job>.when.ipr-left>span:first-child{display:block;font:700 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;font-variant-numeric:tabular-nums} html:not(.nolook13) body #main#main .cb-body>.jobs .job>.when.ipr-left .ipr-lk{display:block;font:400 13px/18px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;color:var(--j13l-t3)!important} html:not(.nolook13) body #main#main .cb-body>.jobs .job.ipr-open>.go{flex:none;align-self:center;opacity:.5} /* the status pill, the job line and the progress start under the name; the bar spans the row */ html:not(.nolook13) body #main#main .cb-body>.jobs .job .bd>:not(.nm):not(.acts){margin-left:52px!important} html:not(.nolook13) body #main#main .cb-body>.jobs .job .bd>.inv-st{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px!important} html:not(.nolook13) body #main#main .cb-body>.jobs .job .bd>:is(.sv,.ipr-m){margin-top:2px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;color:var(--j13l-t2)!important} html:not(.nolook13) body #main#main .cb-body>.jobs .jobwrap>.jacts{padding:0 16px 14px!important;margin:0!important} /* the slim progress bar: 4 px rounded segments */ html:not(.nolook13) body #main#main .jobs .wodots{display:flex!important;gap:3px!important;height:4px!important;margin-top:10px!important;margin-bottom:0!important;align-items:stretch} html:not(.nolook13) body #main#main .jobs .wodots>span{flex:1 1 0!important;width:auto!important;height:4px!important;min-height:4px;margin:0!important;border-radius:2px!important} /* --------------------------------------------------------------------- the action bar (Invoices, Work orders, Follow up, Up next) -- */ /* the row's buttons side by side, joined in ONE rounded bar; the 1 px between two buttons is the hairline. Each button keeps its own words, icon, handler and colors (look13-actions.css); this sets only the shape. Too long for one line: a second row. */ html:not(.nolook13) body #main#main :is(.cb-body>.jobs .job .acts,.cb-body .jacts>.jdoc-rowacts,[data-j10s]>div:has(>.b),.fu-r>.fu-a,#j12-cc .j12-v>.j12-vb){ position:relative;display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;gap:1px!important;min-height:44px;border:0!important;border-radius:var(--j13l-r)!important; background:none!important;box-shadow:none!important;overflow:visible!important} html:not(.nolook13) body #main#main :is(.cb-body>.jobs .job .acts,.cb-body .jacts>.jdoc-rowacts,[data-j10s]>div:has(>.b),.fu-r>.fu-a){margin:12px 0 0!important;padding:0!important} html:not(.nolook13) body #main#main #j12-cc .j12-v>.j12-vb{margin-top:auto!important} /* each segment: as wide as its words, the row's spare room shared out; never wider than the bar */ html:not(.nolook13) body #main#main :is(.cb-body>.jobs .job .acts,.cb-body .jacts>.jdoc-rowacts,[data-j10s]>div:has(>.b),.fu-r>.fu-a,#j12-cc .j12-v>.j12-vb)>*{ flex:1 0 auto!important;max-width:100%;min-width:0!important;margin:0!important} html:not(.nolook13) body #main#main :is(.cb-body>.jobs .job .acts,.cb-body .jacts>.jdoc-rowacts,[data-j10s]>div:has(>.b),.fu-r>.fu-a,#j12-cc .j12-v>.j12-vb)>:is(.b,a,button), html:not(.nolook13) body #main#main .cb-body>.jobs .job .acts>details.j7-more>summary{ position:relative;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-height:44px!important;height:auto!important; padding:0 12px!important;border:0!important;border-radius:0!important;box-shadow:none!important;font-size:15px!important;line-height:20px!important;white-space:nowrap!important;overflow:hidden} html:not(.nolook13) body #main#main :is(.cb-body>.jobs .job .acts,.cb-body .jacts>.jdoc-rowacts,[data-j10s]>div:has(>.b),.fu-r>.fu-a,#j12-cc .j12-v>.j12-vb)>:is(.b,a,button) svg{flex:none;width:17px!important;height:17px!important} /* the four outer corners. Before look13-lists.js has measured (or without it): one row — the first button's left, the last one's right */ html:not(.nolook13) body #main#main :is(.cb-body>.jobs .job .acts,.cb-body .jacts>.jdoc-rowacts,[data-j10s]>div:has(>.b),.fu-r>.fu-a,#j12-cc .j12-v>.j12-vb):not([data-j13b])>:first-child:is(.b,a,button), html:not(.nolook13) body #main#main .cb-body>.jobs .job .acts:not([data-j13b])>details.j7-more:first-child>summary{border-top-left-radius:var(--j13l-r)!important;border-bottom-left-radius:var(--j13l-r)!important} html:not(.nolook13) body #main#main :is(.cb-body>.jobs .job .acts,.cb-body .jacts>.jdoc-rowacts,[data-j10s]>div:has(>.b),.fu-r>.fu-a,#j12-cc .j12-v>.j12-vb):not([data-j13b])>:last-child:is(.b,a,button), html:not(.nolook13) body #main#main .cb-body>.jobs .job .acts:not([data-j13b])>details.j7-more:last-child>summary{border-top-right-radius:var(--j13l-r)!important;border-bottom-right-radius:var(--j13l-r)!important} /* … measured: the corners where each button really sits (data-j13c = tl tr bl br) */ html:not(.nolook13) body #main#main [data-j13b]>[data-j13c~="tl"]:is(.b,a,button),html:not(.nolook13) body #main#main [data-j13b]>details[data-j13c~="tl"]>summary{border-top-left-radius:var(--j13l-r)!important} html:not(.nolook13) body #main#main [data-j13b]>[data-j13c~="tr"]:is(.b,a,button),html:not(.nolook13) body #main#main [data-j13b]>details[data-j13c~="tr"]>summary{border-top-right-radius:var(--j13l-r)!important} html:not(.nolook13) body #main#main [data-j13b]>[data-j13c~="bl"]:is(.b,a,button),html:not(.nolook13) body #main#main [data-j13b]>details[data-j13c~="bl"]>summary{border-bottom-left-radius:var(--j13l-r)!important} html:not(.nolook13) body #main#main [data-j13b]>[data-j13c~="br"]:is(.b,a,button),html:not(.nolook13) body #main#main [data-j13b]>details[data-j13c~="br"]>summary{border-bottom-right-radius:var(--j13l-r)!important} /* "More": a segment. Open, it takes the bar's last row and its buttons follow under it, two by two, in the row (as before: it pushes the next row down rather than covering it, so nothing is hidden while it is open) */ html:not(.nolook13) body #main#main .cb-body>.jobs .job .acts>details.j7-more{flex:1 0 auto!important} html:not(.nolook13) body #main#main .cb-body>.jobs .job .acts>details.j7-more[open]{flex:1 0 100%!important} html:not(.nolook13) body #main#main .cb-body>.jobs .job .acts>details.j7-more>summary{width:100%} html:not(.nolook13) body #main#main .cb-body>.jobs .job .acts>details.j7-more>.j7-mb{position:static!important;margin:8px 0 0!important;padding:0!important; display:flex!important;flex-wrap:wrap!important;gap:8px!important;background:none!important;box-shadow:none!important} html:not(.nolook13) body #main#main .cb-body>.jobs .job .acts>details.j7-more>.j7-mb>.b{flex:1 1 calc(50% - 4px)!important;min-height:44px!important;margin:0!important} html:not(.nolook13) body #main#main .cb-body>.jobs .job .acts>details.j7-more>.j7-mb>:not(.b){flex:1 1 100%} /* ------------------------------------------------------------------------- 3b · Work orders: one grouped run of cards -- */ /* the cards are drawn with their own inline styles; a run of them reads as ONE group: no gaps, square inner corners, hairlines */ html:not(.nolook13) body #main#main div[data-j10s]{position:relative;margin:0 0 14px!important;padding:14px 16px!important;border-radius:16px!important; background:var(--j13l-grp)!important;box-shadow:var(--j13l-shadow),inset 0 0 0 1px var(--j13l-edge)!important;border:0!important} html:not(.nolook13) body #main#main div[data-j10s]:has(+div[data-j10s]){margin-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important; box-shadow:inset 1px 0 0 var(--j13l-edge),inset -1px 0 0 var(--j13l-edge),inset 0 1px 0 var(--j13l-edge)!important} html:not(.nolook13) body #main#main div[data-j10s]+div[data-j10s]{border-top-left-radius:0!important;border-top-right-radius:0!important; box-shadow:inset 1px 0 0 var(--j13l-edge),inset -1px 0 0 var(--j13l-edge),inset 0 -1px 0 var(--j13l-edge),0 12px 28px -18px rgba(0,0,0,.6)!important} html:not(.nolook13) body #main#main div[data-j10s]+div[data-j10s]:has(+div[data-j10s]){box-shadow:inset 1px 0 0 var(--j13l-edge),inset -1px 0 0 var(--j13l-edge)!important} html:not(.nolook13) body #main#main div[data-j10s]+div[data-j10s]::before{content:"";position:absolute;left:16px;right:0;top:0;height:1px;background:var(--j13l-sep);transform:scaleY(.5);transform-origin:0 0;pointer-events:none} html.je-light:not(.nolook13) body #main#main div[data-j10s]+div[data-j10s]{box-shadow:inset 1px 0 0 var(--j13l-edge),inset -1px 0 0 var(--j13l-edge),inset 0 -1px 0 var(--j13l-edge),0 10px 24px -16px rgba(16,32,58,.22)!important} /* the header row: coin · name (its "past start day" stays at the right) */ html:not(.nolook13) body #main#main div[data-j10s]>div:first-child{align-items:center!important} html:not(.nolook13) body #main#main div[data-j10s] .j10-wo-name{flex:1 1 auto;font:600 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;letter-spacing:-.01em!important} /* the second line (date · status · amount) starts under the name; the amount is the row's big number */ html:not(.nolook13) body #main#main div[data-j10s]>.j10-sub{display:flex!important;align-items:center!important;flex-wrap:wrap;gap:6px 8px!important;margin:2px 0 0 52px!important; font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;opacity:1!important;color:var(--j13l-t2)!important} html:not(.nolook13) body #main#main div[data-j10s]>.j10-sub>.j10-amt{margin-left:auto!important;font:700 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)!important; font-variant-numeric:tabular-nums!important;letter-spacing:-.01em!important;color:var(--j13l-t1)!important} /* the progress: slim 4 px rounded segments, under the text */ html:not(.nolook13) body #main#main div[data-j10s]>span[style*="display:flex"]{gap:3px!important;margin:10px 0 0 52px!important;height:4px;align-items:stretch} html:not(.nolook13) body #main#main div[data-j10s]>span[style*="display:flex"]>span{height:4px!important;border-radius:2px!important} /* ------------------------------------------------------------------------------------------------ 3c · Follow up -- */ /* each reason a row of the card's group: coin · name · kind, the why under it, then its bar */ html:not(.nolook13) body #main#main .fu-r{position:relative;margin:0!important;padding:12px 0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important} html:not(.nolook13) body #main#main .fu-r+.fu-r::before{content:"";position:absolute;left:52px;right:0;top:0;height:1px;background:var(--j13l-sep);transform:scaleY(.5);transform-origin:0 0;pointer-events:none} html:not(.nolook13) body #main#main .fu-r>.fu-h{display:flex!important;align-items:center!important;gap:12px!important;margin:0!important;min-width:0} html:not(.nolook13) body #main#main .fu-r>.fu-h>.fu-nm{order:1;flex:1 1 auto;min-width:0;min-height:44px;padding:0!important;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font:600 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;letter-spacing:-.01em!important;background:transparent!important;border:0!important;box-shadow:none!important} html:not(.nolook13) body #main#main .fu-r>.fu-h>.fu-k{order:2;flex:none} html:not(.nolook13) body #main#main .fu-r>.fu-h>.j13-av{order:0} html:not(.nolook13) body #main#main .fu-r.j13-has-av>:not(.fu-h):not(.fu-a){margin-left:52px!important} html:not(.nolook13) body #main#main .fu-r>.fu-w{margin-top:-6px!important;font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;color:var(--j13l-t2)!important} html:not(.nolook13) body #main#main .fu-r>.fu-w .fu-since{color:var(--j13l-t3)!important} /* ------------------------------------------------------------------------------------------ 3d · the Text inbox -- */ html:not(.nolook13) body #main#main .jtx-row{position:relative;display:flex!important;align-items:center!important;gap:12px!important;min-height:64px!important; padding:10px 4px 10px 0!important;border-top:0!important;background:transparent!important} html:not(.nolook13) body #main#main .jtx-row~.jtx-row::before{content:"";position:absolute;left:52px;right:0;top:0;height:1px; background:var(--j13l-sep);transform:scaleY(.5);transform-origin:0 0;pointer-events:none} html:not(.nolook13) body #main#main .jtx-row b{font:600 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;letter-spacing:-.01em} html:not(.nolook13) body #main#main .jtx-row small{font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;opacity:1!important;color:var(--j13l-t2)!important} html:not(.nolook13) body #main#main .jtx-row i{align-self:flex-start;margin-top:3px;font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;opacity:1!important;color:var(--j13l-t2)!important} html:not(.nolook13) body #main#main .jtx-n{align-self:center} /* a conversation: Messages' bubbles — theirs grey on the left, ours blue on the right */ html:not(.nolook13) body #main#main .jtx-m{max-width:78%!important;padding:8px 13px!important;border-radius:18px!important;font:400 16px/21px var(--j12-sf,-apple-system,system-ui,sans-serif)!important} html:not(.nolook13) body #main#main .jtx-m.in{background:var(--j13l-in-msg)!important;color:var(--j13l-t1)!important;border-bottom-left-radius:6px!important} html:not(.nolook13) body #main#main .jtx-m.out{background:var(--j13l-out-msg)!important;color:#FFFFFF!important;border-bottom-right-radius:6px!important} html:not(.nolook13) body #main#main .jtx-m small{opacity:.75!important} html:not(.nolook13) body #main#main .jtx-m.out small{color:rgba(255,255,255,.85)!important} html:not(.nolook13) body #main#main .jtx-m.out small.bad{color:#FFD5D1!important;opacity:1!important} /* ------------------------------------------------------------------------------------------------ 3e · Up next -- */ /* the visit's head: coin · name, then what and where, the same anatomy as every list row */ html:not(.nolook13) body #main#main #j12-cc .j12-v .j12-vm.j13-has-av{display:grid!important;grid-template-columns:40px minmax(0,1fr);grid-template-areas:"av n" "av w" "av a";column-gap:12px; align-items:center;text-align:left} html:not(.nolook13) body #main#main #j12-cc .j12-v .j12-vm.j13-has-av>.j13-av{grid-area:av;align-self:center} html:not(.nolook13) body #main#main #j12-cc .j12-v .j12-vm.j13-has-av>.j12-vn{grid-area:n;min-width:0} html:not(.nolook13) body #main#main #j12-cc .j12-v .j12-vm.j13-has-av>.j12-vw{grid-area:w;min-width:0} html:not(.nolook13) body #main#main #j12-cc .j12-v .j12-vm.j13-has-av>.j12-va{grid-area:a;min-width:0} html:not(.nolook13) body #main#main #j12-cc .j12-v>.j12-vb{padding-top:14px!important} /* ----------------------------------------------------------------------- 4 · search bars, the segmented control -- */ /* search bar: a soft grey field, 10 px corners, the magnifier inside, 17 px words, 44 px to a thumb */ html:not(.nolook13) body #main#main :is(.search input,#callQ,.jtx-bar input[type="search"]){min-height:44px!important;height:44px;padding:0 12px 0 36px!important;border:0!important;border-radius:10px!important; background-color:var(--j13l-field)!important;box-shadow:none!important;font:400 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;color:var(--j13l-t1)!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.3' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.2'/%3E%3Cpath d='M19.5 19.5l-4.4-4.4'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important;background-position:11px 50%!important;background-size:18px 18px!important} html:not(.nolook13) body #main#main :is(.search input,#callQ,.jtx-bar input[type="search"])::placeholder{color:var(--j13l-ph)!important;opacity:1} html:not(.nolook13) body #main#main :is(.search input,#callQ,.jtx-bar input[type="search"]):focus{box-shadow:0 0 0 2px rgba(75,163,245,.55)!important} html.je-light:not(.nolook13) body #main#main :is(.search input,#callQ,.jtx-bar input[type="search"]):focus{box-shadow:0 0 0 2px rgba(31,111,209,.45)!important} /* the filters (Calls: Everything · Booked · Needed you …; Customers: All · Owes · Quote out …; Proposals' line chips): ONE track, the picked segment raised; it scrolls sideways when it doesn't fit (the row never wraps into two) */ html:not(.nolook13) body #main#main .filters,html:not(.nolook13) body #main#main .ln-chips{display:flex!important;flex-wrap:nowrap!important;gap:2px!important;padding:4px!important;margin:8px 0 10px!important; border-radius:12px!important;background:var(--j13l-track)!important;box-shadow:none!important;overflow-x:auto!important;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none; max-width:100%;width:max-content;min-width:0} html:not(.nolook13) body #main#main .filters::-webkit-scrollbar,html:not(.nolook13) body #main#main .ln-chips::-webkit-scrollbar{display:none} html:not(.nolook13) body #main#main .filters>:is(.f,label.f){flex:none!important;position:relative;min-height:36px!important;height:36px;margin:0!important;padding:0 12px!important;border:0!important; border-radius:8px!important;background:transparent!important;box-shadow:none!important;color:var(--j13l-t1)!important;font:500 14px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)!important; letter-spacing:-.005em!important;white-space:nowrap} html:not(.nolook13) body #main#main .filters>.f[aria-pressed="true"],html:not(.nolook13) body #main#main .ln-chips>.ln-chip.on{background:var(--j13l-on)!important;color:var(--j13l-on-t)!important; box-shadow:var(--j13l-on-sh)!important;font-weight:600!important} html:not(.nolook13) body #main#main .filters>.f:not([aria-pressed="true"])+.f:not([aria-pressed="true"])::after{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:1px; background:var(--j13l-seg-sep);pointer-events:none} /* 36 px to the eye, 44 to a thumb: look12's halo on a filter (and the same on a line chip) reaches the track's edge, inside its 4 px padding */ html:not(.nolook13) body #main#main .filters>.f::before{top:-4px;bottom:-4px} html:not(.nolook13) body #main#main .ln-chips>.ln-chip::before{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px} /* the sort picker and the actions in Customers' row are not segments: plain, inside the same track */ html:not(.nolook13) body #main#main .cl-chips>.cl-sort{background:transparent!important} html:not(.nolook13) body #main#main .cl-chips>.cl-gap{flex:0 0 8px} html:not(.nolook13) body #main#main .cl-chips>.f.cl-act{color:var(--j13l-t2)!important} html:not(.nolook13) body #main#main .ln-chips>.ln-chip{position:relative;flex:none!important;min-height:36px!important;height:36px;border-radius:8px!important;margin:0!important;background:transparent!important;box-shadow:none!important; color:var(--j13l-t1)!important;font:500 14px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)!important} /* --------------------------------------------------------------------------------------------------- empty states -- */ html:not(.nolook13) body #main#main .empty{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:6px!important; padding:36px 20px 32px!important;margin-top:8px!important;background:transparent!important;box-shadow:none!important;border:0!important} html:not(.nolook13) body #main#main .empty h3{margin:6px 0 0!important;font:600 20px/25px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;letter-spacing:-.015em!important;color:var(--j13l-t1)!important} html:not(.nolook13) body #main#main .empty p{max-width:30ch;margin:0 auto!important;font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;color:var(--j13l-t2)!important} /* ------------------------------------------------------------------------------------------------- light mode -- */ html.je-light:not(.nolook13) body #main#main :is(.leads,.calls,.people,.cb-body>.jobs){background:var(--j13l-grp)!important} html.je-light:not(.nolook13) body #main#main section.bc :is(.leads,.jobs){background:var(--j13l-in)!important} html.je-light:not(.nolook13) body #main#main :is(.leads>.ld,.calls>.call,.people>.person,.cb-body>.jobs>.jobwrap,.cb-body>.jobs .job){background:transparent!important;box-shadow:none!important} html.je-light:not(.nolook13) body #main#main div[data-j10s]{background:var(--j13l-grp)!important} html.je-light:not(.nolook13) body #main#main :is(.ld-h>.ld-n>span:not(.ld-st),.call>.hd>.who .n,.person .nm,.cb-body>.jobs .job .nm,div[data-j10s] .j10-wo-name,.fu-r>.fu-h>.fu-nm,.jtx-row b){color:var(--j13l-t1)!important} /* v468 merge (C's open item): look10 switched off (nolook10 = 1) → no coins from look13 either; they borrow look10's colors */ html.nolook10 body #main .j13-av{display:none!important} /* v468 merge: a customer's status is never cut ("Owes $800 · bill not sent yet", "Debe $800 · factura sin enviar"): a second line when it doesn't fit, never a third */ html:not(.nolook13) body #main#main .person>.cp-open .m>.cl-s{white-space:normal!important;text-overflow:clip!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2;overflow:hidden!important;overflow-wrap:anywhere}