/* look14-person.css — v469 B · a customer's page in Jetsy's own look.
   Joe, Fri 23 Oct 2026, 9:07pm: "Make 5 more upgrades please" (after v468's five; the same brief as v463/v468: "make it look like a
   billion dollar crm … think of yourself as a world class software engineer"). Plan: /home/claude/tools/p469/PLAN.md, upgrade B.

   WHY. A customer's page (app.js viewCustomer) was a card with a small coin, a row of six mixed chips (Call · Text · + New proposal /
   Their app · + Route · Properties), a tiny "‹ Customers" link and the details as a plain form. Contacts does this with a big coin,
   the name, a row of round labeled actions and inset grouped sections. [another CRM]'s customer pages are forms with toolbars.

   WHAT (layout and the page's own colors; the buttons' meaning colors stay look13-actions.css's, the list rows' grammar look13-lists'):
     1 · Back: an iOS back — chevron + "Customers" 17 px in the tint, 44 px tall (the same element, .back).
     2 · The header, on the page (the card around everything goes): a 56 px coin in the customer's own hue (look14-person.js sets
         --avh from the name with look10's hue, so it is the color of their coin everywhere else), the name 22/28 bold, the phone and
         the status line ("Last contact · owes $800") 15/20 under it. The status line is #cs-root's first child: #cs-root is
         display:contents and the page is a flex column, so the line is ordered under the name and the next step under the actions
         without moving anything in the DOM.
     3 · The actions: FOUR tiles in one row — Call (green) · Text (blue) · Proposal (orange) · Their app (indigo): icon over a 12 px
         label, 60 px tall, 12 px corners (Contacts' message / call / video / mail). The rest (Route · Properties · Maps · the caller
         page's Email and "What Jetsy knows") are a second, quieter row of gray capsules. Every one is the existing element, restyled;
         no handler is touched, nothing is removed. "+ New proposal" is too long for a tile, so its own words are drawn at 0 px and a
         label the script writes in the app's language (data-j14l) is shown instead; the button's accessible name stays its own words.
     4 · The one next step (.cs-next): solid orange (look13's main), 50 px, 17 px semibold, full width.
     5 · The story (.cs-tl) and the Details fold as inset grouped sections: rows 44 px+, labels left, values right, hairlines inset
         16 px, first/last rows round (look14-person.js marks a day's first/last row — a day heading sits between runs). A row that
         opens something gets a chevron. The form under Details: Tags, Email, Payment terms, Notes as grouped rows (label left, the
         field right, no boxes), Save as a row action. The KPI tiles stay (look12's). The job rows: one grouped surface like look13's
         lists (the date as a leading tile, the name 17/22, a chevron), the paper buttons under the row.
     6 · The caller page (viewPerson, .pcard without .cpf) shares the header, the action tiles and the form; the proposal/lead page
         and the job page do not use this markup (proposals.js sheets, board.js's Jobs card) and are not touched.
   Dark and light (html.je-light: every color is a variable; easy2 never flips a rule that names je-light). No motion here beyond
   the fold chevron's turn, which look12-motion already owns. Off: localStorage nolook14 = 1 (html.nolook14) — every rule below sits
   under html:not(.nolook14), so v468's page comes back exactly. Selectors carry #main#main so they win over look10/12/13 (#main,
   !important) and the inline rules at any class count. */

