/* =============================================================================
   look12.css — v463 · A · ONE LOOK EVERYWHERE (the foundation)
   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 apple software engineer". The four biggest home-service CRMs are light, flat and generic; Jetsy's
   answer is a premium dark look with Apple-grade type. This file is the base the other four look12 files stand on: it takes the
   tokens in look12-tokens.css and applies them to every tab — the phone's own font and one type scale, layered surfaces,
   continuous corners (no chamfers, no corner brackets), one meaning per color, one button, one field, one chip, one row.

   How it works (never edits an older file — it overrides them):
   0 · THE BRIDGE. Sixty files paint with app.css's console tokens (--mono, --cut, --console, --panel*, --line*, --ink*,
       --bracket, --bloom …). They are pointed at the look12 values here, so a rule written in 2026-09 draws the 2026-10 look
       without being touched: --mono becomes the phone's font, every chamfer (--cut*) a continuous corner, every bracket
       transparent, the navy console a card.
   1 · TYPE. The phone's own font on every element (SF on an iPhone, Inter where there is none), sentence case for what people
       read, tabular figures for money and counts. Titles 22/28, headlines 17/22, body 16/22, footnotes 13/18.
   2 · SURFACES. Cards 22px corners on #111A29 with a hairline and one soft shadow; rows 16px; buttons and fields 14px; chips
       999px. The page is #06090F with a faint warm glow at the top.
   3 · ROWS, CHIPS, BUTTONS, FIELDS, SETUP, EMPTY STATES — see each section.
   Light mode: easy2.js recolours every rule here as it does the rest; what its flip gets wrong (cards a shade darker than the
   page) is set under html.je-light at the end (rules that name je-light are left as written).
   Off switch: localStorage nolook12 = 1 (html.nolook12) — every rule is under html:not(.nolook12).
   Scope: the top bar, the company chips and the tab bar are look12-nav/look12-ceo's; Today's hero and Up next look12-today's;
   motion look12-motion's. Never name another CRM here ("[another CRM]").
   ============================================================================= */

/* ---- 0 · the bridge ------------------------------------------------------------------------------------------------ */
/* html:not(.nolook12) is (0,1,1): it outranks app.css's :root (0,1,0) and every later :root a module injects. The company
   colour a customer picked under My brand is set inline on <html> (--or, --or-lt) and still wins. */
html:not(.nolook12){
  --mono:var(--j12-sf);
  --cut:var(--j12-r-card); --cut-row:var(--j12-r-row); --cut-sm:var(--j12-r-btn);
  --bracket:transparent;
  --bloom:0 0 0 transparent; --bloom-sm:0 6px 16px -6px rgba(255,106,26,.55);
  --void:#06090F; --deep:#0B111C; --panel:#0D1523; --panel2:#162133; --panel3:#1D2A40;
  --console:#111A29; --console-lit:#111A29; --console-dk:#111A29;
  --line:rgba(255,255,255,.11); --line2:rgba(255,255,255,.07);
  --ink:#F5F7FB; --ink2:#A7B3C6; --muted:#8794A8; --quiet:#A7B3C6;   /* --muted is t3 lifted to 5.7:1 on a card: it carries notes and times people read */
  --ok:#34D399; --warn:#FBBF24; --hot:#F87171; --blue:#60A5FA; --blue-lt:#BFDBFE;
  --money-in:#34D399; --money-out:#F87171; --money-due:#FBBF24;
  --or-lt:#FF8A3D; --pill-bg:rgba(255,255,255,.07);
  --hair:inset 0 0 0 1px rgba(255,255,255,.11); --hair2:inset 0 0 0 1px rgba(255,255,255,.07);
  /* this file's own: a field's well, the glass behind a sticky header, a card's depth */
  --j12a-field:#0B111C;
  --j12a-sticky:rgba(6,9,15,.78);
  --j12a-card-sh:inset 0 0 0 1px rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.35);
  --j12a-row-sh:inset 0 0 0 1px rgba(255,255,255,.07),0 4px 14px rgba(0,0,0,.22);
  --j12a-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ---- 1 · type ------------------------------------------------------------------------------------------------------ */
html:not(.nolook12) body{font-family:var(--j12-sf);font-size:16px;letter-spacing:0;color:#F5F7FB;
  background:radial-gradient(120% 460px at 50% -160px,rgba(255,106,26,.15),rgba(255,106,26,0) 72%) no-repeat,#06090F!important;   /* beats app.js LOOK 4's three glows (!important) */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* the phone's own font on everything: sixty files wrote their own stacks (Poppins, ui-monospace, Menlo …) and many with the
   `font` shorthand; one rule with !important replaces them all. Code stays monospace. */
html:not(.nolook12) body *:not(code):not(pre):not(kbd):not(samp):not(.j12-mono){font-family:var(--j12-sf)!important}
html:not(.nolook12) body :is(button,input,select,textarea){font-family:var(--j12-sf)}
html:not(.nolook12) body h1,html:not(.nolook12) body h2,html:not(.nolook12) body h3{letter-spacing:-.015em}
html:not(.nolook12) body #main{line-height:1.4;font-variant-numeric:tabular-nums}   /* 16/22 body; money and counts line up to the digit */

/* the page and section titles of the work tabs (.h: "Call log", "Customers", "Your receptionist" …): a title, sentence case,
   no orange rule, no hairline; its readout ("12 calls", "5 not paid yet") a quiet footnote on the right */
html:not(.nolook12) body #main .h{display:flex;align-items:baseline;gap:.75rem;min-height:44px;margin:1.4rem 0 .6rem;padding:0 .25rem}
html:not(.nolook12) body #main .h::before{content:none!important;display:none!important}
html:not(.nolook12) body main#main .h>h2{flex:1 1 auto;min-width:0;margin:0;font:var(--j12-t-title)!important;letter-spacing:-.015em!important;
  text-transform:none!important;color:#F5F7FB!important;white-space:normal;overflow:visible;text-wrap:balance}   /* look6 painted them orange (!important) */
html:not(.nolook12) body main#main .h>h2::after{content:none!important}
/* Customers' title sits beside its search box (a compact pair): a headline over a footnote */
html:not(.nolook12) body main#main .cl-bar .h.cl-h>h2{font:var(--j12-t-head)!important;letter-spacing:-.01em!important}
html:not(.nolook12) body #main .cl-bar .h.cl-h>.n{font:500 12px/16px var(--j12-sf)!important;text-align:left!important;margin-left:0}
html:not(.nolook12) body #main .h .n{flex:0 1 auto;max-width:58%;margin-left:auto;font:var(--j12-t-foot)!important;letter-spacing:0!important;
  text-transform:none!important;color:#A7B3C6;text-align:right;white-space:normal}

/* ---- 2 · surfaces: the brackets go, the cards are cards ---------------------------------------------------------------- */
html:not(.nolook12) body .bc::before,html:not(.nolook12) body .bc::after,html:not(.nolook12) body .grp::before,html:not(.nolook12) body .grp::after,
html:not(.nolook12) body .need::before,html:not(.nolook12) body .need::after,html:not(.nolook12) body .pcard::before,html:not(.nolook12) body .pcard::after,
html:not(.nolook12) body .empty::after,html:not(.nolook12) body .bc-hd::after{content:none!important;display:none!important}

/* the card: board cards and Today's cards (section.bc), the person card, the owner-only cards */
html:not(.nolook12) body #main section.bc:not(.tc-collapsed),html:not(.nolook12) body #main .pcard{background:#111A29!important;border:0!important;
  border-radius:22px!important;box-shadow:var(--j12a-card-sh)!important}
