/* =====================================================================
   UNLOOK dashboard: Customers (CRM stage 1), additions to app.css
   ---------------------------------------------------------------------
   Loaded after app.css. It holds only what the Customers list and the
   customer page need that app.css does not have. Every colour, type
   size, radius, gap and shadow below is one of its tokens: nothing new
   is introduced. Each block says why no existing component fitted.

   The list follows the mock-ups the owner approved on 7 October 2026.
   The customer page follows his redesign of the same day: a profile at
   the top, tabs that carry counts, and titled cards, each with its own
   clear action. Both are held to the standard he set (the better-ui
   skill and its siblings):
     LEGIBLE   what a person reads takes the first or second ink, never
               the third; nothing is under 12px; a name, a job's title
               and a note wrap instead of being cut.
     TOUCH     on a phone everything a thumb has to hit is 44px; hover
               styles only where there is a pointer that hovers.
     MOTION    named properties only, 150ms on colour, a press scales to
               0.96, and nothing moves when reduced motion is asked for.
     SHAPE     outer radius = inner radius + the padding between them.
   ===================================================================== */

/* ---------- 0. Colour ----------
   The colour roles these screens use (--*-bg-strong, --you-solid) and the chips' colours are the whole dashboard's
   now: they live in colour.css, which says what each colour means. */

/* ---------- 1. Customers toolbar ----------
   The Leads toolbar (tabs, search) with two buttons after the search. On phones the tabs take the first line
   and the search shares the second with the buttons; "Filter" and "Add customer" show only their icons there
   (they keep their names for screen readers). */
.cust-bar .search{min-width:280px}
.cust-bar .btn{position:relative}
.cust-bar .btn .tab-n{margin-inline-start:2px;background:var(--select);color:var(--ink)} /* how many filters are on: a count, not something waiting, so not peach */
@media (max-width:1100px){.cust-bar .search{min-width:200px;flex:1 1 200px}}
@media (max-width:720px){
  .cust-bar{gap:8px}
  .cust-bar .t-tabs{flex:1 1 100%}
  .cust-bar .t-tabs .t-tab{flex:1 1 auto;justify-content:center;min-width:var(--h-touch);height:var(--h-touch);padding:0 8px}
  .cust-bar .t-tabs-pill{height:var(--h-touch)}
  .cust-bar .search{flex:1 1 0;width:auto;min-width:0;height:var(--h-touch)}
  .cust-bar>.btn{height:var(--h-touch);width:var(--h-touch);padding:0;flex:none}
  .cust-bar>.btn .l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cust-bar>.btn .tab-n{position:absolute;top:-4px;inset-inline-end:-4px;margin:0}
}
/* the filters that are on, each a chip that takes itself off */
.cu-on{display:flex;flex-wrap:wrap;gap:6px;margin:-8px 0 12px}
.cu-on[hidden]{display:none}
.cu-chip{border:0;cursor:pointer;font:inherit;font-size:var(--fs-meta);font-weight:500;touch-action:manipulation;transition-property:scale,background-color;transition-duration:var(--duration-quick);transition-timing-function:var(--ease-out)}
.cu-chip:active{scale:.96}
.cu-chip svg.i{opacity:.7}
@media (hover:hover){.cu-chip:hover{background:var(--press)}}
@media (pointer:coarse){.cu-chip{height:var(--h-touch);padding:0 12px}}

/* ---------- 2. Customers table ----------
   The Leads table (.tbl) with two quick buttons per row. Why the phone rules: .tbl stacks a lead into three
   lines (name, what they asked, chips); the plan asks for two (name and status; what they asked and when). */
.tbl.cust .qa{display:inline-grid;grid-template-columns:repeat(2,var(--h-ctl));gap:2px;vertical-align:middle}
.tbl.cust .qa .icon-btn{color:var(--ink-2)}
.tbl.cust td.st{min-width:112px}
.tbl.cust td.st :is(.chip,.sdot){vertical-align:middle}
.tbl.cust td.t{font-variant-numeric:tabular-nums}
.tbl.cust td.act{width:1%}
.tbl.cust tr.row{touch-action:manipulation}
@media (max-width:760px){
  .tbl.cust tr.row{align-items:center;gap:4px 12px;min-height:64px}
  .tbl.cust td.c2td{grid-column:1;grid-row:1;min-width:0}
  .tbl.cust td.st{grid-column:2;grid-row:1;margin-top:0;justify-self:end;min-width:0;display:flex;align-items:center;gap:4px}
  .tbl.cust td.st .chip+.chip{margin-inline-start:0}
  .tbl.cust td.asked{grid-column:1;grid-row:2;min-width:0;font-size:var(--fs-body);color:var(--ink)}
  .tbl.cust td.t{grid-column:2;grid-row:2}
  .tbl.cust .c2 small{display:none}
  .tbl.cust .c2 b{overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-lg)}
}
.tfoot .btn{margin:-4px 0}

/* ---------- 3. Empty state with two buttons ---------- */
.empty .acts{justify-content:center;margin-top:2px}
.empty .acts .btn{margin-top:8px}

/* ---------- 4. The way back, in the page's title: Customers › Maria Alvarez ----------
   The dashboard's header shows one title per screen. On a customer's page it carries the path, so the same place
   that says where you are also takes you back. */
.head h1:has(.cu-crumb){display:flex;align-items:center;gap:6px;min-width:0}
.cu-crumb{display:inline-flex;align-items:center;min-height:var(--h-ctl);color:var(--ink-2);font-weight:500;text-decoration:none;white-space:nowrap;transition:color var(--duration-quick) var(--ease-out)}
.cu-crumb-s{display:inline-flex;color:var(--ink-3)}
.cu-crumb-s svg.i{width:14px;height:14px}
.cu-crumb-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.cu-crumb:hover{color:var(--ink)}}
.cu-crumb-b{display:none}
.cu-crumb-b svg.i{width:16px;height:16px}
/* on a phone the header has no room for the name (it is the first thing on the page below): the title is the way back */
@media (max-width:720px){.cu-crumb{min-height:var(--h-touch);gap:2px;color:var(--ink);font-weight:600}.cu-crumb-b{display:inline-flex;margin-inline-start:-4px}.cu-crumb-s,.cu-crumb-n{display:none}}

/* ---------- 5. Who they are, and how to reach them ----------
   Why new: nothing in app.css introduces a person. The initials sit where a photo would (there are none); the
   name is the page's largest text; the buttons are the four ways to reach them, Call first and filled. */