/* ------------------------------------------------------------------------------------------------------------ tokens -- */
html:not(.nolook14){
  --j14-grp:#111A29; --j14-sep:rgba(255,255,255,.10); --j14-edge:rgba(255,255,255,.06); --j14-press:rgba(255,255,255,.05);
  --j14-t1:#F5F7FB; --j14-t2:#A7B3C6; --j14-t3:#8794A8; --j14-ph:#6E7B90;
  --j14-tint:#4BA3F5; --j14-chev:rgba(214,224,240,.30);
  --j14-prop-bg:rgba(255,106,26,.16); --j14-prop-tx:#FF9A5C;
  --j14-app-bg:rgba(126,134,245,.22); --j14-app-tx:#9D9BFF;
  --j14-ai-bg:rgba(165,139,250,.18); --j14-ai-tx:#D59CFF;
  --j14-quiet-bg:rgba(255,255,255,.08); --j14-quiet-tx:#C7CDD6;
  --j14-coin-hi:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 60%);
  --j14-coin-l:30%; --j14-coin-s:40%; --j14-coin-ink-l:84%;
  --j14-field:rgba(110,124,148,.18);
  --j14-red:#F25F5C; --j14-date-tx:#F5F7FB;
  --j14-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 12px 28px -18px rgba(0,0,0,.6);
}
html.je-light:not(.nolook14){
  --j14-grp:#FFFFFF; --j14-sep:rgba(52,64,84,.16); --j14-edge:rgba(10,20,40,.06); --j14-press:rgba(0,0,0,.035);
  --j14-t1:#0B1220; --j14-t2:#5B6472; --j14-t3:#7C8594; --j14-ph:#8A8A8E;
  --j14-tint:#1F6FD1; --j14-chev:rgba(52,64,84,.30);
  --j14-prop-bg:rgba(255,106,26,.12); --j14-prop-tx:#B5470B;
  --j14-app-bg:rgba(85,96,216,.12); --j14-app-tx:#3F3DB8;
  --j14-ai-bg:rgba(124,92,214,.12); --j14-ai-tx:#7A2DA8;
  --j14-quiet-bg:rgba(10,20,40,.06); --j14-quiet-tx:#4A5262;
  --j14-coin-hi:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 60%);
  --j14-coin-l:44%; --j14-coin-s:46%; --j14-coin-ink-l:98%;
  --j14-field:rgba(110,124,148,.10);
  --j14-red:#D93B3B; --j14-date-tx:#0B1220;
  --j14-shadow:0 0 0 1px rgba(10,20,40,.05) inset,0 10px 24px -16px rgba(16,32,58,.22);
}

/* ------------------------------------------------------------------------------------------------- 1 · the back -- */
html:not(.nolook14) body #main#main>button.back:is([data-cact="back"],[data-act="people"]){
  display:inline-flex;align-items:center;gap:2px;min-height:44px;margin:0 0 2px -6px;padding:0 10px 0 2px;
  background:transparent;border:0;border-radius:12px;color:var(--j14-tint);font:400 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:-.01em}
html:not(.nolook14) body #main#main>button.back:is([data-cact="back"],[data-act="people"])>svg{width:14px;height:22px;stroke-width:2.6;flex:none}
html:not(.nolook14) body #main#main>button.back:is([data-cact="back"],[data-act="people"]):active{background:var(--j14-press)}

/* -------------------------------------------------------------------------------------------- 2 · the header, on the page -- */
html:not(.nolook14) body #main#main .pcard{
  display:flex;flex-direction:column;align-items:stretch;gap:0;position:relative;margin:0;padding:4px 0 0!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible}
html:not(.nolook14) body #main#main .pcard>*{order:5;min-width:0}
html:not(.nolook14) body #main#main .pcard>.ptop{order:1}
html:not(.nolook14) body #main#main .pcard.cpf>#cs-root{display:contents}
html:not(.nolook14) body #main#main .pcard.cpf>#cs-root>*{order:5;min-width:0}
html:not(.nolook14) body #main#main .pcard.cpf>#cs-root>:is(.cs-line,.cs-note){order:2}
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts){order:3}
html:not(.nolook14) body #main#main .pcard.cpf>#cs-root>.cs-next{order:4}
/* the coin: 56 px, the customer's hue (--avh from the script; look10's own formula), a soft highlight like an iOS contact photo */
html:not(.nolook14) body #main#main .pcard>.ptop{display:flex;align-items:center;gap:14px;padding:4px 2px 0}
html:not(.nolook14) body #main#main .pcard>.ptop>.av.big{
  flex:none;width:56px;height:56px;border-radius:50%!important;display:grid;place-items:center;
  background:var(--j14-coin-hi),hsl(var(--avh,210) var(--j14-coin-s) var(--j14-coin-l))!important;color:hsl(var(--avh,210) 90% var(--j14-coin-ink-l))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)!important;font:700 22px/1 var(--j12-sf,-apple-system,system-ui,sans-serif)!important;letter-spacing:0!important;text-shadow:none!important}