html:not(.nolook12) body #main section.bc.pin:not(.tc-collapsed){box-shadow:inset 0 0 0 1px rgba(255,106,26,.32),0 12px 30px rgba(0,0,0,.35)!important}
html:not(.nolook12) body #main>section.bc+section.bc{margin-top:.75rem}
/* the card header: the title a headline, its readout a quiet pill on the right */
html:not(.nolook12) body #main section.bc:not(.tc-collapsed)>.bc-hd{display:flex;align-items:center;gap:.6rem;min-height:56px;margin:0;padding:.85rem 1rem .5rem;border:0!important;background:transparent}
html:not(.nolook12) body #main section.bc:not(.tc-collapsed)>.bc-hd h2,html:not(.nolook12) body #main section.bc:not(.tc-collapsed)>.bc-hd h3{flex:1 1 auto;min-width:0;margin:0;font:var(--j12-t-head)!important;
  letter-spacing:-.01em!important;text-transform:none!important;color:#F5F7FB;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html:not(.nolook12) body #main section.bc:not(.tc-collapsed)>.bc-hd h2::before{content:none!important}
html:not(.nolook12) body #main section.bc:not(.tc-collapsed)>.bc-hd .sub{flex:0 1 auto;min-width:0;max-width:48%;margin:0;padding:.2rem .6rem;border-radius:12px;
  background:rgba(255,255,255,.07);font:var(--j12-t-cap)!important;letter-spacing:0!important;text-transform:none!important;color:#A7B3C6;opacity:1;
  text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html:not(.nolook12) body #main section.bc>.bc-bd{padding:0 1rem 1rem}
html:not(.nolook12) body #main section.bc .bnote,html:not(.nolook12) body #main .note{font:var(--j12-t-foot);letter-spacing:0;color:#8794A8}

/* the settings group and the attention card (.need) share the card */
html:not(.nolook12) body #main .grp{background:#111A29;border-radius:22px;box-shadow:var(--j12a-card-sh)}
html:not(.nolook12) body #main .need{background:#111A29!important;border-radius:16px!important;box-shadow:var(--j12a-row-sh)!important}   /* beats app.js LOOK 3 */
html:not(.nolook12) body #main :is(.stat,.cu,.mo){border-radius:16px!important}
/* a stat tile (the month, the week): the number big and tabular, its words a footnote under it */
html:not(.nolook12) body #main .stat{background:#162133!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important;padding:.8rem .85rem}
html:not(.nolook12) body #main .stat .v{font:700 22px/28px var(--j12-sf)!important;letter-spacing:-.02em;font-variant-numeric:tabular-nums!important;text-shadow:none!important}
html:not(.nolook12) body #main .stat .k{font:var(--j12-t-foot)!important;letter-spacing:0!important;text-transform:none!important;color:#A7B3C6}
html:not(.nolook12) body #main .card{border-radius:22px!important}
html:not(.nolook12) body #main .need.money{background:linear-gradient(180deg,rgba(251,191,36,.07),rgba(251,191,36,0) 60%),#111A29!important;box-shadow:inset 0 0 0 1px rgba(251,191,36,.28),0 4px 14px rgba(0,0,0,.22)!important}
html:not(.nolook12) body #main .need.ask{background:linear-gradient(180deg,rgba(96,165,250,.07),rgba(96,165,250,0) 60%),#111A29!important;box-shadow:inset 0 0 0 1px rgba(96,165,250,.26),0 4px 14px rgba(0,0,0,.22)!important}
html:not(.nolook12) body #main .need:not(.money):not(.ask){background:linear-gradient(180deg,rgba(248,113,113,.07),rgba(248,113,113,0) 60%),#111A29!important;box-shadow:inset 0 0 0 1px rgba(248,113,113,.28),0 4px 14px rgba(0,0,0,.22)!important}
html:not(.nolook12) body #main .need .why{font:var(--j12-t-cap);letter-spacing:0;text-transform:none}
html:not(.nolook12) body #main .need .why::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
html:not(.nolook12) body #main .need .nm{font:var(--j12-t-head);letter-spacing:-.01em}
html:not(.nolook12) body #main .need .what{font:var(--j12-t-call);color:#A7B3C6}
html:not(.nolook12) body #main .need .ago{font:var(--j12-t-foot);color:#8794A8}

