/* =====================================================================
   public/app/money.css: Money in the list system the owner chose (version 3, 14 October 2026)

   The figures keep their colours (paid green, owed red, booked teal, quoted blue: the owner, 13 October). Around
   them: every section a soft panel; the four figures four tiles, as Home's; neutral avatars; rows with round ends
   and hairlines; quiet buttons with 10px corners. The period tabs are the shared chips (lists.css).
   Scoped to #crm .mo. Every colour and size is a token. Hover only where a pointer hovers.
   ===================================================================== */

/* ---------- soft panels; the four figures as four tiles ---------- */
#crm .mo .card{border:1px solid var(--card-edge);border-radius:var(--r-panel);background:var(--card-sheen);box-shadow:var(--card-lift)}
#crm .mo-metrics{gap:12px;border:0;border-radius:0;background:none;overflow:visible}
#crm .mo-metric{border:1px solid var(--card-edge);border-radius:var(--r-panel);background:var(--card-sheen);box-shadow:var(--card-lift);transition:background-color var(--duration-quick) var(--ease-out),scale var(--duration-quick) var(--ease-out)}
@media (hover:hover){#crm .mo-metric:not([disabled]):hover{background:var(--btn-2-hover)}}
#crm .mo-metric:not([disabled]):active{scale:.98}
#crm .mo-tile{border-radius:var(--r-btn)}

/* ---------- the reports in one strip that scrolls sideways (the owner, 14 Oct): how leads came in, where from, when.
   Each card its own width, growing to fill the row when they all fit (the owner, 15 Oct: "right side empty"), snapping into place; the edge fades while there is more (menu.js marks it); on a pointer
   device two round arrows on the edges move it a card at a time ---------- */
#crm .mo-rail-wrap{position:relative;min-width:0}
#crm .mo-rail{display:flex;align-items:stretch;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 0 6px}
#crm .mo-rail::-webkit-scrollbar{display:none}
#crm .mo-rail:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:var(--r-panel)}
#crm .mo-rail>.mo-card{flex:1 0 min(420px,86%);scroll-snap-align:start;margin:0}
#crm .mo-rail>.mo-card:first-child{flex-basis:min(500px,86%)}
/* "Came in" as small tiles (the owner, 14 Oct): Answered tall on the side, where it all starts; Leads and Booked above,
   Done and Paid below; each tile its number, its word and its bar, the card filled to the strip's height */
#crm .mo-rail>.mo-card:first-child{display:flex;flex-direction:column}
#crm .mo-rail .mo-chain{flex:1 1 auto;grid-template-columns:minmax(0,1.15fr) repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;padding:0 16px 16px}
#crm .mo-rail .mo-chain>li{display:flex;min-width:0}
#crm .mo-rail .mo-chain>li:first-child{grid-row:1 / 3}
#crm .mo-rail .mo-step{flex:1 1 auto;justify-content:flex-start;align-items:stretch;text-align:start;gap:2px;padding:12px 14px;border-radius:var(--r-btn);background:var(--tint-1)}
#crm .mo-rail .mo-step>span:not(.meter){margin-bottom:10px}
#crm .mo-rail .mo-step .meter{flex:none;width:100%;margin:auto 0 0}
/* Answered, the tall tile: its word on top as a label, its number big at the foot just over its bar (as Home's figure
   tiles), sized to the tile's own width so a long number still fits */
#crm .mo-rail .mo-chain>li:first-child .mo-step{container:ans / inline-size}
#crm .mo-rail .mo-chain>li:first-child .mo-step>span:not(.meter){order:-1;margin:0}
#crm .mo-rail .mo-chain>li:first-child .mo-step b{margin-top:auto;font:700 var(--fs-kpi)/1 var(--display);letter-spacing:-.03em}
#crm .mo-rail .mo-chain>li:first-child .mo-step .meter{margin-top:14px}
@container ans (max-width:119px){#crm .mo-rail .mo-chain>li:first-child .mo-step b{font-size:var(--fs-kpi-sm)}}
@container ans (max-width:119px){#crm .mo-rail .mo-chain>li:first-child .mo-step b.is-long{font-size:var(--fs-kpi-xs);margin-bottom:calc((var(--fs-kpi-sm) - var(--fs-kpi-xs)) * .17)}} /* "1,240" on a phone, on the same baseline as a shorter figure: the face sits .17em below its baseline at line-height 1 */
@media (hover:hover){#crm .mo-rail button.mo-step:hover{background:var(--btn-2-hover)}}
@media (max-width:720px){#crm .mo-rail .mo-chain{padding:0 12px 12px;gap:6px}#crm .mo-rail .mo-step{padding:10px 12px}}
/* Where they came from, When they got in touch: tiles in the same language (the owner, 15 Oct: "make them better
   visuals"). Two side by side, each the card's height; three as "Came in": the first tall on the side, two stacked.
   Every tile reads one way: its icon and name on top (one height whether the name takes one line or two), then its
   leads with done and charged at the right on the same baseline, then its bar; the foot sits on the tile's floor, so
   a name that wraps never moves a figure or a bar. A tall tile's figure is big, on the baseline of Answered's. The
   first tile is lit when it is the one that matters (crm.js): an ink icon and an ink bar, the other figures a step
   quieter; nothing else coloured. Every tile's bar ends in the same room for its share, and three tiles are as wide
   as one another, so the bars in a card are drawn to one scale */
#crm .mo-rail>.mo-tl-card{display:flex;flex-direction:column}
#crm .mo-tiles{flex:1 1 auto;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin:0;padding:0 16px 16px;list-style:none}
#crm .mo-tiles.is-3{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
#crm .mo-tiles.is-3>li:first-child{grid-row:1 / 3}
#crm .mo-tiles>li{display:flex;min-width:0}
#crm .mo-rail .mo-tl{container:tl / inline-size;flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(10px,1fr) auto auto;grid-template-areas:"h" "." "f" "m";min-width:0;padding:12px 14px;border:0;border-radius:var(--r-btn);background:var(--tint-1);color:inherit;font:inherit;text-align:start;cursor:pointer;touch-action:manipulation;transition:background-color var(--duration-quick) var(--ease-out),scale var(--duration-quick) var(--ease-out)}
#crm .mo-tl-h{grid-area:h;display:flex;align-items:center;gap:8px;min-width:0;min-height:32px}
#crm .mo-tl-i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-btn);background:var(--avatar-row);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--tile-ring);color:var(--ink-2)}
#crm .mo-tl-i svg.i{width:16px;height:16px;stroke-width:2} /* as the four figures' tiles (.mo-tile) */
#crm .mo-tl-l{min-width:0;font-size:var(--fs-sm);line-height:16px;color:var(--ink-2);text-wrap:balance} /* two lines are the icon's height */
#crm .mo-tl-f{grid-area:f;display:flex;flex-wrap:wrap-reverse;align-items:last baseline;gap:2px 8px;min-width:0} /* what has no room goes above the figure, never under it: the figure's baseline never moves */
#crm .mo-tl-n{flex:none;font:700 var(--fs-kpi)/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
/* done and charged: one line with a dot between when the tile has the room, done over charged when it has not. The
   dot hangs off done's end into the gap, so on its own line done ends at the edge and the dot is clipped: never a
   dangling dot. Only when even the wider of the two cannot sit beside the figure does the pair go above it */
#crm .mo-tl-s{flex:1 1 0%;min-width:min-content;display:flex;flex-wrap:wrap;justify-content:flex-end;column-gap:.8em;overflow:clip;font-size:var(--fs-meta);line-height:1.35;color:var(--ink-3);text-align:end}
#crm .mo-tl-s>span{position:relative;white-space:nowrap}
#crm .mo-tl-s>span:first-child:not(:last-child)::after{content:"·";position:absolute;left:100%;width:.8em;text-align:center;font-weight:400;color:var(--ink-3)}
#crm .mo-tl-s .chg{font-weight:600;color:var(--ok-ink)}
#crm .mo-tl-m{grid-area:m;display:flex;align-items:center;gap:8px;height:4px;margin-top:16px} /* 16px: as Answered (its 14px and the 2px gap) */
#crm .mo-tl-p{flex:none;width:2.7em;font-size:var(--fs-meta);font-weight:600;line-height:1.35;color:var(--ink-3);text-align:end} /* room for "100%" in every tile */
#crm .mo-rail .mo-tl-m .meter{flex:1 1 auto;width:auto;margin:0}
#crm .mo-rail .meter{background:var(--hair-2)} /* every bar in the strip on one track that shows in both themes (the tile's own tint hid it in light) */
#crm .mo-rail .mo-tl .meter i{background:var(--ink-3);transition:none}
#crm .mo-tiles>li.is-key .mo-tl-i{background:var(--ink);box-shadow:none;color:var(--night)}
#crm .mo-tiles>li.is-key .meter i{background:var(--ink)}
#crm .mo-tiles>li.is-key .mo-tl-p{color:var(--ink)}
#crm .mo-tiles.is-lit>li:not(.is-key) .mo-tl-n{color:var(--ink-2)}
/* the two stacked tiles of three: the figure as "Came in"'s small ones */
#crm .mo-tiles.is-3>li:not(:first-child) .mo-tl{grid-template-rows:auto minmax(6px,1fr) auto auto}
#crm .mo-tiles.is-3>li:not(:first-child) .mo-tl-n{font-family:var(--sans);font-size:var(--fs-title);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25;letter-spacing:-.01em;margin-bottom:0} /* tabular as Came in's (the big figure's shorthand above reset it) */
#crm .mo-tiles.is-3>li:not(:first-child) .mo-tl-m{margin-top:8px}
/* a figure or an amount too wide to leave done beside it (crm.js marks the card): done goes above every figure in that
   card, not only the wide one's. 149px: every phone up to 430 wide (a 412 phone's tile is 123px, a 430's 131px); a
   tablet's or a desktop's tile (161px and up) keeps done beside a three-figure lead. 102px: the narrowest phones (362
   wide or less, a 360 one among them), where even a two-figure lead can leave done no room in one tile and room in the
   other ("88 done · $88,888" beside "1 done") */
@container tl (max-width:102px){#crm .mo-tiles:not(.is-3) .mo-tl-s{flex:1 0 100%}}
@container tl (max-width:149px){#crm .mo-tiles.n3:not(.is-3) .mo-tl-s{flex:1 0 100%}}
@container tl (max-width:189px){#crm .mo-tiles.n4:not(.is-3) .mo-tl-s{flex:1 0 100%}}
/* a phone's strip (the page 499px wide or less: a phone up to 531): every big figure in it one size, the tiles' as
   Answered's ("1,240" a step smaller still, on the same baseline). Answered's own rule above turns it small at the
   same width (its tile is then 119px or less); this keeps the tiles with it (a 412 or 430 phone's tile is wider). In a
   card with a four-figure lead (n4) every figure takes the smaller step, so "1,000" and "600" are one size and their
   done lines one height */
@container mo (max-width:499px){#crm .mo-rail .mo-chain>li:first-child .mo-step b,#crm .mo-tl-n{font-size:var(--fs-kpi-sm)}#crm .mo-rail .mo-chain>li:first-child .mo-step b.is-long,#crm .mo-tl-n.is-long,#crm .mo-tiles.n4 .mo-tl-n{font-size:var(--fs-kpi-xs);margin-bottom:calc((var(--fs-kpi-sm) - var(--fs-kpi-xs)) * .17)}}
@media (hover:hover){#crm .mo-rail .mo-tl:hover{background:var(--btn-2-hover)}}
#crm .mo-rail .mo-tl:active{scale:.98}
@media (max-width:720px){#crm .mo-tiles{padding:0 12px 12px;gap:6px}#crm .mo-rail .mo-tl{padding:10px 12px}#crm .mo-tl-h{gap:6px}#crm .mo-tl-l{font-size:var(--fs-meta)}}
@media (prefers-reduced-motion:reduce){#crm .mo-rail .mo-tl{transition:none}#crm .mo-rail .mo-tl:active{scale:1}}
#crm .mo-rail-go{position:absolute;top:50%;z-index:2;display:none;width:36px;height:36px;margin-top:-18px;border-radius:50%;background:var(--btn-2);box-shadow:inset 0 0 0 1px var(--btn-2-ring),var(--card-lift);color:var(--ink)}
#crm .mo-rail-go.prev{left:-12px}
#crm .mo-rail-go.next{right:-12px}
@media (hover:hover) and (pointer:fine) and (min-width:721px){
  #crm .mo-rail-wrap:has(.mo-rail:is([data-fade="end"],[data-fade="both"])) .mo-rail-go.next,
  #crm .mo-rail-wrap:has(.mo-rail:is([data-fade="start"],[data-fade="both"])) .mo-rail-go.prev{display:grid}
  #crm .mo-rail-go:hover{background:var(--btn-2-hover)}
}
@media (max-width:720px){#crm .mo-rail{margin:0 -16px;padding:2px 16px 6px;scroll-padding-inline:16px;gap:12px}}

/* ---------- the rows: neutral avatars, round ends, hairlines ---------- */
#crm .mo-av,#crm .mo-av.info,#crm .mo-av.ok{width:var(--av-list);height:var(--av-list);background:var(--avatar-row);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--tile-ring);font-size:var(--fs-meta);color:var(--avatar-ink)}
#crm .mo-av svg.i{width:15px;height:15px}
#crm .mo-ask-row{grid-template-columns:var(--av-list) minmax(0,1fr) auto 14px;min-height:var(--h-list-row);border-radius:var(--r-row-tint)}
#crm .mo-asks>li+li,#crm .mo-rows>li+li{border-top-color:var(--hair)}
#crm .mo-row{min-height:var(--h-list-row);border-radius:var(--r-row-tint)}
@media (hover:hover){#crm :is(.mo-ask-row,.mo-row,.mo-box):hover{background:var(--row-hover)}}
#crm .mo-box{border-radius:var(--r-btn)}
#crm .mo-step{border-radius:var(--r-btn)}

/* ---------- quiet buttons with 10px corners ---------- */
#crm .mo .btn{gap:8px;border:0;border-radius:var(--r-btn);background:var(--btn-2);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--btn-2-ring);font-weight:500;color:var(--ink)}
#crm .mo .btn:not(.mo-all){height:var(--h-list-btn);padding:0 12px;font-size:var(--fs-sm)}
#crm .mo .btn svg.i{width:15px;height:15px}
#crm .mo .btn.btn-primary{background:var(--lime);box-shadow:var(--edge-primary),var(--glow-btn);font-weight:600;color:var(--night)}
#crm .mo-all{height:var(--h-field);font-size:var(--fs-sm)}
@media (hover:hover){#crm .mo .btn:not(.btn-primary):hover{background:var(--btn-2-hover);color:var(--ink)}#crm .mo .btn.btn-primary:hover{background:var(--lime-hover);color:var(--night)}}
#crm .mo .btn:active{scale:.96}

@media (pointer:coarse){#crm .mo-all{min-height:var(--h-touch)}} /* Money's buttons stay 32 to see; their edge gives the 44 (app.css) */
@media (prefers-reduced-motion:reduce){#crm .mo-metric{transition:none}#crm .mo-metric:active,#crm .mo .btn:active{scale:1}}
/* who owes you: each one's next step beside them (the check of 15 Oct); the line under the row runs under both */
.mo-jobs>li.mo-owe{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.mo-jobs>li.mo-owe:last-child{border-bottom:0}
.mo-jobs>li.mo-owe .mo-job{flex:1;min-width:0;border-bottom:0}
.mo-do{flex:none}