html:not(.nolook14) body #main#main .pcard>.ptop>.pid{flex:1 1 auto;min-width:0}
html:not(.nolook14) body #main#main .pcard>.ptop>.pid>.nm{font:700 22px/28px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:-.015em;color:var(--j14-t1);overflow-wrap:anywhere}
html:not(.nolook14) body #main#main .pcard>.ptop>.pid>.m{margin-top:1px;font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:0;color:var(--j14-t2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* the status line under the name: "Last contact: 17 days ago · owes $800" — the money words keep their colors (app.js's) */
html:not(.nolook14) body #main#main .pcard.cpf #cs-root>.cs-line{margin:8px 2px 0;font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif);color:var(--j14-t2);gap:2px 6px}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root>.cs-line .cs-sep{color:var(--j14-t3)}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root>.cs-line :is(.cs-late,.cs-due,.cs-paid){font-weight:600}
/* light mode: app.js's money words are made for the dark page; darker ones here (easy2 cannot know these) */
html.je-light:not(.nolook14) body #main#main .pcard.cpf #cs-root>.cs-line .cs-due{color:#9A5B00}
html.je-light:not(.nolook14) body #main#main .pcard.cpf #cs-root>.cs-line .cs-late{color:#C42B1C}
html.je-light:not(.nolook14) body #main#main .pcard.cpf #cs-root>.cs-line .cs-paid{color:#1C7A33}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root>.cs-note{margin:2px 2px 0;font:400 13px/18px var(--j12-sf,-apple-system,system-ui,sans-serif);color:var(--j14-t3)}