/* ---- 3 · fold bars: list section headers (Calls' Today / Yesterday, Work orders and Invoices groups, Setup groups) ---- */
/* compact-a's .cmp-fold and compact-b's .cb-g: the name a headline, the count a pill, a real disclosure chevron that turns.
   On the page they are headers on glass (they stick under the slim bar, look10); inside a card they are rows. */
html:not(.nolook12) body #main details.cmp-fold>summary.cmp-sum,html:not(.nolook12) body #main details.cb-g:not(.cb-set):not(.cb-row)>summary.cb-s{
  display:flex!important;align-items:center;gap:.6rem;min-height:48px;margin:0;padding:.25rem .5rem .25rem .3rem;border:0!important;border-radius:14px;
  background:transparent;box-shadow:none!important;color:#F5F7FB;font:var(--j12-t-head);letter-spacing:-.01em}
html:not(.nolook12) body #main details.cmp-fold>summary .cmp-l,html:not(.nolook12) body #main details.cb-g>summary .cb-nm{flex:1 1 auto;min-width:0;
  font:var(--j12-t-head)!important;letter-spacing:-.01em!important;text-transform:none!important;color:#F5F7FB!important;overflow-wrap:anywhere}
html:not(.nolook12) body #main details.cb-g>summary .cb-amt{flex:0 0 auto;font:var(--j12-t-foot)!important;letter-spacing:0!important;text-transform:none!important;
  color:#A7B3C6;font-variant-numeric:tabular-nums;white-space:nowrap}
/* the count: a pill (compact-a writes its colours inline — orange; a count is a size, not the one main action) */
html:not(.nolook12) body #main summary .rmn,html:not(.nolook12) body #main details.cb-g>summary .cb-n{flex:0 0 auto;display:inline-flex!important;align-items:center;justify-content:center;
  min-width:24px!important;height:24px!important;margin:0!important;padding:0 .5rem!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;
  color:#A7B3C6!important;font:700 13px/24px var(--j12-sf)!important;letter-spacing:0!important;font-variant-numeric:tabular-nums;box-shadow:none!important;vertical-align:middle}
/* the chevron: one drawn ›, turned down when open (the ▾ ▴ characters are hidden; app.js keeps writing them) */
html:not(.nolook12) body #main summary .rmchev,html:not(.nolook12) body #main details.cb-g>summary .cb-ch{flex:0 0 auto;position:relative;width:24px;height:24px;margin:0 0 0 auto;
  font-size:0!important;line-height:0;color:transparent!important;opacity:1!important}
html:not(.nolook12) body #main details.cmp-fold>summary .cmp-l+.rmn+.rmchev,html:not(.nolook12) body #main details.cb-g>summary .cb-n+.cb-ch{margin-left:0}
html:not(.nolook12) body #main summary .rmchev::before,html:not(.nolook12) body #main details.cb-g>summary .cb-ch::before{content:""!important;position:absolute;left:5px;top:5px;width:14px;height:14px;
  background:#6E7B90;-webkit-mask:var(--j12a-chev) center/14px 14px no-repeat;mask:var(--j12a-chev) center/14px 14px no-repeat;transform:rotate(0deg)}
html:not(.nolook12) body #main details[open]>summary .rmchev::before,html:not(.nolook12) body #main details.cb-g[open]>summary .cb-ch::before{transform:rotate(90deg)}
html:not(.nolook12) body #main details.cmp-fold,html:not(.nolook12) body #main details.cb-g:not(.cb-set):not(.cb-row){margin:.5rem 0 0;border:0;background:none;box-shadow:none}
html:not(.nolook12) body #main details.cmp-fold>.cmp-fb,html:not(.nolook12) body #main details.cb-g>.cb-body{padding:.35rem 0 .5rem}
/* sticky on the page (look10): glass instead of the old navy band */
html:not(.nolook12) body #main details.rmgrp>summary.cb-s,html:not(.nolook12) body #main details.rmgrp>summary.cmp-sum{background:var(--j12a-sticky)!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
html:not(.nolook12) body #main .h.j6-hi{background:var(--j12a-sticky)!important;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
/* inside a card the fold bar is a row of the card, not a header on glass */
html:not(.nolook12) body #main section.bc details.cmp-fold>summary.cmp-sum{min-height:48px;padding:.25rem .25rem;background:transparent!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;border-radius:12px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)!important}

/* ---- 4 · list rows: Calls, Customers, Work orders, Invoices, Proposals ----------------------------------------------- */
/* one row: a 16px card on the page, the name a headline, the line under it a footnote in t2, the amount tabular on the right,
   the status a chip in its meaning colour */
html:not(.nolook12) body #main .calls{gap:.5rem;margin-top:.25rem}
html:not(.nolook12) body #main .call{background:#111A29;border-radius:16px;box-shadow:var(--j12a-row-sh)}
html:not(.nolook12) body #main .call.open{box-shadow:inset 0 0 0 1px rgba(255,106,26,.45),0 4px 14px rgba(0,0,0,.22)}
html:not(.nolook12) body #main .call .hd{gap:.75rem;padding:.8rem .9rem;min-height:64px;align-items:center}
html:not(.nolook12) body #main .call .dot{width:10px;height:10px;box-shadow:0 0 0 3px rgba(255,255,255,.04)}
html:not(.nolook12) body #main .call .who{gap:.1rem;line-height:1.3}
html:not(.nolook12) body #main .call .who .n{font:var(--j12-t-head);letter-spacing:-.01em;color:#F5F7FB}
html:not(.nolook12) body #main .call .who .sum{font:400 14px/19px var(--j12-sf);color:#A7B3C6;margin:.1rem 0 .05rem}
html:not(.nolook12) body #main .call .who .m,html:not(.nolook12) body #main .call .rt .t{font:var(--j12-t-foot);letter-spacing:0;color:#8794A8;font-variant-numeric:tabular-nums}
html:not(.nolook12) body #main .call .rt{gap:.35rem}
html:not(.nolook12) body #main .call .body{border-top:1px solid rgba(255,255,255,.07);padding:0 .9rem .9rem}
html:not(.nolook12) body #main .tx .l{font:400 15px/21px var(--j12-sf)}
html:not(.nolook12) body #main .tx .l .s{font:var(--j12-t-cap);letter-spacing:0;text-transform:none;color:#8794A8;width:3.4rem;padding-top:.15rem}
html:not(.nolook12) body #main .tx .l.you .s{color:#FF8A3D}