.cu-prof{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:4px 0 8px}
.cu-av{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--raise);color:var(--ink);font-size:var(--fs-title);font-weight:600;letter-spacing:.02em;box-shadow:0 0 0 1px var(--line-2)}
.cu-av svg.i{width:24px;height:24px}
.cu-av.sk{box-shadow:none}
/* someone asking is lavender, a customer is mint: the same two colours their chip and their jobs use */
.cu-av.info{background:var(--info-bg-strong);color:var(--info-ink);box-shadow:none}
.cu-av.ok{background:var(--ok-bg-strong);color:var(--ok-ink);box-shadow:none}
.cu-who{min-width:0}
.cu-who h2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-width:0;font-size:var(--fs-figure);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.cu-who h2>:first-child{min-width:0;overflow-wrap:anywhere} /* a person's name is never cut short on their own page */
.cu-who h2 .none{color:var(--ink-2);font-weight:500}
.cu-who h2 :is(.chip,.sdot){flex:none;letter-spacing:0}
.cu-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:var(--fs-body);color:var(--ink-2)}
.cu-meta span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.cu-meta bdi{min-width:0;overflow-wrap:anywhere}
.cu-meta svg.i{flex:none;width:15px;height:15px;color:var(--ink-3)}
.cu-prof .acts{flex-wrap:nowrap;margin:0}
.cu-prof .acts .btn{height:40px;padding:0 16px;font-size:var(--fs-body);touch-action:manipulation}
@media (max-width:900px){
  .cu-prof{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .cu-prof .acts{grid-column:1/-1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .cu-prof .acts .btn{height:var(--h-ctl);padding:0 4px} /* 32 to see (Solid Glass), 44 to press by the button's invisible edge (app.css) */
}
@media (max-width:720px){.cu-prof{align-items:start;padding-top:0}.cu-av{width:48px;height:48px;margin-top:2px;font-size:var(--fs-lg)}.cu-meta{margin-top:4px;gap:2px 14px}}
.cu-flag{margin:4px 0 8px;border-color:transparent;background:var(--you-bg);color:var(--you-ink)}
.cu-flag svg.i{color:var(--you-ink)}
.cu-flag b{font-weight:500}

/* ---------- 6. Tabs that say how much there is of each thing ----------
   Why not .t-tabs: that is a small switch inside a toolbar. These divide the whole page, so they sit on a rule
   under the profile and each carries its count. On a phone they are one line that scrolls sideways. */
.cu-tabs{display:flex;gap:4px;margin:8px 0 16px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.cu-tabs::-webkit-scrollbar{display:none}
.cu-tab{flex:none;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 12px;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:var(--fs-body);white-space:nowrap;cursor:pointer;touch-action:manipulation;
  transition-property:color,box-shadow;transition-duration:var(--duration-quick);transition-timing-function:var(--ease-out)}
.cu-tab[aria-selected="true"]{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--accent-line)}
.cu-tab:focus-visible{outline-offset:-2px}
.cu-tab-n{padding:1px 7px;border-radius:var(--r-pill);background:var(--select);color:var(--ink);font-size:var(--fs-meta);font-weight:500;font-variant-numeric:tabular-nums}
@media (hover:hover){.cu-tab:hover{color:var(--ink)}}
/* A narrow screen shows one thing at a time, so the page is four sections (crm.js): the tabs for a wide screen's
   kinds give way to Timeline and Details, all four fit on one line, and the line stays at the top while the page
   scrolls, so the next section is always one press away and nothing is a long scroll from anything else. */
.cu-tab.cu-narrow{display:none}
@media (max-width:1000px){
  .cu-tab.cu-wide{display:none}
  .cu-tab.cu-narrow{display:inline-flex}
  .cu-tabs{position:sticky;top:0;z-index:5;gap:0;margin-bottom:12px;background:var(--panel);overflow:visible}
  .cu-tab{flex:1 1 auto;justify-content:center;padding:0 8px}
}
@media (max-width:720px){.cu-tabs{margin-inline:-16px;padding-inline:16px}}
@media (max-width:360px){.cu-tab{gap:4px;padding:0 2px;font-size:var(--fs-sm)}}

/* ---------- 5b. The list style (13 October 2026) ----------
   Every list of records in the dashboard is drawn the same way (the owner's reference: "technically and cleanly
   organized, with proper space, easy to understand"): a heading over each column, one thing in each column, rows of
   one height with a hairline between them, one status pill, and one labelled action in the same place on every
   row. Customers, Bookings, a customer's Jobs and Money's two breakdowns use it. It builds on .tbl (app.css).
   On a phone a table of seven columns cannot be read, so each list keeps its two-line rows there. */
.tbl.lt thead th{height:40px;font-size:var(--fs-meta);font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
.tbl.lt td{height:56px;padding-block:8px}
.tbl.lt th.num,.tbl.lt td.num{text-align:end}
.tbl.lt th.act{text-align:end}
.tbl.lt td.act{width:1%;white-space:nowrap}
.tbl.lt td.ct{white-space:nowrap;font-size:var(--fs-sm);color:var(--ink-2)}
.tbl.lt td.nd{white-space:nowrap}
.tbl.lt td.nd .chip+.chip{margin-inline-start:4px}
.tbl.lt td.t{color:var(--ink-2)}
.lt-who{display:flex;align-items:center;gap:12px;min-width:0}
.lt-who>b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-av{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--raise);color:var(--ink);font-size:var(--fs-meta);font-weight:600;letter-spacing:.02em}
.lt-av svg.i{width:15px;height:15px;color:var(--ink-2)}
.lt-av.info{background:var(--info-bg-strong);color:var(--info-ink)}
.lt-av.ok{background:var(--ok-bg-strong);color:var(--ok-ink)}
/* the action is the same width on every row, so the column is a straight edge */
.lt-act{min-width:84px;justify-content:center}
/* ---------- headings that sort, and a row's "..." (13 October 2026, from the owner's reference) ----------
   A heading that sorts is a button with two small arrows; the one in use is full ink. The row's own button keeps its
   place and "..." sits beside it for the rest (Text, Book, Mark contacted, their page). */
.lt-sort{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:24px;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;border-radius:var(--r-chip)}
.lt-sort-i{width:8px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lt-sort-i path{opacity:.4}
th[aria-sort="ascending"] .lt-sort,th[aria-sort="descending"] .lt-sort{color:var(--ink)}
th[aria-sort="ascending"] .lt-sort-i .up,th[aria-sort="descending"] .lt-sort-i .dn{opacity:1}
@media (hover:hover){.lt-sort:hover{color:var(--ink)}}
.lt-acts{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.lt-more svg.i{fill:currentColor;stroke:none}
.cu-rowmenu{position:fixed;left:0;right:auto;top:0;bottom:auto;z-index:70;min-width:184px;width:max-content;max-width:calc(100vw - 16px)}
.cu-rowmenu svg.i{color:var(--ink-3)}
/* ---------- the list with a summary beside it (the reference's panel beside its table) ----------
   One row of the list is open at the right and the list stays. The summary carries the ways to reach them, so the
   list gives its action column to the words. It follows the page down (sticky) and scrolls by itself if it is long. */
.cu-split{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.cu-split.on{grid-template-columns:minmax(0,1fr) 360px}
.cu-split.on .tbl.cust th.act,.cu-split.on .tbl.cust td.act{display:none}
.cu-peek{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain}
.cu-peek-h{display:flex;align-items:center;gap:12px;padding:16px 12px 12px 20px}
.cu-peek-h .lt-av{width:40px;height:40px}
.cu-peek-who{flex:1 1 auto;min-width:0}
.cu-peek-who h2{margin:0;font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere;text-wrap:balance}
.cu-peek-who p{margin:2px 0 0;font-size:var(--fs-sm);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cu-peek-acts{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 16px}
.cu-peek-acts .btn{flex:1 1 auto}
.cu-peek-b{display:grid;gap:16px;padding:16px 20px;border-top:1px solid var(--line)}
.cu-peek-b section{display:grid;gap:6px;min-width:0}
.cu-peek-b h3{margin:0;font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.cu-peek-b p{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.cu-peek-wait{display:flex;align-items:center;gap:8px;color:var(--ink)!important}
.cu-peek-wait :is(.chip,.sdot){flex:none}
.cu-peek-job{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cu-peek-job b{font-size:var(--fs-body);font-weight:500;overflow-wrap:anywhere}
.cu-peek-job :is(.chip,.sdot){flex:none}
.cu-peek-tl{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.cu-peek-tl li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:start;gap:10px;font-size:var(--fs-sm)}
.cu-peek-tl svg.i{width:14px;height:14px;margin-top:2px;color:var(--ink-3)}
.cu-peek-tl span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cu-peek-tl time{color:var(--ink-2);white-space:nowrap}
.cu-peek-f{padding:12px 20px 16px;border-top:1px solid var(--line)}
.cu-peek .btn-block{display:flex;width:100%}
.lt-link{appearance:none;border:0;padding:0;background:none;color:inherit;font:inherit;font-weight:500;text-align:start;cursor:pointer;border-radius:var(--r-chip)}
@media (hover:hover){.lt-link:hover{text-decoration:underline;text-underline-offset:3px}}
.tbl.lt tr[aria-current="true"] td{background:var(--select)}
/* fixed columns, so every row lines up whatever is in it; a name or an email too long for its column is cut with dots.
   What gives way is decided by the room the table really has (the side menu open or shut changes it by 190px), not by
   the width of the window. Measured on the sample at 760 to 1680 wide: the free-text column keeps 160px or more. */
.lt-wrap{container:lt/inline-size}
@media (min-width:761px){ /* 760 and under, app.css stacks every table's rows */
  .tbl.cust,.tbl.bk{table-layout:fixed}
  .tbl.cust td,.tbl.bk td{overflow:hidden;text-overflow:ellipsis}
  .tbl.cust th:first-child{width:200px}
  .tbl.cust th.ct{width:140px}
  .tbl.cust th:nth-child(4){width:136px} /* the widest status, "No outcome", is 104px with its padding to spare */
  .tbl.cust th.nd{width:160px} /* the widest "Needs you" word, "Check the answer", is 129px (measured, 14 Oct) */
  .tbl.cust th:nth-child(6){width:92px}
  .tbl.cust th.act{width:150px}
  .tbl.bk th.act{width:112px}
  .tbl.cust .asked,.tbl.bk .asked{width:auto;max-width:none}
  .tbl.cust .c2{min-width:0}
  .tbl.cust .c2 b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tbl.bk th:nth-child(1){width:116px}
  .tbl.bk th:nth-child(2){width:88px}
  .tbl.bk th:nth-child(3){width:210px}
  .tbl.bk th:nth-child(5){width:124px}
  /* Customers: seven columns when there is room. Then the contact folds under the name, then the date goes, then the
     button (the row itself opens the customer). Status and "Needs you" always stay. */
  @container lt (min-width:1104px){.tbl.cust .c2 small{display:none}}
  @container lt (min-width:1280px){.tbl.cust th:first-child{width:240px}.tbl.cust th.ct{width:180px}}
  @container lt (max-width:1103.98px){.tbl.cust th.ct,.tbl.cust td.ct{display:none}}
  @container lt (max-width:963.98px){.tbl.cust th:first-child{width:176px}}
  @container lt (max-width:903.98px){.tbl.cust th:nth-child(6),.tbl.cust td.t{display:none}}
  @container lt (max-width:783.98px){.tbl.cust th.act,.tbl.cust td.act{display:none}}
  /* Bookings: the customer's column grows with the room; with little of it the initials go (the row opens the booking; the one button, Confirm, stays) */
  @container lt (min-width:1100px){.tbl.bk th:nth-child(3){width:28%}}
  @container lt (max-width:859.98px){.tbl.bk th:nth-child(3){width:160px}.tbl.bk .lt-av{display:none}}
  @container lt (max-width:699.98px){.tbl.bk th:nth-child(3){width:140px}}
}
@media (max-width:760px){
  .tbl.lt td{height:auto;padding-block:0}
  .lt-av{display:none}
  .tbl.cust td.ct{display:none}
  .tbl.cust td.nd{grid-column:1/-1;grid-row:3;display:flex;flex-wrap:wrap;gap:4px}
  .tbl.cust td.nd:empty{display:none}
  .tbl.cust td.nd .chip+.chip{margin-inline-start:0}
}

/* ---------- 6b. The row of figures (the owner's redesign) ----------
   Five cards under the tabs: what was paid, how many jobs, and where the rest stand. Each is a button that opens
   the jobs. The tile takes the status colour when there is something in it, and none when it is empty. Overview
   only. Between a phone and a wide screen the row breaks in two: Paid and Total, then the three stages. */
.cu-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}
.cu-page:not([data-view="overview"]) .cu-stats{display:none}
.cu-stat{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 16px;color:inherit;font:inherit;text-align:start;cursor:pointer;touch-action:manipulation;transition-property:scale,background-color;transition-duration:var(--duration-quick);transition-timing-function:var(--ease-out)}
.cu-stat:active{scale:.96}
.cu-stat .cu-ev-ic{width:36px;height:36px}
.cu-stat-t{display:flex;flex-direction:column;min-width:0}
.cu-stat-t small{font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cu-stat-t b{font-size:var(--fs-figure);font-weight:600;letter-spacing:-.02em;line-height:1.25}
@media (hover:hover){.cu-stat:hover{background:var(--raise)}}
@media (max-width:1100px){.cu-stats{grid-template-columns:repeat(6,minmax(0,1fr))}.cu-stat{grid-column:span 2}.cu-stat:nth-child(-n+2){grid-column:span 3}}
/* a phone: one line of five small figures, so the job and its status buttons stay on the first screen */
@media (max-width:720px){
  .cu-stats{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:12px}
  .cu-stat,.cu-stat:nth-child(-n+2){grid-column:auto;justify-content:center;min-height:56px;padding:8px 2px;border-radius:var(--r-ctl)}
  .cu-stat .cu-ev-ic,.cu-stat-t small:last-child,.cu-stat-x{display:none}
  .cu-stat-t{align-items:center}
  .cu-stat-t small{font-size:var(--fs-meta)}
  .cu-stat-t b{font-size:var(--fs-title)}
}

/* ---------- 7. The page's cards ----------
   The dashboard's .card, with a title row a size up from its usual one (16, not 14): on this page the titles are
   how a person finds their way, so they are meant to be read first. Timeline on the left, the job and the
   contact details on the right; on a narrow screen the job comes first, then the timeline. */
.cu-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.cu-main{grid-column:1}
.cu-side{grid-column:2;display:flex;flex-direction:column;gap:16px;min-width:0}
/* stage 4: the catch-up sits on top of the timeline it sums up, and the side column runs beside both */
.cu-catch{grid-column:1}
.cu-grid:has(>.cu-catch) .cu-side{grid-row:1 / span 2}
@media (max-width:1000px){
  /* one column. The side column dissolves, so its cards take their place among the others: what to do next, the
     job, the latest lines, other jobs, reminders */
  .cu-grid{display:flex;flex-direction:column;align-items:stretch}
  .cu-side{display:contents}
  .cu-next{order:1}.cu-job{order:2}.cu-catch{order:3}.cu-main{order:3}.cu-other{order:4}.cu-rem{order:5}.cu-contact{order:6}.cu-data{order:7}
  /* each section holds its own things: Overview what is next, the job, the latest lines, other jobs and reminders;
     Timeline and Jobs their list; Details the ways to reach them and what can be done with their data */
  .cu-page[data-view="overview"] :is(.cu-contact,.cu-data),
  .cu-page:is([data-view="timeline"],[data-view="jobs"]) :is(.cu-next,.cu-job,.cu-catch,.cu-other,.cu-rem,.cu-contact,.cu-data),
  .cu-page[data-view="details"] :is(.cu-next,.cu-job,.cu-catch,.cu-main,.cu-other,.cu-rem){display:none}
}
.cu-card-h{display:flex;align-items:center;gap:8px;min-height:56px;padding:0 20px}
.cu-card-h h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.cu-card-h .btn,.cu-card-h .more{margin-inline-start:auto;flex:none}
.cu-card-h .more{border:0;background:none;font:inherit;font-size:var(--fs-sm);cursor:pointer}
.cu-card-b{padding:0 20px 20px}
.cu-none{padding:4px 20px 20px;font-size:var(--fs-body)}
.cu-card-b .cu-none{padding:0}
@media (max-width:720px){.cu-card-h{padding:0 16px}.cu-card-b{padding:0 16px 16px}.cu-none{padding-inline:16px}.cu-card-h .btn{height:var(--h-ctl)}
  .cu-card-h .btn::after{inset:calc(50% - 22px) 0 calc(50% - 18px)}} /* a header's button (New job) reaches 2 down, not 6: it meets the job's rename pencil under it instead of covering it */

/* ---------- 8. Current job ----------
   Its name and where it stands, the facts about it, then the buttons that move it. Why buttons and not the
   segmented control: a tab is chosen as soon as an arrow key lands on it, and a job's status must only change
   when it is pressed. The one it is on is tinted and ticked; the others are plain buttons. */
.cu-job-t{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px}
.cu-job-t strong{flex:1 1 auto;min-width:0;font-size:var(--fs-lg);font-weight:600;line-height:1.4;overflow-wrap:anywhere;text-wrap:balance}
.cu-job-t strong.none{color:var(--ink-2);font-weight:500}
.cu-job-t :is(.chip,.sdot){flex:none;margin-top:1px}
.cu-job-t .icon-btn{flex:none;width:28px;height:28px;margin:-3px -6px 0 0}
.cu-job-t .icon-btn svg.i{width:14px;height:14px}
.cu-lines{display:grid;gap:8px;margin:0 0 16px}
.cu-lines>div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:8px;align-items:baseline;font-size:var(--fs-body)}
.cu-lines dt{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.cu-lines dt svg.i{flex:none;width:15px;height:15px;color:var(--ink-3)}
.cu-lines dd{min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.cu-lines .link{font:inherit;cursor:pointer}
.cu-lbl{display:block;margin-bottom:8px;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2)}
.cu-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cu-step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;height:36px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--btn);color:var(--ink);box-shadow:var(--edge-btn);font:inherit;font-size:var(--fs-sm);font-weight:500;white-space:nowrap;cursor:pointer;touch-action:manipulation;
  transition-property:scale,background-color,border-color;transition-duration:var(--duration-quick);transition-timing-function:var(--ease-out)}
.cu-step:active{scale:.96}
.cu-step[aria-pressed="true"]{background:var(--select);border-color:var(--line-strong);box-shadow:none}
/* the step a job is on takes its status colour (state, not emphasis: it is not the button to press) */
.cu-step[aria-pressed="true"][data-tone="you"]{background:var(--you-bg-strong);border-color:transparent;color:var(--you-ink)}
.cu-step[aria-pressed="true"][data-tone="info"]{background:var(--info-bg-strong);border-color:transparent;color:var(--info-ink)}
.cu-step[aria-pressed="true"][data-tone="ok"]{background:var(--ok-bg-strong);border-color:transparent;color:var(--ok-ink)}
/* the tick beside a medium-weight label: a 2 stroke, sized with the text */
.cu-step svg.i{flex:none;width:14px;height:14px;stroke-width:2}
.cu-step.busy{opacity:.6;pointer-events:none}
@media (hover:hover){.cu-step:not([aria-pressed="true"]):hover{background:var(--btn-hover);border-color:var(--line-strong)}}
.cu-book{margin-top:12px;height:40px;font-size:var(--fs-body)}
@media (max-width:720px){
  .cu-step{position:relative;height:var(--h-ctl);font-size:var(--fs-body)}
  .cu-step::after{content:"";position:absolute;inset:calc(50% - 22px) 0} /* 32 to see, 44 to press */
  .cu-book{height:var(--h-ctl);margin-top:8px}
  .cu-book::after{inset:calc(50% - 20px) 0} /* 8 under the steps: 40 to press, edges touch */
  .cu-job-t .icon-btn{width:var(--h-touch);height:var(--h-touch);margin:-10px -12px 0 0}
}

/* ---------- 8b. Next action, and reminders (stage 2) ----------
   Why new: nothing in app.css is a thing to tick off. A reminder is a box to press, what it says, when, and a
   pencil. The box is a full-size target with a small square drawn in it; done, the square fills with mint. */
.cu-card-h>:is(.chip,.sdot){margin-inline-start:auto;flex:none}
.cu-card-h>.cu-tab-n{flex:none}
.cu-fus{list-style:none;margin:0;padding:0}
.cu-rem .cu-fus,.cu-fus-all{padding:0 20px 12px}
.cu-fu{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;min-height:48px}
.cu-fus>.cu-fu+.cu-fu{border-top:1px solid var(--line)}
.cu-fu-t{min-width:0;padding-block:6px}
.cu-fu-t b{display:block;font-size:var(--fs-body);font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.cu-fu-t small{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--ink-2)}
.cu-fu.done .cu-fu-t b{font-weight:400;color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.cu-check{position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;margin-inline-start:-6px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ok-ink);cursor:pointer;touch-action:manipulation;transition:scale var(--duration-quick) var(--ease-out)}
.cu-check::before{content:"";grid-area:1/1;width:20px;height:20px;border:1.5px solid var(--line-strong);border-radius:var(--r-chip);transition-property:background-color,border-color;transition-duration:var(--duration-quick);transition-timing-function:var(--ease-out)}
.cu-check svg.i{grid-area:1/1;width:13px;height:13px;stroke-width:2.5}
.cu-check[aria-pressed="true"]::before{background:var(--ok-bg-strong);border-color:transparent}
.cu-check:active{scale:.96}
@media (hover:hover){.cu-check:hover::before{border-color:var(--ink-2)}}
.cu-fu .icon-btn svg.i{width:15px;height:15px}
.cu-next .cu-none{padding:0}
.cu-next-a{display:flex;align-items:center;gap:8px;margin-top:12px}
.cu-next-a .btn-ghost{margin-inline-start:auto}
.cu-next .cu-fu{min-height:44px}
@media (max-width:720px){
  .cu-rem .cu-fus,.cu-fus-all{padding-inline:16px}
  .cu-check{width:var(--h-touch);height:var(--h-touch);margin-inline-start:-12px}
  .cu-fu{gap:6px}
  .cu-fu .icon-btn{width:var(--h-touch);height:var(--h-touch);margin-inline-end:-10px}
  .cu-next-a .btn{height:var(--h-ctl);padding:0 12px;font-size:var(--fs-body)} /* 32 to see (Solid Glass), 44 to press by the button's invisible edge (app.css) */
  .cu-next-a{margin-top:12px}
  .cu-next-a .btn::after{inset:calc(50% - 20px) 0} /* a wrapped row sits 8 under (Solid Glass): 40 to press, edges touch */
}

/* ---------- 9. A job as a row (Other jobs, and the Jobs tab) ----------
   A card is 14 round and its rows sit 8 inside it, so a row is 6 round (outer = inner + padding). */
.cu-jobs{list-style:none;margin:0;padding:0 8px 8px}
.cu-jrow{display:grid;grid-template-columns:32px minmax(0,1fr) auto 14px;gap:12px;align-items:center;width:100%;min-height:56px;padding:8px 12px;border:0;border-radius:var(--r-chip);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;touch-action:manipulation;transition:background-color var(--duration-quick) var(--ease-out)}
.cu-jrow[aria-current="true"]{background:var(--select)}
.cu-jrow:active{background:var(--press)}
.cu-jrow-t{min-width:0}
.cu-jrow b{display:block;font-size:var(--fs-body);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cu-jrow small{display:block;margin-top:2px;font-size:var(--fs-sm)}
.cu-jrow>svg.i{width:14px;height:14px;color:var(--ink-3)}
.cu-jrow :is(.chip,.sdot){flex:none}
@media (hover:hover){.cu-jrow:hover{background:var(--hover)}}

/* ---------- 10. Timeline ----------
   Why new: .up-r (a person's history in the old lead panel) puts the time in the second line and has one kind
   of row. Here the time has its own column, the tile says what kind of thing it is, and a button appears only
   where there is something to open. The note box is the existing .as-comp. */
.cu-main .note-box{margin:0 20px 8px}
.tl-list{padding:0 8px 12px}
.tl-list .sk-row{padding-inline:12px}
/* a day is a new section (the owner's note, 7 October 2026): a size up from the lines under it, with a rule and
   room above it, so the eye finds where one day ends and the next begins */
.cu-day{margin:12px -8px 0;padding:20px 20px 6px;border-top:1px solid var(--line);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.tl-list>.cu-day:first-child{margin-top:0;padding-top:10px;border-top:0}
.cu-evs{list-style:none;margin:0;padding:0}
.cu-ev{position:relative;display:grid;grid-template-columns:64px 32px minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:56px;padding:8px 12px}
/* the line that joins one day's tiles */
.cu-ev::before{content:"";position:absolute;top:0;bottom:0;inset-inline-start:103.5px;width:1px;background:var(--line)}
.cu-evs>.cu-ev:first-child::before{top:28px}
.cu-evs>.cu-ev:last-child::before{bottom:auto;height:28px}
.cu-evs>.cu-ev:only-child::before{display:none}
.cu-ev-t{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap}
.cu-ev-ic{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-ctl);background:var(--raise);color:var(--ink-2)}
.cu-ev-ic svg.i{width:16px;height:16px}
/* the tile says what kind of thing a line is, in the same colours as everything else on the page */
.cu-ev-ic.info{background:var(--info-bg-strong);color:var(--info-ink)}
.cu-ev-ic.ok{background:var(--ok-bg-strong);color:var(--ok-ink)}
.cu-ev-ic.you{background:var(--you-solid);color:var(--on-you-solid)}
.cu-ev-c{min-width:0}
.cu-ev-c b{display:block;font-size:var(--fs-body);font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.cu-ev-c b.q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* what they first said, two lines at most: all of it is one press away, in the transcript */
.cu-ev-c b.q::before{content:"\201C"}
.cu-ev-c b.q::after{content:"\201D"}
.cu-ev-c b.cu-note-t{font-weight:400;line-height:1.5;white-space:pre-wrap;text-wrap:pretty}
.cu-ev-c small{display:block;margin-top:2px;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.cu-ev-a{display:flex;align-items:center;gap:4px}
.cu-ev-a .icon-btn svg.i{width:15px;height:15px}
.tl-open{grid-column:3/-1;display:flex;flex-direction:column;gap:10px;padding-block:10px 12px}
.tl-open .more{align-self:flex-start;margin-inline-start:0}
.tl-open .msg{max-width:86%}
.tl-open .empty{padding:16px 0}
.cu-earlier{margin:8px 12px 4px}
/* a narrow screen: the kinds of thing in the timeline, as a row of choices in the card; and the way from the
   latest lines to all of them */
.cu-kinds{display:flex;gap:2px;margin:16px 20px 12px;padding:3px;border-radius:var(--r-ctl);background:var(--tabs-bar-bg)}
.cu-kind{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:40px;padding:0 4px;border:0;border-radius:calc(var(--r-ctl) - 3px);background:transparent;color:var(--ink-2);font:inherit;font-size:var(--fs-sm);font-weight:500;white-space:nowrap;cursor:pointer;touch-action:manipulation;
  transition-property:background-color,color;transition-duration:var(--duration-quick);transition-timing-function:var(--ease-out)}
.cu-kind[aria-pressed="true"]{background:var(--tabs-pill-bg);color:var(--ink);box-shadow:var(--edge-btn)}
.cu-whole{display:flex;width:calc(100% - 24px);margin:8px 12px 4px;height:var(--h-touch);font-size:var(--fs-body)}
.cu-whole .cu-tab-n{margin-inline-start:2px}
@media (max-width:720px){
  .cu-main .note-box{margin-inline:16px}
  .cu-kinds{margin-inline:16px}
  /* a phone: the time is its own line above; below it the tile, the words and the button share one centre line (the tile is 28px, the first line of words 20px, the button 32px), the button on the trailing edge with a 44px press area */
  .cu-ev{grid-template-columns:28px minmax(0,1fr) auto;column-gap:12px;row-gap:8px;align-items:start;padding:14px 8px}
  .cu-ev::before{display:none}
  .cu-evs>.cu-ev+.cu-ev{border-top:1px solid var(--line)}
  .cu-ev-t{grid-column:1/-1;padding-top:0;font-size:var(--fs-sm);line-height:16px;color:var(--ink-3)}
  .cu-ev-ic{width:28px;height:28px}
  .cu-ev-c{padding-top:4px}
  .cu-ev-c b{line-height:20px}
  .cu-ev-c b.q{-webkit-line-clamp:1;line-clamp:1} /* one line, so the tile, the words and the button stand on one line; what they said in full is one press away */
  .cu-ev-a{grid-column:3;justify-self:end;align-self:start;margin-top:-2px}
  .cu-ev-a .btn{position:relative;height:var(--h-ctl);padding:0 14px;font-size:var(--fs-sm)}
  .cu-ev-a .btn::after{content:"";position:absolute;inset:-6px -4px}
  .cu-ev-a .icon-btn{width:var(--h-ctl);height:var(--h-ctl)}
  .cu-ev-a .icon-btn+.icon-btn{margin-inline-start:0}
  .tl-open{grid-column:1/-1;padding-inline:8px}
  .cu-day{padding-inline:16px}
  .cu-earlier{height:var(--h-touch)}
  .note-box .btn{height:var(--h-ctl)}
}

/* ---------- 11. Contact details, and what can be done with their data ----------
   A tile, the thing itself, and (for a phone number) the two ways to use it. Tags are .chip as it is. */
.cu-crow{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:48px}
.cu-crow-v{min-width:0;overflow-wrap:anywhere;font-size:var(--fs-body)}
.cu-crow-v .kv-add{margin-inline-start:0;font-size:var(--fs-body)}
.cu-crow-a{display:flex;gap:6px}
.cu-crow-a .icon-btn{width:36px;height:36px;touch-action:manipulation}
.cu-tags{display:flex;flex-wrap:wrap;gap:6px;padding-block:8px}
.cu-tag button{display:inline-grid;place-items:center;width:16px;height:16px;margin-inline-end:-4px;border:0;border-radius:4px;background:transparent;color:inherit;opacity:.7;cursor:pointer;touch-action:manipulation}
.cu-tag button svg.i{width:11px;height:11px;stroke-width:2}
/* a tag stays the size of a tag; on a touch screen the place to press around it is larger (never overlapping the next) */
.cu-tag button,.cu-tag-add{position:relative}
@media (pointer:coarse){.cu-tag button::after,.cu-tag-add::after{content:"";position:absolute;inset:-3px 0}}
.cu-page a.link{position:relative}
.cu-page a.link::after{content:"";position:absolute;inset:-6px 0} /* a number or an address on its own line: 19 high, 31 to the pointer */
.cu-tag-add{min-height:24px;border:1px dashed var(--line-strong);background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-meta);font-weight:500;cursor:pointer;touch-action:manipulation;transition-property:scale,border-color;transition-duration:var(--duration-quick);transition-timing-function:var(--ease-out)}
.cu-tag-add:active{scale:.96}
@media (hover:hover){.cu-tag button:hover{opacity:1;background:var(--press)}.cu-tag-add:hover{border-color:var(--ink-3)}}
@media (pointer:coarse){.cu-tag,.cu-tag-add{height:36px;padding-inline:10px}.cu-tag button{width:32px;height:36px;margin-inline-end:-10px}}
.cu-contact .check{margin-top:12px;padding-top:16px;border-top:1px solid var(--line);font-size:var(--fs-body);color:var(--ink);touch-action:manipulation}
.cu-data{display:grid;gap:8px}
.cu-data .btn{height:40px;font-size:var(--fs-body)}
/* Delete is outlined in red with a red mark; its words stay in the ordinary ink, which reads on any surface */
.cu-del{border-color:var(--err-line)}
.cu-del svg.i{color:var(--err-ink);opacity:1}
@media (hover:hover){.cu-del:hover{background:var(--err-bg);border-color:var(--err-line)}}
.cu-ideas{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cu-ideas .chip{border:0;cursor:pointer;font:inherit;font-size:var(--fs-meta);font-weight:500;touch-action:manipulation;transition-property:scale,background-color;transition-duration:var(--duration-quick);transition-timing-function:var(--ease-out)}
.cu-ideas .chip:active{scale:.96}
@media (hover:hover){.cu-ideas .chip:hover{background:var(--press)}}
@media (pointer:coarse){.cu-ideas .chip{height:var(--h-touch);padding:0 14px}}
@media (max-width:720px){
  .cu-crow{min-height:52px}
  .cu-crow-a .icon-btn{width:var(--h-touch);height:var(--h-touch)}
  .cu-crow-v .kv-add{display:inline-flex;align-items:center;min-height:var(--h-touch)}
  .cu-contact .check{min-height:var(--h-touch);align-items:center}
  .cu-contact .check input{margin:0}
  .cu-data .btn{height:var(--h-ctl)}
  .cu-data .btn::after{inset:calc(50% - 20px) 0} /* two buttons 8 apart: 40 to press, edges touch */ /* 32 to see (Solid Glass), 44 to press by the button's invisible edge (app.css) */
}

/* a dialog that is a choice between a few answers (why a job was lost): the answers as two even columns, Cancel under them */
.modal:has(.cu-pick) .acts{display:grid;grid-template-columns:1fr 1fr;margin-top:16px}
.modal:has(.cu-pick) .acts .btn{height:var(--h-touch);font-size:var(--fs-body)}
.modal:has(.cu-pick) .acts .btn-ghost{grid-column:1/-1}
.modal:has(.cu-pick) .acts .btn:nth-last-child(2):nth-child(odd){grid-column:1/-1}

/* ---------- 12. The sheet that adds a customer or edits their details ----------
   The drawer and .field as they are; a field's own error sits under it. */
#cu-form,#cu-filter-form{gap:16px}
#cu-form .cu-ferr{margin-top:2px}
#cu-form .cu-ferr .link{color:inherit}
.dr-f .btn-ghost.grow{margin-inline-end:auto;flex:none}
@media (max-width:720px){#drawer .dr-h .icon-btn{height:var(--h-touch);min-width:var(--h-touch)}#drawer .dr-f .btn{height:var(--h-ctl)}}

/* ---------- 13. Undo in the toast ----------
   A toast has no action of its own; it borrows the ghost button. A toast that carries an action stays until it
   is dismissed (crm.js), so its close button shows too. */
.toast .toast-undo{margin-block:-4px;margin-inline:4px -6px;color:inherit;opacity:.85;height:28px;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.toast .toast-undo:hover{opacity:1;background:color-mix(in srgb,currentColor 16%,transparent)}}
@media (max-width:720px){.toast .toast-undo,.toast .toast-x{height:var(--h-touch);min-width:var(--h-touch)}}

/* ---------- 14. The Inbox: a conversation's name opens its customer ---------- */
.cv-who{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;transition:text-decoration-color var(--duration-quick) var(--ease-out)}
@media (hover:hover){.cv-who:hover{text-decoration-color:var(--ink)}}

/* ---------- 15. Legibility ----------
   The owner's note on the approved mock-ups: small grey text on dark is hard to read. On these screens what a
   person reads takes the second ink (--ink-2). Measured as drawn: 8.8:1 on a card and 9.6:1 on the page in
   the dark theme (APCA Lc 64 on both), 9.0:1 and 8.3:1 in the light one (Lc 91 and 85). The third ink, which
   small text used before, is 5.0:1 and Lc 38 on a dark card: it is left for placeholders and for marks. Tabs that
   are not selected, a neutral status chip and a dialog's own words were under Lc 60 or 75 in the dark theme and
   take a stronger ink here (scripts/crm-screens.js measures every text on every screen). */
.tbl.cust .c2 small,.tbl.cust .t,.tbl.cust thead th,.cu-page .more,.cu-ev-t,.cu-ev-c small,.cu-jrow small,.cu-none,.cu-card-h .more,#cu-foot,.cu-page .stamp,.cu-page .msg .who{color:var(--ink-2)}
.cust-bar .t-tab:not([aria-selected="true"]){color:var(--ink-2)}
.tbl.cust .st .chip:not(.you):not(.ok):not(.err):not(.info):not(.book):not(.urgent),.cu-page .chip:not(.you):not(.ok):not(.err):not(.info):not(.book):not(.urgent):not(.cu-tag-add),.cu-on .chip,.cu-ideas .chip{color:var(--ink)}
#crm .empty p{color:var(--ink-2)}
#cu-form .cu-ferr{color:var(--ink)}
#cu-form .cu-ferr svg.i{color:var(--err-ink)}
.modal .cu-say p{color:var(--ink)}
.modal .cu-say p+p{margin-top:10px}
@media (max-width:720px){.tfoot .btn,.empty .btn,.cu-flag .btn{height:var(--h-ctl);min-width:var(--h-touch)}} /* 32 to see (Solid Glass), 44 to press by the button's invisible edge (app.css) */

/* ---------- 15b. Home as "today" (stage 2; the figures made bigger on 13 October 2026) ----------
   On a phone the four figures were one line of small boxes (12px words, an 18px number, nothing under it), so that
   "Needs you" started higher. The owner, looking at it: "these boxes are too small". They are two by two now, as
   on Money (app.css already lays the band out that way under 700px): the word, the number at its full size, and
   the line under it ("1 urgent", "321 all time"). The meter is left out: the line under the number says the
   percentage. The words take the second ink: on a phone the third does not read at these sizes. */
@container (max-width:700px){
  #band .fig{padding:12px 14px 14px}
  #band .fig-l,#band .fig-s{color:var(--ink-2)}
  #band .fig-n{margin-top:4px}
  #band .fig-s{font-size:var(--fs-meta)}
  #band .fig .meter{display:none}
}
a.fig:active{background:var(--raise)} /* a tile that opens a screen answers a press (under a mouse it already answered a hover) */
/* the month in one line, above "Needs you": it opens the Money page (stage 3) */
.crm-strip{margin:0;color:var(--ink);text-decoration:none;transition:border-color var(--duration-quick) var(--ease-out)}
.crm-strip p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.crm-strip b{font-weight:600}
.crm-strip span{color:var(--ink-2)}
.crm-strip .more{margin-inline-start:auto}
@media (hover:hover){.crm-strip:hover{border-color:var(--line-strong)}}

/* ---------- 15c. Money (stage 3) ----------
   The page is made of what the dashboard has: the toolbar and its tabs, the band of figures, a card, the meter.
   New here: a figure is a button (every number opens the jobs it is made of), and the rows under it. Labels
   and second lines take the second ink; an amount that was never entered says so in words, not as a zero. */
.cu-amt{position:relative}
.cu-amt-s{position:absolute;inset-inline-start:14px;top:50%;translate:0 -50%;font-size:var(--fs-lg);color:var(--ink-2);pointer-events:none}
.cu-amt .input{height:var(--h-touch);padding-inline-start:30px;font-size:var(--fs-lg)}
.cu-lines .kv-add{margin-inline-start:0;font-size:var(--fs-body);text-align:start}
.cu-est{display:block;font-size:var(--fs-sm);color:var(--ink-2)}
.mo-row-a.mo-none{font-size:var(--fs-body);font-weight:500}
.cu-next-a{flex-wrap:wrap}
.mo-bar{justify-content:space-between}
.mo-range{font-size:var(--fs-sm);color:var(--ink-2)}
.mo{display:grid;gap:16px;container:mo/inline-size}
/* The owner's layout (9 October 2026, built 13 October): the total with its split, the four figures under it, then
   the jobs that need an answer. One column; side by side once the page has the room for two. Mint is money in hand
   (Paid), peach is money waiting for you to collect it (Owed), lavender is work booked, grey is a quote not yet
   answered: the tile and the segment of the split bar take the same one, so the card is its own legend. */
.mo-first{display:grid;gap:16px}
.mo-total{padding:20px 22px;display:grid;align-content:start}
.mo-total p{margin:0}
.mo-total-l{font-size:var(--fs-meta);font-weight:500;line-height:1.3;color:var(--ink-2)}
/* (the two margins are written with the card's own name in front: ".mo-total p{margin:0}" above was winning, so on
   a phone the label, the amount and the line under it touched) */
.mo-total .mo-total-n{margin-top:8px;font-size:clamp(36px,10.5vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1}
.mo-total .mo-total-s{margin-top:10px;font-size:var(--fs-sm);color:var(--ink-2)}
.mo-split{display:flex;gap:3px;height:8px;margin-top:22px;border-radius:var(--r-pill);overflow:hidden}
.mo-split span{display:block;height:100%;min-width:4px}
.mo-split .s-paid{background:var(--ok-ink)}
.mo-split .s-owed{background:var(--owed-ink)}
.mo-split .s-booked{background:var(--book-ink)}
.mo-split .s-said_yes{background:var(--you-dot)}
.mo-split .s-quoted{background:var(--info-ink)}
.mo-split-n{display:flex;justify-content:space-between;gap:12px;margin-top:10px!important;font-size:var(--fs-sm);color:var(--ink-2)}
/* a card is 14 round (--r-card) and the grid's cells have no corner of their own: the card clips them */
.mo-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--line)}
.mo-metric{display:grid;align-content:start;min-height:128px;padding:16px;border:0;background:var(--card);color:inherit;font:inherit;text-align:start;cursor:pointer;touch-action:manipulation;transition:background-color var(--duration-quick) var(--ease-out)}
.mo-metric:active{background:var(--press)}
.mo-metric[disabled]{cursor:default}
.mo-metric-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mo-metric-l{font-size:var(--fs-meta);font-weight:500;line-height:1.3;color:var(--ink-2)}
.mo-tile{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-chip);background:var(--raise);color:var(--ink-2)}
.mo-tile svg.i{width:16px;height:16px;stroke-width:2}
.mo-tile.paid{background:var(--ok-bg-strong);color:var(--ok-ink)}
.mo-tile.owed{background:var(--owed-bg-strong);color:var(--owed-ink)}
.mo-tile.booked{background:var(--book-bg-strong);color:var(--book-ink)}
.mo-tile.said_yes{background:var(--you-bg-strong);color:var(--you-ink)}
.mo-metric:not(.has) .mo-tile.said_yes{background:var(--raise);color:var(--ink-2)} /* amber means it needs you: an empty one is quiet */
.mo-tile.quoted{background:var(--info-bg-strong);color:var(--info-ink)}
/* The owner, 14 October 2026: "not paid should be in red. and paid in green. make numericals bigger and label
   small". So the amount is the big thing in its box (32px, up from 24; 28px on a phone, up from 22) and its label the small one
   (12px, the second ink); money that is owed is red, money that is in is green. An amount of nine characters or
   more ("$1,234,567") steps down a size so it never leaves its box on a phone. */
/* The red is the dashboard's own in the light theme. In the dark theme it is a shade lighter than the error red
   (#ff8f86), which read at APCA Lc 57.6 on the card: under the Lc 60 every text here has to reach. #ff9a92 is 8.4:1
   and Lc 61.3 on the card, Lc 60.0 on a box that is hovered, and 6.6:1 as the mark on its own tile. */
:root{--owed-ink:var(--err-ink);--owed-bg-strong:var(--err-bg-strong)} /* money owed is red, the palette's own (colour.css) */
.mo-metric-n{display:block;margin-top:10px;font-size:clamp(26px,7.5vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.mo-metric-n.long{font-size:clamp(20px,6vw,24px)}
/* the amount wears the figure's own colour once there is a job in it; an empty one stays quiet (colour is for what needs looking at) */
.mo-metric.has.paid .mo-metric-n{color:var(--ok-ink)}
.mo-metric.has.owed .mo-metric-n{color:var(--owed-ink)}
.mo-metric.has.booked .mo-metric-n{color:var(--book-ink)}
.mo-metric.has.said_yes .mo-metric-n{color:var(--you-ink)}
.mo-metric.has.quoted .mo-metric-n{color:var(--info-ink)}
.mo-metric small{display:block;margin-top:6px;font-size:var(--fs-sm);color:var(--ink-2)}
.mo-metric small strong{color:var(--ink);font-weight:600}
@media (hover:hover){.mo-metric:not([disabled]):hover{background:var(--raise)}}
/* five figures (the owner, 15 Oct: Said yes): the total across the top, then the five under it in the bar's own order; an odd one out spans the row */
.mo-metrics>.mo-metric:last-child:nth-child(odd){grid-column:1 / -1}
@container mo (min-width:880px){
  .mo-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}
  .mo-metrics>.mo-metric:last-child:nth-child(odd){grid-column:auto}
}
/* Needs a quick answer: a short list; each row opens the sheet (askSheet) */
.mo-ask-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 20px 12px}
.mo-ask-h h2{margin:0;font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.mo-ask-h p{margin:4px 0 0;font-size:var(--fs-sm);color:var(--ink-2);text-wrap:pretty}
.mo-ask-h>.chip{flex:none}
.mo-asks{list-style:none;margin:0;padding:0 8px}
.mo-asks>li+li{border-top:1px solid var(--line)}
.mo-ask-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto 14px;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 12px;border:0;border-radius:var(--r-chip);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;touch-action:manipulation;transition:background-color var(--duration-quick) var(--ease-out)}
.mo-ask-row:active{background:var(--press)}
.mo-ask-row>svg.i{width:14px;height:14px;color:var(--ink-3)}
@media (hover:hover){.mo-ask-row:hover{background:var(--hover)}}
/* how long ago it finished: a level under the second ink (colour.css), the owner's word on 9 October */
.mo-when{font-size:var(--fs-sm);color:var(--ink-quiet);white-space:nowrap}
.mo-all{display:flex;width:calc(100% - 16px);margin:4px 8px 8px;height:var(--h-touch);border-radius:var(--r-chip)}
@media (max-width:720px){.mo-all{margin-top:8px}} /* a phone: its 44 edge stays 4 clear of the row above */
.mo-kicker,.dr-h .mo-kicker{margin:0 0 4px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)} /* a drawer's own paragraph is the third ink; this one is read */
.mo-answers{display:grid;gap:10px}
.mo-answers .btn{height:var(--h-touch);font-size:var(--fs-body);font-weight:600}
.mo-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mo-none{font-size:var(--fs-body);font-weight:500;letter-spacing:0;color:var(--ink-2)}
.mo-card .cu-card-h h2{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em}
.mo-rows{list-style:none;margin:0;padding:0 8px 8px}
/* a card is 14 round and its rows sit 8 inside it, so a row is 6 round (outer = inner + padding) */
.mo-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 12px;border:0;border-radius:var(--r-chip);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:background-color var(--duration-quick) var(--ease-out)}
.mo-row:active{background:var(--press)}
.mo-row-t{flex:1 1 auto;min-width:0}
.mo-row-t b{display:block;font-size:var(--fs-body);font-weight:500;overflow-wrap:anywhere}
.mo-row-t small{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--ink-2);text-wrap:pretty}
.mo-row-a{flex:none;font-size:var(--fs-body);font-weight:500;color:var(--ink)}
.mo-row>.chip{flex:none}
.mo-row>svg.i{flex:none;width:14px;height:14px;color:var(--ink-3)}
@media (hover:hover){.mo-row:hover{background:var(--hover)}}
.mo-av{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--raise);color:var(--ink);font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em}
.mo-av svg.i{width:18px;height:18px}
.mo-av.info{background:var(--info-bg-strong);color:var(--info-ink)}
.mo-av.ok{background:var(--ok-bg-strong);color:var(--ok-ink)}
.mo-chain{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0;padding:0 12px 16px}
.mo-step{display:flex;flex-direction:column;gap:2px;width:100%;min-width:0;min-height:var(--h-touch);padding:8px;border:0;border-radius:var(--r-ctl);background:transparent;color:inherit;font:inherit;text-align:start}
button.mo-step{cursor:pointer;touch-action:manipulation;transition:background-color var(--duration-quick) var(--ease-out)}
.mo-step b{font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.mo-step>span:not(.meter){font-size:var(--fs-sm);color:var(--ink-2)}
.mo-step .meter{margin-top:6px}
.mo-step .meter i{transition:none}
.mo-chain>li:nth-child(2) .meter i{background:var(--info-ink)}
.mo-chain>li:nth-child(3) .meter i{background:var(--book-ink)}
.mo-chain>li:nth-child(4) .meter i,.mo-chain>li:nth-child(5) .meter i{background:var(--ok-ink)}
.mo-row>.chip.est,.mo-box .chip.est{background:var(--book-bg-strong);color:var(--book-ink)}
/* "Not in the numbers above": each is a box. The words on the left (the title, then its tag and what it counts), the amount
   beside them. A card is 14 round and its boxes sit 8 inside it, so a box is 6 round (outer = inner + padding). */
.mo-boxes{list-style:none;display:grid;gap:8px;margin:0;padding:0 8px 8px}
.mo-box{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t a" "m m";align-items:baseline;gap:8px 12px;width:100%;min-height:72px;padding:12px 14px;border:0;border-radius:var(--r-chip);background:transparent;box-shadow:0 0 0 1px var(--line);color:inherit;font:inherit;text-align:start;cursor:pointer;touch-action:manipulation;transition-property:background-color,box-shadow,scale;transition-duration:var(--duration-quick);transition-timing-function:var(--ease-out)}
.mo-box:active{scale:.96;background:var(--press)}
.mo-box-t{grid-area:t;min-width:0;font-size:var(--fs-body);font-weight:500;overflow-wrap:anywhere;text-wrap:balance}
.mo-box-a{grid-area:a;font-size:var(--fs-body);font-weight:600;white-space:nowrap;text-align:end}
.mo-box-a.est{color:var(--book-ink)}
.mo-box-m{grid-area:m;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.mo-box-m small{font-size:var(--fs-sm);color:var(--ink-2);text-wrap:pretty}
@media (hover:hover){.mo-box:hover{background:var(--hover);box-shadow:0 0 0 1px var(--line-2)}}

@media (hover:hover){button.mo-step:hover{background:var(--hover)}}
.mo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.mo-jobs{list-style:none;margin:0;padding:0}
.mo-job{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.mo-jobs>li:last-child .mo-job{border-bottom:0}
.mo-job-a{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;font-size:var(--fs-body);font-weight:500}
.mo-job .chip:not(.you):not(.ok):not(.info){color:var(--ink)}
.dr-h .dr-sub{color:var(--ink-2)}
#cu-money .t-tab:not([aria-selected="true"]){color:var(--ink-2)}
@media (max-width:720px){
  .mo-grid{grid-template-columns:minmax(0,1fr)}
  .mo-chain{gap:2px;padding-inline:4px}
  .mo-step{align-items:center;padding:8px 2px;text-align:center}
  .mo-step>span:not(.meter){font-size:var(--fs-meta)}
  .mo-step .meter{width:100%}
  .mo-bar{gap:8px}
  .mo-bar .t-tabs{display:flex;width:100%}
  .mo-bar .t-tab{flex:1 1 auto;justify-content:center;height:var(--h-touch);padding:0 6px}
  .mo-bar .t-tabs-pill{height:var(--h-touch)}
}

/* ---------- 16. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .cu-step,.cu-chip,.cu-tab,.cu-kind,.cu-stat,.cu-check,.cu-check::before,.mo-row,.mo-box,.mo-ask-row,.mo-metric,button.mo-step,.crm-strip,.cu-jrow,.cu-crumb,.cu-tag-add,.cu-ideas .chip,.cv-who{transition:none}
  .cu-step:active,.cu-chip:active,.cu-stat:active,.cu-check:active,.cu-tag-add:active,.cu-ideas .chip:active,.mo-box:active{scale:1}
}

/* ---------- Home: "Needs you" shows the first few rows; this row opens and closes the rest (13 October 2026) ----------
   A quiet button, not a link: it changes this list and goes nowhere. Its arrow turns when the list is open. */
.nl-toggle{display:flex;padding:6px 8px}
.nl-toggle button{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 8px;border:0;border-radius:calc(var(--r-card) - 7px);background:none;color:var(--ink-2);font:inherit;font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:color var(--duration-quick) var(--ease-out),background-color var(--duration-quick) var(--ease-out),scale var(--duration-quick) var(--ease-out)}
.nl-toggle svg.i{width:14px;height:14px;stroke-width:2;transition:rotate var(--duration-quick) var(--ease-out)} /* beside 500-weight words */
.nl-toggle button[aria-expanded="true"] svg.i{rotate:180deg}
.nl-toggle button:active{scale:.96}
@media (hover:hover){.nl-toggle button:hover{color:var(--ink);background:var(--hover)}}
@media (pointer:coarse){.nl-toggle button{min-height:var(--h-touch)}}
@media (max-width:720px){.nl-toggle button{min-height:var(--h-touch)}} /* a phone is a phone whatever it says its pointer is */
@media (prefers-reduced-motion: reduce){.nl-toggle button,.nl-toggle svg.i{transition:none}.nl-toggle button:active{scale:1}}
/* "44 more in Customers" and "10 more in Inbox" sit in rows 37px apart: each link's area is its own row, where 12px above and below made the two share a pixel */
.nl-more .more::after{inset:-10px -8px}
.nl[data-nl-x]:focus-visible{outline-offset:-2px;border-radius:0} /* the row the keyboard is moved to when the list opens: its ring stays inside the card */
/* a row that opens something answers a press at once (a finger has no hover to tell it the row is live); not when
   the press is on one of the row's own buttons */
.nl-row[data-go]:active:not(:has(a:active,button:active)),.nl-row[data-appt]:active:not(:has(a:active,button:active)){background:var(--press)}

/* =====================================================================
   Home's rows: one action system (13 October 2026)
   The owner, of "Needs you": "handled later they are not organized and look cheap not systematic ... study online,
   take references". Before: each row's buttons were as wide as their words, so "Handled", "Contacted" and "Later"
   floated at a different place on every row, some with an icon and some without, and one row had three buttons in
   three styles.

   What the references agree on (a team list on Dribbble with one same-width button and a menu per row; Productboard's
   inbox; SAP's, VTEX's and Basis's written rules for a row's actions): the actions sit in one column at the end of
   the row, the same size and place on every row; no more than two or three are in sight; the one that matters most
   is a button, the other is quiet; an icon and a word, always both.

   So every row ends in the same two places:
     the other way to settle it   108px, quiet, an icon and a word     Handled, Contacted, Later
     the next step                128px, the filled button            Call Tom, Email Felix, Done, Add answer, Review
   A row that asks a question ("Did it happen?") has its three answers as one group across the same width.
   A long label (the rare rows about a plan or a payment) may widen its own button; the right edge never moves.
   ===================================================================== */
.nl-a{display:grid;grid-template-columns:minmax(108px,max-content) minmax(128px,max-content);justify-content:end;align-items:center;gap:8px}
/* no overflow:hidden here: under a thumb a small button's area reaches 4px above and below it (polish.css), and a
   clipped button cut that off (36px to press where 44 was meant). A long label widens its own place instead. */
.nl-a>.btn{width:100%;min-width:0;justify-content:safe center}
.nl-a>.btn:last-child{grid-column:2}
.nl-a>.btn:first-child:not(:last-child){grid-column:1}
/* the quiet one: its icon and its word start where the column starts, so the icons make one line down the list */
.nl-a>.btn-ghost{justify-content:flex-start;padding-inline:8px;color:var(--ink-2)}
.nl-a>.btn-ghost svg.i{color:var(--ink-3)}
@media (hover:hover){.nl-a>.btn-ghost:hover{color:var(--ink)}.nl-a>.btn-ghost:hover svg.i{color:currentColor}}
/* three answers to one question: one group, as wide as the two places together (108 + 8 + 128) */
.nl-seg{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:244px;border-radius:var(--r-chip);box-shadow:var(--edge-btn)}
.nl-seg .btn{width:100%;min-width:0;padding-inline:6px;border-radius:0;box-shadow:none;justify-content:center}
.nl-seg .btn+.btn{margin-inline-start:-1px}
.nl-seg .btn:first-child{border-start-start-radius:var(--r-chip);border-end-start-radius:var(--r-chip)}
.nl-seg .btn:last-child{border-start-end-radius:var(--r-chip);border-end-end-radius:var(--r-chip)}
.nl-seg .btn:not(.btn-strong){color:var(--ink-2)}
.nl-seg .btn:focus-visible{position:relative;z-index:1}
/* a part of a joined group is not shrunk when pressed (alone it left a gap either side of it): it sinks instead */
.nl-seg .btn:active{transform:none;box-shadow:var(--edge-press)}
.nl-seg .btn:not(.btn-strong):active{background:var(--press);color:var(--ink)}
.nl-seg .btn-strong:active{filter:brightness(.92)}
@media (hover:hover){.nl-seg .btn:not(.btn-strong):hover{position:relative;z-index:1;color:var(--ink)}}
/* a phone (the rows stack under 600px of room): the same two places, each half the width under the words;
   a row with one action gives it the whole width, and the three answers are thirds of it */
@container (max-width:600px){
  .nl-a{grid-template-columns:minmax(0,1fr) minmax(calc(50% - 4px),max-content);justify-content:stretch}
  .nl-a>.btn:only-child{grid-column:1 / -1}
  .nl-a>.btn-ghost{margin-inline-start:-8px;width:calc(100% + 8px)} /* its icon stands under the first letter of the name above it */
  .nl-seg{width:auto}
}
/* the smallest phones: the two places take the row's whole width, so "Email Felix" and "Add answer" are not cut */
@container (max-width:340px){.nl-a{padding-inline-start:0}.nl-a>.btn-ghost{margin-inline-start:0;width:100%}}

/* =====================================================================
   Stage 4: the assistant on customer data (14 October 2026)

   A list under a reply ("who needs a follow-up today?"). The same clean rows as every other list: who and what it
   is about, one figure, one status pill, and the whole row opens that person. The columns belong to the list, not
   to each row (subgrid), so the figures and the pills line up down the list. It is as wide as the assistant's own
   cards and has their edge, so an answer and a change read as the same kind of thing.
   ===================================================================== */
.asl{width:520px;max-width:100%;border:1px solid var(--as-edge);border-radius:var(--r-card);background:var(--as-card);box-shadow:var(--as-shadow);overflow:hidden;container-type:inline-size}
.asl-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto auto 14px;column-gap:12px}
.asl-list>li{display:grid;grid-template-columns:subgrid;grid-column:1 / -1}
.asl-list>li[hidden]{display:none}
.asl-list>li+li{border-top:1px solid var(--as-edge)}
.asl-row{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;align-items:center;min-height:56px;padding:8px 16px;color:inherit;text-decoration:none;transition:background-color var(--duration-quick) var(--ease-out)}
.asl-row:focus-visible{outline-offset:-2px;border-radius:calc(var(--r-card) - 2px)}
.asl-row:active{background:var(--press)}
.asl-t{min-width:0}
.asl-t b{display:block;font-size:var(--fs-body);font-weight:500;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asl-t small{display:block;margin-top:2px;font-size:var(--fs-sm);line-height:1.35;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asl-m{font-size:var(--fs-sm);color:var(--ink-2);text-align:end;white-space:nowrap}
.asl-s{display:flex}
.asl-row>svg.i{width:14px;height:14px;color:var(--ink-3)}
.asl-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;min-height:44px;padding:6px 16px 6px 8px;border-top:1px solid var(--as-edge);background:var(--as-inset);font-size:var(--fs-sm);color:var(--ink-2)}
.asl-f>:first-child:not(.asl-more){margin-inline-start:8px}
.asl-more{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 8px;border:0;border-radius:calc(var(--r-card) - 7px);background:none;color:var(--ink-2);font:inherit;font-weight:500;cursor:pointer;transition:color var(--duration-quick) var(--ease-out),background-color var(--duration-quick) var(--ease-out),scale var(--duration-quick) var(--ease-out)}
.asl-more svg.i{width:14px;height:14px;stroke-width:2;transition:rotate var(--duration-quick) var(--ease-out)}
.asl-more[aria-expanded="true"] svg.i{rotate:180deg}
.asl-more:active{scale:.96}
.asl-f .more{font-size:var(--fs-sm)}
@media (hover:hover){.asl-row:hover{background:var(--as-inset)}.asl-more:hover{color:var(--ink);background:var(--press)}}
@media (pointer:coarse){.asl-more{min-height:var(--h-touch)}}
@media (max-width:720px){.asl-more{min-height:var(--h-touch)}}
@media (prefers-reduced-motion: reduce){.asl-row,.asl-more,.asl-more svg.i{transition:none}.asl-more:active{scale:1}}
/* a narrow card (a phone): who on the left over two lines, the pill and the figure on the right */
@container (max-width:440px){
  .asl-list{grid-template-columns:minmax(0,1fr) auto;column-gap:10px}
  .asl-row{row-gap:2px;padding:10px 14px}
  .asl-t{grid-column:1;grid-row:1 / span 2}
  .asl-s{grid-column:2;grid-row:1;justify-content:flex-end}
  .asl-m{grid-column:2;grid-row:2}
  .asl-m:empty{display:none}
  .asl-m:empty+.asl-s{grid-row:1 / span 2}
  .asl-row>svg.i{display:none}
}
/* The catch-up on a customer's page: what the model wrote, and what it was written from */
.cu-catch-t{margin:0;font-size:var(--fs-body);line-height:1.55;color:var(--ink);text-wrap:pretty}
.cu-catch-f{margin:12px 0 0;font-size:var(--fs-sm);line-height:1.4;color:var(--ink-2)}

/* A list about money (the owner, 14 October 2026, of "Who owes me money?" on his phone: "amount should be big and
   green if recieved or may be done in small"). The amount is the big thing at the end of a row: green when the money
   is in, red when the work is done and it is not, the plain ink for a quote. The status steps back to a small quiet
   word under it, so a row has one colour and it means one thing. The same on a wide screen and on a phone.
   The red is a shade lighter in the dark theme than on the Money page: this card is lighter than a page card, and
   #ff9a92 read at APCA Lc 59.4 on it (#ffa39b: 7.7:1, Lc 62.6; the green: 9.1:1, Lc 72). */
:root{--asl-owed:var(--err-ink)}
.asl.is-money .asl-row{row-gap:2px}
.asl.is-money .asl-t{grid-column:1;grid-row:1 / span 2}
.asl.is-money .asl-m{grid-column:2 / 4;grid-row:1;align-self:end}
.asl.is-money .asl-s{grid-column:2 / 4;grid-row:2;align-self:start;justify-content:flex-end}
.asl.is-money .asl-row>svg.i{grid-column:4;grid-row:1 / span 2}
.asl-m.paid,.asl-m.owed,.asl-m.open{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.asl-m.paid{color:var(--ok-ink)}
.asl-m.owed{color:var(--asl-owed)}
.asl.is-money .asl-s .chip{height:auto;padding:0;gap:4px;background:none;color:var(--ink-2);font-size:var(--fs-meta);line-height:1.3}
.asl.is-money .asl-s .chip .d{display:none}
@container (max-width:440px){
  .asl-row{min-height:64px} /* every row of every list the same height on a phone, with or without a second line on the right */
  .asl.is-money .asl-m,.asl.is-money .asl-s{grid-column:2}
  .asl.is-money .asl-m:empty+.asl-s{grid-row:1 / span 2;align-self:center}
}
/* an answer given as guidance by a model: one quiet line under it that says so */
.as-guide{margin:0;font-size:var(--fs-meta);line-height:1.4;color:var(--ink-2)}
/* guidance with steps: one card in the assistant's card style. Its head (what it is for; that it is AI guidance), the
   answer, a row a step (the place's icon, a short heading, one sentence, one way there), and a status worth knowing.
   Colour stays quiet: the headings carry the eye, the icons say where. */
.ag{width:560px;max-width:100%;border:1px solid var(--as-edge);border-radius:var(--r-card);background:var(--as-card);box-shadow:var(--as-shadow);overflow:hidden}
.ag-h{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;align-items:start;padding:14px 16px 0}
.ag-hi{display:grid;place-items:center;width:28px;height:28px;color:var(--ink)}
.ag-hi svg{width:18px;height:18px}
.ag-hd h3{margin:0;font-size:var(--fs-body);font-weight:600;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.ag-hd p{margin:2px 0 0;font-size:var(--fs-meta);line-height:1.4;color:var(--ink-2)}
.ag-a{margin:0;padding:10px 16px 14px;font-size:var(--fs-body);line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.ag-a b,.ag-t b,.ag-d b,.ag-note b{font-weight:600}
.ag-list{list-style:none;margin:0;padding:0}
.ag-step{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;padding:14px 16px;border-top:1px solid var(--as-edge)}
.ag-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-chip);background:var(--as-inset);color:var(--ink-2)}
.ag-ic svg{width:16px;height:16px}
.ag-b{min-width:0;display:flex;flex-direction:column;gap:4px;padding-top:3px}
.ag-t{margin:0;font-size:var(--fs-body);font-weight:600;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.ag-n{color:var(--ink-2);font-variant-numeric:tabular-nums}
.ag-d{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.ag-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ag-say{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:32px;padding:4px 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font:inherit;font-size:var(--fs-sm);line-height:1.3;text-align:start;cursor:pointer;touch-action:manipulation;transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
.ag-say svg{flex:none;width:14px;height:14px}
.ag-say:active{background:var(--press)}
@media (hover:hover){.ag-say:hover{background:var(--hover);color:var(--ink)}}
.ag-note{display:flex;gap:8px;align-items:flex-start;margin:0;padding:12px 16px;border-top:1px solid var(--as-edge);font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}
.ag-note svg{flex:none;width:16px;height:16px;margin-top:1px}
@media (pointer:coarse){.ag-say{min-height:44px}}
@media (max-width:420px){.ag-h,.ag-step{column-gap:10px;padding-inline:14px}.ag-a,.ag-note{padding-inline:14px}}
@media (prefers-reduced-motion:reduce){.ag-say{transition:none}}

/* batch 3 (15 Oct): the row menu stays in one column on rows with no Call or Email button */
.tbl.cust td.act .lt-acts{min-width:142px}

/* ---------- 29 Oct 2026: usernames, look-alikes and merging (the owner's mockup, approved the same day) ----------
   The username is quiet text: the size and colour of the line under a name. A warning while adding someone has no box,
   only the amber "needs you" text; on a customer's page it is the usual note. */
.cu-un{font-weight:400;color:var(--ink-3);font-size:var(--fs-lg);letter-spacing:0;overflow-wrap:anywhere}
.c2 small.cu-unl{display:block;margin-top:1px;font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:761px){
  @container lt (min-width:784px){.tbl.cust .c2 small:not(.cu-unl){display:none}.tbl.cust th.ct,.tbl.cust td.ct{display:table-cell}}
}
@media (max-width:760px){.tbl.cust .c2 small.cu-unl{display:block}}
.un-in{position:relative}
.un-in>span{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.un-in .input{padding-inline-start:28px}
.un-st:empty{display:none}
.un-st{margin-top:6px;font-size:var(--fs-sm);display:grid;gap:8px}
.un-ok{display:flex;gap:6px;align-items:center;color:var(--ok-ink)}
.un-ok svg{width:14px;height:14px}
.un-bad{color:var(--err-ink)}
.un-sug{display:flex;gap:6px;flex-wrap:wrap;align-items:center;color:var(--ink-3)}
.un-help{margin:6px 0 0;font-size:var(--fs-sm);color:var(--ink-3)}
.dup:empty{display:none}
.dup{display:grid;gap:8px;margin-top:8px;color:var(--you-ink);font-size:var(--fs-sm)}
.dup p{margin:0}
.dup ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dup li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dup li .who{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
.dup li .who small{display:block;opacity:.8}
.dup .acts{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.dup .cu-un{color:inherit;opacity:.8;font-size:inherit;margin-inline-start:4px}
.cu-matchnote b{font-weight:600}
.cu-merged{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.mg-sum{margin:0;font-size:var(--fs-body);color:var(--ink-2)}
.mg-h{margin:14px 0 6px;font-size:var(--fs-meta);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.mg-list{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.mg-list li{border-bottom:1px solid var(--line)}
.mg-pick{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 6px;border-radius:var(--r-ctl);cursor:pointer}
@media (hover:hover){.mg-pick:hover{background:var(--hover)}}
.mg-pick:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.mg-pick[aria-pressed="true"]{background:var(--select)}
.mg-pick .who{flex:1;min-width:0;display:grid}
.mg-pick .who b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-pick .who small{color:var(--ink-3);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-none{margin:8px 0 0;font-size:var(--fs-sm);color:var(--ink-3)}
.mg-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--fs-body)}
.mg-row>span:first-child{color:var(--ink-3);font-size:var(--fs-sm);padding-top:2px}
.mg-opt{display:grid;gap:8px;min-width:0}
.mg-opt label{display:flex;gap:8px;align-items:flex-start;cursor:pointer;overflow-wrap:anywhere}
.mg-opt label small{display:block;color:var(--ink-3);font-size:var(--fs-sm)}
.mg-warn{margin:2px 0 0;font-size:var(--fs-sm);color:var(--you-ink)}
.mg-moves{margin:0;padding-inline-start:18px;display:grid;gap:4px;color:var(--ink-2);font-size:var(--fs-body)}