/* ----------------------------------------------------------------------------------- 3 · the actions: four tiles, then a quiet row -- */
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts){display:flex!important;flex-wrap:wrap;gap:8px!important;margin:14px 0 0!important;padding:0}
/* a tile: the existing button, icon over label. Beats look12's .b (1,3,1 !important on the radius) and look13's colors (1,4,3) */
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>:is(a,button).b.b[data-j14k]{
  flex:1 1 0;min-width:0;max-width:calc(25% - 6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:60px;margin:0;padding:8px 4px 7px;box-sizing:border-box;border:0;border-radius:12px!important;
  background-image:none!important;box-shadow:none!important;text-shadow:none!important;
  font:500 12px/14px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.b.b[data-j14k]:active{filter:brightness(1.15)}
/* the icon: the button's own svg (Call, Text stroke currentColor) made 22 px; a button without one gets a glyph drawn in its color */
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.b.b[data-j14k]>svg{width:22px;height:22px;flex:none;margin:0}
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.b.b[data-j14k]>.ji{display:none!important}
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.b.b[data-j14k][data-j14i]::before{
  content:"";display:block;width:22px;height:22px;flex:none;background:currentColor;
  -webkit-mask:var(--j14-ic) center/22px 22px no-repeat;mask:var(--j14-ic) center/22px 22px no-repeat}
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.b.b[data-j14i="prop"]{--j14-ic: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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M18.4 2.6a2.1 2.1 0 0 1 3 3L13 14l-4 1 1-4Z'/%3E%3C/svg%3E")}
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.b.b[data-j14i="app"]{--j14-ic: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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E")}
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.b.b[data-j14i="mail"]{--j14-ic: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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
/* a label the script writes (the words are too long for a tile: "+ New proposal"): the button's own words go to 0 px, the label shows */
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.b.b[data-j14l]{font-size:0!important;line-height:0!important}
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.b.b[data-j14l]::after{content:attr(data-j14l);display:block;font:500 12px/14px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* the four colors (Call and Text are look13's own tints, kept; the proposal and the app are this page's) */
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.b.b[data-j14k="prop"]{background-color:var(--j14-prop-bg)!important;color:var(--j14-prop-tx)!important}
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.b.b[data-j14k="app"]{background-color:var(--j14-app-bg)!important;color:var(--j14-app-tx)!important}
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.b.b[data-j14k="ai"]{background-color:var(--j14-ai-bg)!important;color:var(--j14-ai-tx)!important}
/* the quiet row: Route · Properties · Maps … gray capsules, 44 px, after a line break */
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.j14-br{flex:0 0 100%;width:100%;height:0;margin:-4px 0 0;padding:0;border:0;display:block}
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>:is(a,button).b.b[data-j14k="quiet"]{
  flex:0 1 auto;min-width:0;max-width:100%;min-height:44px;margin:0;padding:0 14px;border:0;border-radius:999px!important;
  background:var(--j14-quiet-bg)!important;background-image:none!important;box-shadow:none!important;text-shadow:none!important;color:var(--j14-quiet-tx)!important;
  font:500 14px/18px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.b.b[data-j14k="quiet"]>.ji{width:16px;height:16px}
html:not(.nolook14) body #main#main .pcard>:is(.cpf-acts,.acts)>.b.b[data-j14k="quiet"]:active{background:var(--j14-press)!important}

/* ----------------------------------------------------------------------------------------- 4 · the one next step -- */
html:not(.nolook14) body #main#main .pcard.cpf #cs-root>.cs-next{
  width:100%;min-height:50px;margin:12px 0 0;padding:0 16px;border-radius:14px!important;
  font:600 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:-.01em}

/* ---------------------------------------------------------------------------------------- 5 · inset grouped sections -- */
/* the story: a day heading outside the group, the day's rows one grouped surface (the script marks a day's first and last row) */
html:not(.nolook14) body #main#main .pcard.cpf #cs-root>.cs-tl{margin:4px 0 0}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root .cs-day{margin:18px 16px 6px;padding:0;font:400 13px/18px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:.02em;text-transform:uppercase;color:var(--j14-t3)}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root .cs-row{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:0;padding:11px 16px;box-sizing:border-box;
  background:var(--j14-grp);border:0;border-radius:0;color:var(--j14-t1);text-align:left;text-decoration:none}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root .cs-row[data-j14r~="first"]{border-top-left-radius:16px;border-top-right-radius:16px}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root .cs-row[data-j14r~="last"]{border-bottom-left-radius:16px;border-bottom-right-radius:16px;box-shadow:var(--j14-shadow)}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root .cs-row:not([data-j14r~="first"])::before{content:"";position:absolute;left:16px;right:0;top:0;height:1px;background:var(--j14-sep);transform:scaleY(.5);transform-origin:0 0;pointer-events:none}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root :is(button,a).cs-row:active{background:var(--j14-press)}
/* a row that opens something: a chevron at the right, like every navigating row on the iPhone */
html:not(.nolook14) body #main#main .pcard.cpf #cs-root :is(button,a).cs-row:not(.cs-row0)::after{
  content:"";flex:none;width:8px;height:14px;margin-left:2px;background:var(--j14-chev);
  -webkit-mask:var(--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")) center/14px 14px no-repeat;
  mask:var(--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")) center/14px 14px no-repeat}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root .cs-row .cs-w{font:400 16px/21px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:-.01em;color:var(--j14-t1)}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root .cs-row .cs-d{font:400 13px/18px var(--j12-sf,-apple-system,system-ui,sans-serif);color:var(--j14-t3)}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root .cs-row .cs-a{font:600 16px/21px var(--j12-sf,-apple-system,system-ui,sans-serif);font-variant-numeric:tabular-nums;color:var(--j14-t2)}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root .cs-row .cs-t{font:400 13px/18px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--j14-t3)}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root .cs-row .cs-pic{border-radius:10px}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root>.cs-more{margin:10px 0 0;border-radius:14px!important;font:500 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)}
html:not(.nolook14) body #main#main .pcard.cpf #cs-root .cs-empty{margin:14px 16px 0;font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif);color:var(--j14-t3);text-align:center;text-wrap:pretty}

/* Follow up (plug-followups' #fu-line): one grouped row, the dot, Done · Snooze two capsules */
html:not(.nolook14) body #main#main .pcard.cpf>#fu-line{
  margin:14px 0 0;padding:12px 16px;border-radius:16px;background:var(--j14-grp);box-shadow:var(--j14-shadow),inset 0 0 0 1px var(--j14-edge);
  font:400 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif);color:var(--j14-t1);gap:10px}
html:not(.nolook14) body #main#main .pcard.cpf>#fu-line .fu-lt b{font-weight:600}
html:not(.nolook14) body #main#main .pcard.cpf>#fu-line .fu-dot{width:8px;height:8px;margin:0 8px 2px 0;background:var(--j14-red)}
html:not(.nolook14) body #main#main .pcard.cpf>#fu-line .fu-la{gap:8px}
html:not(.nolook14) body #main#main .pcard.cpf>#fu-line .fu-la .b{border-radius:12px!important;font:600 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif)}

/* the Details fold: a grouped header row (not sticky, no glass), the form as grouped rows under it */
html:not(.nolook14) body #main#main .pcard details.cs-det{margin:14px 0 0!important;border:0;background:none;box-shadow:none}
html:not(.nolook14) body #main#main .pcard details.cs-det>summary.cb-s{
  position:static!important;top:auto!important;z-index:auto;display:flex!important;align-items:center;gap:10px;min-height:52px;margin:0;padding:8px 16px!important;
  border:0!important;border-radius:16px!important;background:var(--j14-grp)!important;box-shadow:var(--j14-shadow),inset 0 0 0 1px var(--j14-edge)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--j14-t1);cursor:pointer}
html:not(.nolook14) body #main#main .pcard details.cs-det[open]>summary.cb-s{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;box-shadow:inset 0 0 0 1px var(--j14-edge)!important}
html:not(.nolook14) body #main#main .pcard details.cs-det>summary.cb-s>.cb-nm{font:600 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;letter-spacing:-.01em!important;color:var(--j14-t1)!important}
html:not(.nolook14) body #main#main .pcard details.cs-det>summary.cb-s>.cb-amt{font:400 13px/18px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;color:var(--j14-t3);white-space:normal;text-align:right;max-width:55%}
html:not(.nolook14) body #main#main .pcard details.cs-det>summary.cb-s>.cb-ch::before{background:var(--j14-chev)}
html:not(.nolook14) body #main#main .pcard details.cs-det>.cb-body{padding:0!important;margin:0}
/* the form: one grouped surface (continues the header row when the fold is open) */
html:not(.nolook14) body #main#main .pcard .pform{
  display:flex;flex-direction:column;gap:0;margin:0!important;padding:0!important;border:0!important;
  background:var(--j14-grp);border-radius:16px;box-shadow:var(--j14-shadow),inset 0 0 0 1px var(--j14-edge);overflow:hidden}
html:not(.nolook14) body #main#main .pcard:not(.cpf)>.pform,html:not(.nolook14) body #main#main .pcard:not(.cpf)>details{margin-top:14px!important}
html:not(.nolook14) body #main#main .pcard details.cs-det>.cb-body>.pform{border-top-left-radius:0;border-top-right-radius:0;box-shadow:var(--j14-shadow),inset 0 0 0 1px var(--j14-edge)}
html:not(.nolook14) body #main#main .pcard .pform>*{position:relative;margin:0}
html:not(.nolook14) body #main#main .pcard .pform>*+*::before{content:"";position:absolute;left:16px;right:0;top:0;height:1px;background:var(--j14-sep);transform:scaleY(.5);transform-origin:0 0;pointer-events:none}
/* a row: the label left (17 px, the phone's font, no caps), the field right-aligned with no box */
html:not(.nolook14) body #main#main .pcard .pform>label{
  display:flex;flex-direction:row;align-items:center;gap:12px;min-height:48px;padding:6px 16px;box-sizing:border-box;
  font:400 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:0;text-transform:none;color:var(--j14-t1);white-space:nowrap}
html:not(.nolook14) body #main#main .pcard .pform>label>:is(input,select){
  flex:1 1 auto;min-width:0;min-height:44px;padding:0;margin:0;background:transparent!important;border:0;box-shadow:none!important;border-radius:0;
  font:400 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:0;color:var(--j14-t1);text-align:right;outline:0}