/* Customers */
html:not(.nolook12) body #main .people{gap:.5rem}
html:not(.nolook12) body #main .person{background:#111A29;border-radius:16px;box-shadow:var(--j12a-row-sh);min-height:60px}
html:not(.nolook12) body #main .person .nm,html:not(.nolook12) body #main .person.cp-row .cp-open .nm{font:var(--j12-t-head)!important;letter-spacing:-.01em}
html:not(.nolook12) body #main .person .m{font:var(--j12-t-foot);color:#A7B3C6}
html:not(.nolook12) body #main .person .t{font:var(--j12-t-foot);letter-spacing:0;color:#8794A8}
html:not(.nolook12) body #main .av{border-radius:50%!important;font:700 13px/1 var(--j12-sf)!important;letter-spacing:.01em!important;text-shadow:none}
html:not(.nolook12) body #main .av.big{font:700 17px/1 var(--j12-sf)!important}
html:not(.nolook12) body #main .j10-av{border-radius:50%!important;font:700 12px/1 var(--j12-sf)!important;letter-spacing:.01em!important}

/* Work orders, Invoices, the receptionist's bookings (.jobwrap / .job) */
html:not(.nolook12) body #main .jobs{gap:.5rem}
html:not(.nolook12) body #main .jobwrap,html:not(.nolook12) body #main .ld{background:#111A29!important;border-radius:16px!important;box-shadow:var(--j12a-row-sh)!important}
html:not(.nolook12) body #main .jobwrap.editing,html:not(.nolook12) body #main .ld.promised{box-shadow:inset 0 0 0 1px rgba(255,106,26,.45),0 4px 14px rgba(0,0,0,.22)!important}
html:not(.nolook12) body #main .ld.late{box-shadow:inset 0 0 0 1px rgba(248,113,113,.45),0 4px 14px rgba(0,0,0,.22)!important}
html:not(.nolook12) body #main .job .nm{font:var(--j12-t-head)!important;letter-spacing:-.01em;color:#F5F7FB}
html:not(.nolook12) body #main .job .ad{font:var(--j12-t-foot)!important;color:#A7B3C6;opacity:1!important}
html:not(.nolook12) body #main .job .sv{font:var(--j12-t-foot)!important;letter-spacing:0!important;text-transform:none!important;color:#8794A8;opacity:1!important}
html:not(.nolook12) body #main .job .when{font:650 15px/20px var(--j12-sf)!important;letter-spacing:0;color:#F5F7FB;text-shadow:none!important;font-variant-numeric:tabular-nums}
html:not(.nolook12) body #main .jobs .job>.bd:first-child+.when{font:700 17px/22px var(--j12-sf)!important;letter-spacing:-.01em}
html:not(.nolook12) body #main .jobs>.job{background:#111A29;border-radius:16px;box-shadow:var(--j12a-row-sh)}
/* a work-order row (app.js draws it with inline styles; look10 marks it data-j10s): the same row, its name a headline */
html:not(.nolook12) body #main [data-j10s]{background:#111A29!important;border-radius:16px!important;box-shadow:var(--j12a-row-sh)!important;padding:.85rem .95rem!important;margin-bottom:.5rem!important}
html:not(.nolook12) body #main [data-j10s]>div:first-child{flex-wrap:wrap;row-gap:.35rem}   /* a chip that does not fit beside the name goes under it; the name never breaks */
html:not(.nolook12) body #main [data-j10s]>div>b,html:not(.nolook12) body #main .j10-wo-name{font:var(--j12-t-head)!important;letter-spacing:-.01em!important;color:#F5F7FB}
html:not(.nolook12) body #main [data-j10s]>div[style*="#FFB259"]{font:var(--j12-t-foot)!important;color:#A7B3C6!important}
html:not(.nolook12) body #main .j10-sub .j10-date{font:var(--j12-t-foot)!important;letter-spacing:0!important;text-transform:none;color:#A7B3C6}
html:not(.nolook12) body #main .j10-sub .j10-amt{font:700 17px/22px var(--j12-sf)!important;letter-spacing:-.01em;color:#F5F7FB}

/* Proposals (the board's Leads rows): name, value on the right, the follow-up day under them */
html:not(.nolook12) body #main .leads{gap:.5rem}
html:not(.nolook12) body #main .ld-h{gap:.15rem .75rem;padding:.8rem .9rem;min-height:60px;align-items:center}
html:not(.nolook12) body #main .ld-n{font:var(--j12-t-head)!important;letter-spacing:-.01em;color:#F5F7FB}
html:not(.nolook12) body #main .ld.late .ld-f{color:#FCA5A5!important}
html:not(.nolook12) body #main .ld-v{font:700 17px/22px var(--j12-sf)!important;letter-spacing:-.01em;color:#F5F7FB;font-variant-numeric:tabular-nums!important}
html:not(.nolook12) body #main .ld-f{font:var(--j12-t-foot)!important;letter-spacing:0!important;text-transform:none!important;color:#A7B3C6}
html:not(.nolook12) body #main .ld-p,html:not(.nolook12) body #main .ld-why{font:var(--j12-t-foot);color:#A7B3C6}
html:not(.nolook12) body #main section.bc .ld,html:not(.nolook12) body #main section.bc .jobwrap{background:#162133!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important}
html:not(.nolook12) body #main section.bc .ld.promised{box-shadow:inset 0 0 0 1px rgba(251,191,36,.38)!important}
html:not(.nolook12) body #main section.bc .ld.late{box-shadow:inset 0 0 0 1px rgba(248,113,113,.4)!important}
html:not(.nolook12) body #main .ld.promised .ld-f{color:#FDE68A!important}