html:not(.nolook14) body #main#main .pcard .pform>label>input::placeholder{color:var(--j14-ph)}
html:not(.nolook14) body #main#main .pcard .pform>label>select{
  padding-right:20px;direction:ltr;text-align:right;text-align-last:right;text-overflow:ellipsis;-webkit-appearance:none;appearance:none;color:var(--j14-t2);font-size:16px;
  background:var(--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")) right center/14px 14px no-repeat!important;opacity:.95}
html:not(.nolook14) body #main#main .pcard .pform>label:focus-within{background:var(--j14-press)}
/* Notes: a tall field, its label above it inside the row */
html:not(.nolook14) body #main#main .pcard .pform>label:has(>textarea){flex-direction:column;align-items:stretch;gap:2px;padding:10px 16px 8px;white-space:normal}
html:not(.nolook14) body #main#main .pcard .pform>label>textarea{
  min-height:64px;padding:0;margin:0;background:transparent!important;border:0;box-shadow:none!important;border-radius:0;resize:vertical;
  font:400 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:0;color:var(--j14-t1);outline:0}
html:not(.nolook14) body #main#main .pcard .pform>label>textarea::placeholder{color:var(--j14-ph)}
/* Tags: the chips in one row block, the add field under them, no inner card */
html:not(.nolook14) body #main#main .pcard .pform>.ctg-card{display:flex;flex-direction:column;gap:8px;padding:10px 16px 12px}
html:not(.nolook14) body #main#main .pcard .pform>.ctg-card>label{margin:0;font:400 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:0;text-transform:none;color:var(--j14-t1)}
html:not(.nolook14) body #main#main .pcard .pform>.ctg-card .ctg-tgs{gap:8px}
html:not(.nolook14) body #main#main .pcard .pform>.ctg-card .ctg-tgs .f{min-height:44px!important;height:44px;margin:0;padding:0 14px;border-radius:999px!important;font:500 14px/18px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:0;text-transform:none}
html:not(.nolook14) body #main#main .pcard .pform>.ctg-card .ctg-add{gap:8px}
html:not(.nolook14) body #main#main .pcard .pform>.ctg-card .ctg-add>input{
  min-height:44px;padding:0 14px;border-radius:12px!important;background:var(--j14-field)!important;box-shadow:none!important;border:0;
  font:400 16px/22px var(--j12-sf,-apple-system,system-ui,sans-serif);color:var(--j14-t1)}
html:not(.nolook14) body #main#main .pcard .pform>.ctg-card .ctg-add>input::placeholder{color:var(--j14-ph)}
html:not(.nolook14) body #main#main .pcard .pform>.ctg-card .ctg-add>.b{border-radius:12px!important}
html:not(.nolook14) body #main#main .pcard .pform>.ctg-card .ctg-say{font:400 13px/18px var(--j12-sf,-apple-system,system-ui,sans-serif);color:var(--j14-t3)}
html:not(.nolook14) body #main#main .pcard .pform>.ctg-card .ctg-say:empty{display:none}
/* Save as a row action (the caller page's Save row is an inline-styled div: the same) */
html:not(.nolook14) body #main#main .pcard .pform>:is(.cpf-save,div[style*="display:flex"]){display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:52px;padding:4px 16px}
html:not(.nolook14) body #main#main .pcard .pform>:is(.cpf-save,div[style*="display:flex"])>.b{flex:1 1 auto;min-height:44px;margin:0;border-radius:12px!important;font:600 16px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)}
html:not(.nolook14) body #main#main .pcard .pform>:is(.cpf-save,div[style*="display:flex"])>.note{flex:1 1 100%;margin:0;padding:0 0 6px;font:400 13px/18px var(--j12-sf,-apple-system,system-ui,sans-serif);color:var(--j14-t3)}
html:not(.nolook14) body #main#main .pcard .pform>:is(.cpf-save,div[style*="display:flex"])>.note:empty{display:none}
/* the caller page's Delete (cust-delete) stays its own red-words row */
html:not(.nolook14) body #main#main .pcard .pform>details,html:not(.nolook14) body #main#main .pcard .pform>.cdl{padding:6px 16px 10px}