/* the fold chevron on a Today card (todaycards.js writes ▾ / ▸): a glass circle with the drawn chevron, down when open */
html:not(.nolook12) body #main section.bc:not(.tc-collapsed) .tc-chev{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.07)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font-size:0!important;color:transparent!important}
html:not(.nolook12) body #main section.bc:not(.tc-collapsed) .tc-chev::before{content:"";position:absolute;top:-7px;bottom:-7px;left:-14px;right:0;border-radius:50%}   /* v463 assembler (review pass 2, LOW-5): 44 x 44 to a thumb */
html:not(.nolook12) body #main section.bc:not(.tc-collapsed) .tc-chev::after{content:"";position:absolute;left:8px;top:8px;width:14px;height:14px;background:#A7B3C6;
  -webkit-mask:var(--j12a-chev) center/14px 14px no-repeat;mask:var(--j12a-chev) center/14px 14px no-repeat;transform:rotate(90deg)}

/* the Business tab's tiles (the drawer): small cards, the icon in its tile, the name a callout */
html:not(.nolook12) body #main #lx .lx-t{background:#111A29!important;border-radius:16px!important;box-shadow:var(--j12a-row-sh)!important}
html:not(.nolook12) body #main #lx .lx-t::before,html:not(.nolook12) body #main #lx .lx-t::after{content:none!important;display:none!important}
html:not(.nolook12) body #lx .lx-grid .lx-n{font:650 14px/18px var(--j12-sf)!important;letter-spacing:-.005em!important;color:#F5F7FB!important}
html:not(.nolook12) body #lx .lx-grid .lx-s{font:500 12px/16px var(--j12-sf)!important;color:#A7B3C6;font-variant-numeric:tabular-nums!important}
html:not(.nolook12) body #lx .lx-grid .lx-s.lx-d{color:#8794A8}
html:not(.nolook12) body #lx .lx-grid .lx-m{border-radius:10px!important}
html:not(.nolook12) body #main #lx details.cb-lx>summary .cb-nm{font:var(--j12-t-head)!important;letter-spacing:-.01em!important;text-transform:none!important}
html:not(.nolook12) body #main .lx-hd,html:not(.nolook12) body #main .lx-bar span{font:var(--j12-t-head)!important;letter-spacing:-.01em!important;text-transform:none!important;color:#F5F7FB}
html:not(.nolook12) body #main .lx-hd::before,html:not(.nolook12) body #main .lx-hd::after,html:not(.nolook12) body #main .lx-bar span::before,html:not(.nolook12) body #main .lx-bar span::after{content:none!important;display:none!important}

/* ---- 5 · chips: one pill, one meaning per colour (look10's chips restyled, not doubled) ------------------------------ */
html:not(.nolook12) body #main .chip,html:not(.nolook12) body #main .pill,html:not(.nolook12) body #main .j10-st,html:not(.nolook12) body #main .job .bd .inv-st span,
html:not(.nolook12) body #main .jb-s,html:not(.nolook12) body #main .jc-pill,html:not(.nolook12) body #main .cu-rep,html:not(.nolook12) body #main .hr-s,html:not(.nolook12) body #main .ld-st{
  display:inline-block;height:24px;min-height:24px;max-width:100%;padding:0 .6rem!important;border-radius:999px!important;vertical-align:middle;
  font:700 12px/24px var(--j12-sf)!important;letter-spacing:.005em!important;text-transform:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:rgba(255,255,255,.08);color:#C9D2DF;box-shadow:none!important;border:0;box-sizing:border-box}
/* a chip you can tap keeps its 44 px halo (look9's ::before) — no clipping on those */
html:not(.nolook12) body #main :is(button,a).chip,html:not(.nolook12) body #main :is(button,a).pill{overflow:visible}
/* green: done · paid · booked */
html:not(.nolook12) body #main .chip.booked,html:not(.nolook12) body #main .chip.paid,html:not(.nolook12) body #main .pill.paid,html:not(.nolook12) body #main .pill.good,
html:not(.nolook12) body #main .j10-st.ok,html:not(.nolook12) body #main .job .bd .inv-st span.ok,html:not(.nolook12) body #main .ld-st.ok{background:rgba(52,211,153,.14)!important;color:#A7F3D0!important}
/* amber: due today · waiting on you */
html:not(.nolook12) body #main .j10-st:not(.ok):not(.late):not(.quiet),html:not(.nolook12) body #main .job .bd .inv-st span:not(.ok):not(.late):not(.quiet),
html:not(.nolook12) body #main .pill.due,html:not(.nolook12) body #main .chip.due,html:not(.nolook12) body #main .pill.watch,
html:not(.nolook12) body #main .chip.escalated_cant_answer,html:not(.nolook12) body #main .chip.escalated_over_quote,html:not(.nolook12) body #main .chip.escalated_wants_human,
html:not(.nolook12) body #main .chip.escalated_upset,html:not(.nolook12) body #main .ld-st.warm,html:not(.nolook12) body #main .ld-st.no{background:rgba(251,191,36,.14)!important;color:#FDE68A!important}
/* red: late · overdue · needs a person now */
html:not(.nolook12) body #main .chip.escalated,html:not(.nolook12) body #main .chip.late,html:not(.nolook12) body #main .pill.late,html:not(.nolook12) body #main .pill.od,
html:not(.nolook12) body #main .chip.inv-od,html:not(.nolook12) body #main .pill.crit,html:not(.nolook12) body #main .j10-st.late,
html:not(.nolook12) body #main .job .bd .inv-st span.late,html:not(.nolook12) body #main .ld-st.hot{background:rgba(248,113,113,.14)!important;color:#FECACA!important}
/* blue: booked for later · on the way · a message waiting */
html:not(.nolook12) body #main .chip.message,html:not(.nolook12) body #main .chip.new,html:not(.nolook12) body #main .pill.new,
html:not(.nolook12) body #main .chip.edited{background:rgba(96,165,250,.14)!important;color:#BFDBFE!important}
/* quiet: a fact, not a state */
html:not(.nolook12) body #main .chip.spam,html:not(.nolook12) body #main .chip.es,html:not(.nolook12) body #main .chip.repeat,html:not(.nolook12) body #main .pill.pend,
html:not(.nolook12) body #main .j10-st.quiet,html:not(.nolook12) body #main .job .bd .inv-st span.quiet,html:not(.nolook12) body #main .ld-st.cold{background:rgba(255,255,255,.08)!important;color:#C9D2DF!important}