/* Owes $X on N invoices · Send statement: a grouped row with the amount, the button at the right */
html:not(.nolook14) body #main#main .cpf-stmt{margin:12px 0 0;padding:10px 12px 10px 16px;border-radius:16px;background:var(--j14-grp);box-shadow:var(--j14-shadow),inset 0 0 0 1px var(--j14-edge)}
html:not(.nolook14) body #main#main .cpf-stmt .note{font:500 15px/20px var(--j12-sf,-apple-system,system-ui,sans-serif);color:var(--j14-t1)}
html:not(.nolook14) body #main#main .cpf-stmt .b{border-radius:12px!important}
html:not(.nolook14) body #main#main .cpf-stats{margin-top:12px;gap:8px}
html:not(.nolook14) body #main#main .cpf-note,html:not(.nolook14) body #main#main .cpf-q{margin:10px 16px 0;font:400 13px/18px var(--j12-sf,-apple-system,system-ui,sans-serif);color:var(--j14-t3)}

/* ------------------------------------------------------------------------------- 6 · the job rows, like look13's lists -- */
html:not(.nolook14) body #main#main .jobs.cpf-jobs{
  display:flex;flex-direction:column;gap:0!important;margin:0;padding:0;
  background:var(--j14-grp)!important;border-radius:16px!important;box-shadow:var(--j14-shadow),inset 0 0 0 1px var(--j14-edge)!important}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap{position:relative;display:block;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap:first-child{border-top-left-radius:16px!important;border-top-right-radius:16px!important}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap:last-child{border-bottom-left-radius:16px!important;border-bottom-right-radius:16px!important}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap+.jobwrap::before{content:"";position:absolute;left:72px;right:0;top:0;height:1px;background:var(--j14-sep);transform:scaleY(.5);transform-origin:0 0;pointer-events:none;z-index:1}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap>.job{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 12px 10px 16px;box-sizing:border-box;border-radius:inherit}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap>button.job:active{background:var(--j14-press)}
/* the date as the row's leading tile (where a coin would be): the day 17 px bold over the month 11 px caps */
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap>.job>.when{
  display:block;flex:none;width:44px;min-width:44px;padding:5px 0 4px;border-radius:10px;background:var(--j14-quiet-bg);
  font:400 11px/13px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:.04em;text-transform:uppercase;text-align:center;color:var(--j14-t2);text-shadow:none}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap>.job>.when::first-line{font:700 17px/20px var(--j12-sf,-apple-system,system-ui,sans-serif);letter-spacing:0;color:var(--j14-date-tx)}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap>.job>.bd{gap:1px}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap>.job .bd>.nm{display:block;font:600 17px/22px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;letter-spacing:-.01em;color:var(--j14-t1)}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap>.job .bd>.nm>.j10-av{display:none!important}   /* look10 coined the words "Job done · $1,800" as "J8": not a person */
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap>.job .bd>:is(.ad,.sv){font:400 13px/18px var(--j12-sf,-apple-system,system-ui,sans-serif)!important;letter-spacing:0!important;text-transform:none!important;color:var(--j14-t3)}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap>.job .bd .cpf-bal{font-weight:600}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap>.job>.go{color:var(--j14-chev)}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap>.job>.go>svg{width:14px;height:14px;stroke-width:2.6}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap>.jacts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0 16px 12px 72px}
html:not(.nolook14) body #main#main .jobs.cpf-jobs>.jobwrap>.jacts .b{margin:0;border-radius:12px!important}
html:not(.nolook14) body #main#main .cpf-more{margin-top:10px;border-radius:14px!important}