/* the company tag on a row (5.0: "Happy Brush", "Jetsy" — app.js coBadgeK draws it inline in the company's colour, spaced capitals):
   sentence case, the caption size, the company's colour kept on the words and softened on the ring */
html:not(.nolook12) body #main .cob{font:600 12px/16px var(--j12-sf)!important;letter-spacing:0!important;text-transform:none!important;
  border-color:color-mix(in srgb,currentColor 38%,transparent)!important;padding:2px 8px 2px 2px!important}
/* a word app.js writes in orange on a work-order row ("past start day", "Not paid") is a late chip */
html:not(.nolook12) body #main [data-j10s] span[style*="#FF8A5B"]{display:inline-block;height:24px;padding:0 .6rem;border-radius:999px;background:rgba(248,113,113,.14);
  color:#FECACA!important;font:700 12px/24px var(--j12-sf)!important;white-space:nowrap}

/* the small spaced-capital labels the cards still draw (found on every tab, both accounts): sentence case, a caption, no tracking */
html:not(.nolook12) body #main :is(.rmst,.tj-gh,.tj-k,.j50-daylbl,.j50-mrow .k,.jqt-l,.jqt-ol,.j50-st,.ipr-lk,.jc-k i,.jmt-k span,.fu-k,.jct-c span,.rn-k,.lx-hd,.gh){
  text-transform:none!important;letter-spacing:0!important}
html:not(.nolook12) body #main :is(.tj-gh,.tj-k,.j50-daylbl,.j50-mrow .k,.jqt-l,.jqt-ol,.j50-st,.ipr-lk,.jc-k i,.jmt-k span,.fu-k,.jct-c span,.rn-k){
  font-size:12px!important;line-height:16px!important;font-weight:600!important}
html:not(.nolook12) body #main details.handled>summary{text-transform:none!important;letter-spacing:0!important}
html:not(.nolook12) body #main .rmst{font:700 12px/16px var(--j12-sf)!important}

/* the filter chips (Calls: All · Booked · Messages …): a segmented row, the picked one white */
html:not(.nolook12) body #main .filters{gap:.5rem}
html:not(.nolook12) body #main .f{position:relative;min-height:36px!important;height:36px;margin:4px 0;padding:0 .9rem;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  color:#A7B3C6;font:600 14px/1 var(--j12-sf);letter-spacing:0;text-transform:none}
html:not(.nolook12) body #main .f[aria-pressed="true"]{background:#F5F7FB;color:#0B1220;box-shadow:none}
html:not(.nolook12) body #main .f::before{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}   /* 36 px to the eye, 44 to a thumb */
/* the line chips on Proposals (All · Happy Brush Painters · Jetsy …): the same segmented pills */
html:not(.nolook12) body #main .ln-chip{border:0!important;background:rgba(255,255,255,.06)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important;color:#A7B3C6!important;
  font:600 14px/1 var(--j12-sf)!important;letter-spacing:0!important}
html:not(.nolook12) body #main .ln-chip.on{background:#F5F7FB!important;color:#0B1220!important;box-shadow:none!important}

/* ---- 6 · buttons ---------------------------------------------------------------------------------------------------- */
/* secondary: glass with a hairline · primary: the one orange, a gradient lit from the top, dark ink (6.7:1) */
html:not(.nolook12) body #main .b{min-height:44px;padding:0 1rem;border-radius:14px!important;border:0;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);color:#F5F7FB;letter-spacing:0;text-transform:none;text-shadow:none}
html:not(.nolook12) body #main .b:not(.whoOpt){font:650 15px/20px var(--j12-sf)}
html:not(.nolook12) body #main .b.sm:not(.whoOpt){min-height:44px;padding:0 .8rem;font:600 14px/18px var(--j12-sf)}
html:not(.nolook12) body #main .b.pri,html:not(.nolook12) body #main .b.ring,html:not(.nolook12) body #main .b.primary,html:not(.nolook12) body #main .lx-b{
  background:linear-gradient(180deg,#FF8A3D,#FF6A1A)!important;color:#1A0C02!important;font-weight:700;text-shadow:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px -4px rgba(255,106,26,.42)!important}
html:not(.nolook12) body #main .b.danger{background:rgba(248,113,113,.08)!important;color:#FCA5A5!important;
  box-shadow:inset 0 0 0 1px rgba(248,113,113,.32)!important}
html:not(.nolook12) body #main .b.quiet{background:transparent!important}
html:not(.nolook12) body #main .b svg{flex:none}
html:not(.nolook12) body #main .linkish{color:#FF8A3D;font-weight:600}

/* ---- 7 · fields ------------------------------------------------------------------------------------------------------ */
/* 16px type (iOS never zooms), a dark well with a hairline, 14px corners, an orange 2px focus ring */
html:not(.nolook12) body #main :is(input:not([type]),input[type=text],input[type=search],input[type=password],input[type=tel],input[type=email],input[type=number],input[type=url],input[type=date],input[type=time],input[type=datetime-local],input[type=month],select,textarea){
  background-color:#0B111C;color:#F5F7FB;border:0;border-radius:14px!important;min-height:44px;padding:.6rem .85rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)!important;font:400 16px/22px var(--j12-sf);letter-spacing:0;text-transform:none}
html:not(.nolook12) body #main textarea{line-height:22px}
/* Setup's boxes were 14.4px on 42px (look-docs, #main .set …): an iPhone zooms the page into any box under 16px */
html:not(.nolook12) body #main .set .grp .r .ctl :is(input:not([type=checkbox]):not([type=radio]),select){font-size:16px!important;line-height:22px;min-height:44px!important}
html:not(.nolook12) body #main :is(input,select,textarea):focus{outline:0;box-shadow:inset 0 0 0 1px #FF6A1A,0 0 0 2px rgba(255,106,26,.55)!important}
html:not(.nolook12) body #main .dates input{font:400 15px/20px var(--j12-sf)}
/* labels above fields: a footnote in t2, sentence case (they were 9px mono capitals) */
html:not(.nolook12) body #main :is(.editf label,.jf label,.pform label,.dates label,.jm-lbl,.jmu-kl,.pt-lb){font:600 13px/18px var(--j12-sf)!important;letter-spacing:0!important;
  text-transform:none!important;color:#A7B3C6}
html:not(.nolook12) body #main .search input{padding-left:2.4rem;background:#0B111C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7B90' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") .8rem center/18px 18px no-repeat}
html:not(.nolook12) body #main .pager{font:var(--j12-t-foot);letter-spacing:0;text-transform:none;color:#A7B3C6}

/* ---- 8 · Setup: inset grouped lists ------------------------------------------------------------------------------- */
/* compact-b puts each settings group behind a bar (details.cb-set); a run of bars is ONE inset grouped list — 52px rows, hairlines
   that start at the text, the count in grey on the right, a › that turns; an open group's settings sit inside it. The bar is not
   sticky here (look10's top offset would push it onto the first setting inside the clipped group) */
html:not(.nolook12) body #main .set{gap:0}
html:not(.nolook12) body #main .set>details.cb-set{margin:0;border-radius:0;background:#111A29;box-shadow:none}
html:not(.nolook12) body #main .set>:not(details.cb-set)+details.cb-set,html:not(.nolook12) body #main .set>details.cb-set:first-child{border-top-left-radius:22px;border-top-right-radius:22px;margin-top:.75rem}
html:not(.nolook12) body #main .set>details.cb-set:last-child,html:not(.nolook12) body #main .set>details.cb-set:has(+ :not(details.cb-set)){border-bottom-left-radius:22px;border-bottom-right-radius:22px;margin-bottom:.25rem}
html:not(.nolook12) body #main .set>details.cb-set{overflow:hidden}
html:not(.nolook12) body #main .set>details.cb-set>summary.cb-s{position:relative!important;top:auto!important;display:flex;align-items:center;gap:.75rem;min-height:52px;margin:0;padding:.35rem 1rem;
  background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:inherit;box-shadow:none!important;color:#F5F7FB}
html:not(.nolook12) body #main .set>details.cb-set+details.cb-set>summary.cb-s::before{content:"";position:absolute;left:1rem;right:0;top:0;height:1px;background:rgba(255,255,255,.07)}
html:not(.nolook12) body #main .set>details.cb-set>summary .cb-nm{font:500 17px/22px var(--j12-sf)!important;letter-spacing:-.01em!important;color:#F5F7FB!important}
html:not(.nolook12) body #main .set>details.cb-set>summary .cb-n{background:transparent!important;padding:0!important;min-width:0!important;color:var(--j12-t3)!important;font:500 15px/24px var(--j12-sf)!important}
html:not(.nolook12) body #main .set>details.cb-set>summary .cb-ch{margin-left:0}
html:not(.nolook12) body #main .set>details.cb-set[open]>summary.cb-s{box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)!important}
html:not(.nolook12) body #main .set>details.cb-set>.cb-body{padding:0;background:#0E1622}
/* a group that is not behind a bar (no title of its own) is its own inset card */
html:not(.nolook12) body #main .set>.grp{margin-top:.75rem;border-radius:22px;overflow:hidden}
html:not(.nolook12) body #main .grp .gh{font:var(--j12-t-head);letter-spacing:-.01em;text-transform:none;color:#F5F7FB;padding:.9rem 1rem .4rem}
html:not(.nolook12) body #main .grp .gh::before,html:not(.nolook12) body #main .grp .gh::after{content:none!important;display:none!important}
/* a setting: words on the left (16px, the explanation a footnote), the control on the right; hairlines start at the words */
html:not(.nolook12) body #main .set .r{position:relative;min-height:52px;padding:.7rem 1rem;gap:.75rem;border-bottom:0}
html:not(.nolook12) body #main .set .r+.r::before{content:"";position:absolute;left:1rem;right:0;top:0;height:1px;background:rgba(255,255,255,.07)}
html:not(.nolook12) body #main .set .r .lb .t{font:400 16px/22px var(--j12-sf);color:#F5F7FB}
html:not(.nolook12) body #main .set .r .lb .d{font:var(--j12-t-foot);color:#8794A8}
html:not(.nolook12) body #main .set .grp>p.note{margin:.2rem 1rem .9rem!important;font:var(--j12-t-foot);color:#8794A8}
/* the switch: an iPhone switch — a pill, a white knob with a shadow, green when on (green = on, answering) */
html:not(.nolook12) body #main .sw{width:51px;min-width:51px;height:31px;min-height:31px;border-radius:999px!important;background:rgba(120,130,150,.32);box-shadow:none}
html:not(.nolook12) body #main .sw::after{top:2px;left:2px;width:27px;height:27px;border-radius:50%!important;background:#FFFFFF!important;box-shadow:0 3px 8px rgba(0,0,0,.28),0 1px 1px rgba(0,0,0,.16)!important}
html:not(.nolook12) body #main .sw[aria-checked="true"]{background:#34D399;box-shadow:none}
html:not(.nolook12) body #main .sw[aria-checked="true"]::after{transform:translateX(20px)}
html:not(.nolook12) body #main .sw{position:relative}
html:not(.nolook12) body #main .sw::before{content:"";position:absolute;left:-2px;right:-2px;top:-7px;bottom:-7px}   /* 31 px to the eye, 45 to a thumb */
html:not(.nolook12) body #main .set .sw{margin:6px 0}
/* the two-up choices (Brisk / Unhurried …) */
html:not(.nolook12) body #main .whoOpt{background:rgba(255,255,255,.05)!important;border-radius:14px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)!important}
html:not(.nolook12) body #main .whoOpt.on{background:rgba(255,106,26,.12)!important;box-shadow:inset 0 0 0 1.5px #FF6A1A!important}

/* ---- 9 · empty states: an icon, one line, one button -------------------------------------------------------------- */
html:not(.nolook12) body #main .empty{position:relative;gap:.5rem;padding:1.75rem 1.25rem 1.5rem;border:0!important;border-radius:22px!important;background:#111A29!important;box-shadow:var(--j12a-card-sh)!important;text-align:center}
html:not(.nolook12) body #main .empty::before{content:"";position:static;display:block;width:48px;height:48px;margin:0 auto .35rem;border:0;border-radius:16px;
  background:rgba(255,255,255,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7B3C6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l2.5-7h11L20 13'/%3E%3Cpath d='M4 13v5h16v-5h-5l-1 2h-4l-1-2z'/%3E%3C/svg%3E") center/24px 24px no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);opacity:1}
html:not(.nolook12) body #main .empty .ic{display:none}
html:not(.nolook12) body #main .empty h3{font:var(--j12-t-head);letter-spacing:-.01em;color:#F5F7FB}
html:not(.nolook12) body #main .empty p{font:var(--j12-t-call);color:#A7B3C6;max-width:32ch}
html:not(.nolook12) body #main .empty .b{margin-top:.5rem}
/* the empty line inside a card ("No open proposals …"): no dashed wireframe — a quiet well, the same tray, the words centred */
html:not(.nolook12) body #main .bempty{border:0!important;border-radius:16px!important;background:rgba(255,255,255,.035);padding:1.1rem 1rem 1rem!important;margin:.35rem 0;
  text-align:center;font:var(--j12-t-call);color:#A7B3C6;text-wrap:pretty}
html:not(.nolook12) body #main .bempty::before{content:"";display:block;width:40px;height:40px;margin:0 auto .55rem;border-radius:12px;
  background:rgba(255,255,255,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7B3C6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l2.5-7h11L20 13'/%3E%3Cpath d='M4 13v5h16v-5h-5l-1 2h-4l-1-2z'/%3E%3C/svg%3E") center/20px 20px no-repeat}

/* ---- 10 · light mode ------------------------------------------------------------------------------------------------ */
/* easy2's flip makes every dark ground light, so a card came out a shade DARKER than the page (237 vs 243). On a light screen a
   card is white on the grey page, with a soft shadow — these rules name je-light, so easy2 leaves them as written. */
html.je-light:not(.nolook12) body #main section.bc:not(.tc-collapsed),html.je-light:not(.nolook12) body #main .pcard,html.je-light:not(.nolook12) body #main .grp,
html.je-light:not(.nolook12) body #main .need,html.je-light:not(.nolook12) body #main .empty{background:#FFFFFF!important;box-shadow:inset 0 0 0 1px rgba(10,20,40,.06),0 10px 26px rgba(16,32,58,.08)!important}
html.je-light:not(.nolook12) body #main .call,html.je-light:not(.nolook12) body #main .person,html.je-light:not(.nolook12) body #main .jobwrap,
html.je-light:not(.nolook12) body #main .ld,html.je-light:not(.nolook12) body #main .jobs>.job,html.je-light:not(.nolook12) body #main [data-j10s],html.je-light:not(.nolook12) body #main #lx .lx-t{background:#FFFFFF!important;box-shadow:inset 0 0 0 1px rgba(10,20,40,.06),0 3px 10px rgba(16,32,58,.06)!important}
html.je-light:not(.nolook12) body #main .set>details.cb-set{background:#FFFFFF}
html.je-light:not(.nolook12) body #main .set>details.cb-set>.cb-body{background:#F7F9FC}
html.je-light:not(.nolook12) body #main details.rmgrp>summary.cb-s,html.je-light:not(.nolook12) body #main details.rmgrp>summary.cmp-sum,
html.je-light:not(.nolook12) body #main .h.j6-hi{background:rgba(243,246,250,.82)!important}
html.je-light:not(.nolook12) body #main section.bc details.cmp-fold>summary.cmp-sum,html.je-light:not(.nolook12) body #main .set>details.cb-set>summary.cb-s{background:transparent!important}
html.je-light:not(.nolook12) body #main .b.pri,html.je-light:not(.nolook12) body #main .b.ring,html.je-light:not(.nolook12) body #main .b.primary{color:#1A0C02!important;
  background:linear-gradient(180deg,#FF8A3D,#FF6A1A)!important}   /* easy2 darkened the top stop: the light from above stays on top */
html.je-light:not(.nolook12) body #main .f[aria-pressed="true"],html.je-light:not(.nolook12) body #main .ln-chip.on{background:#0B1220!important;color:#FFFFFF!important}
html.je-light:not(.nolook12) body #main .sw[aria-checked="true"]{background:#22B07D}
html.je-light:not(.nolook12) body #main .sw::after{background:#FFFFFF!important}
html.je-light:not(.nolook12) body #main section.bc .ld,html.je-light:not(.nolook12) body #main section.bc .jobwrap{background:#F6F8FB!important;box-shadow:inset 0 0 0 1px rgba(10,20,40,.06)!important}
html.je-light:not(.nolook12) body{background:#F3F6FA!important}   /* the light page stays easy2's grey, so a white card stands off it */