/* =============================================================================
   look10.css — v458 · 21 Oct 2026 · Joe 7:28pm: "I'd like you to make 5 major upgrades to the look of our CRM dashboard"
   The LAST stylesheet (after look9.css). Every rule is prefixed html:not(.nolook10) body so the off switch (localStorage
   nolook10=1, look10.js) is one class. Rules that had to beat an earlier !important say which one.
   1 · Today opens on the day: the greeting, the date and the four numbers sit at the top as one hero (.j10-hero, look10.js
       moves .greet/.hud/.worklist there) — big tabular numbers, two per row on a phone.
   2 · Tiles with a face: every Today tile carries its card's own live line (.tj-s, look10.js) under the name.
   3 · Status you can read at a glance: in Work orders and Invoices rows the status words are colored chips (amber = waiting
       on you, red = late, green = done), the amount is bold and tabular on the right, the date stays quiet.
   4 · One customer, one color: the initials coin takes a hue from the name (look10.js sets --avh) in the Customers list,
       Right now, Work orders and Invoices rows (.j10-av), so Dana Ruiz is the same blue-green everywhere.
   5 · Rhythm and feedback: group headers stick under look6's slim bar while their list scrolls (--j10-top, look10.js); a tap
       presses a button, a tile or a row (120 ms); one gap between cards. Reduced-motion phones get none of the motion.
   ============================================================================= */

/* ---- 1 · Today at a glance -------------------------------------------------------------------------------------- */
html:not(.nolook10) body #main .j10-hero{display:block;margin:.55rem 0 .75rem;padding:.9rem 1rem .9rem;border-radius:18px;
  background:linear-gradient(180deg,rgba(21,39,58,.92),rgba(12,24,38,.96));box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;overflow:hidden}
html:not(.nolook10) body #main .j10-hero::before{content:"";position:absolute;inset:-40% -20% auto auto;width:60%;height:120%;
  background:radial-gradient(closest-side,rgba(255,106,26,.18),transparent 70%);pointer-events:none}
html:not(.nolook10) body #main .j10-hero div.greet{padding:0!important;margin:0!important;position:relative;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}   /* beats look-today's boxed greet */
html:not(.nolook10) body #main .j10-hero .greet .hi{font-size:1.55rem;line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
html:not(.nolook10) body #main .j10-hero .greet .sub{margin-top:.3rem;font-size:.86rem;color:var(--ink2)}
html:not(.nolook10) body #main .j10-hero .j10-date{display:block;margin:0 0 .35rem;font:700 .66rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--or-lt)}
html:not(.nolook10) body #main .j10-hero .hud{margin:.8rem 0 0!important;background:transparent!important;border:0!important;box-shadow:none!important;
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row!important;grid-auto-columns:auto!important;gap:.45rem!important;overflow:visible!important}   /* beats look9's one-row grid (grid-auto-flow:column) */
html:not(.nolook10) body #main .j10-hero .hud .hud-r{align-items:flex-start!important;justify-content:center!important;min-height:64px;padding:.55rem .7rem!important;
  border-radius:14px!important;border:0!important;background:rgba(5,9,15,.42);box-shadow:inset 0 0 0 1px var(--line2);gap:.15rem!important;text-align:left}
html:not(.nolook10) body #main .j10-hero .hud .hud-r+.hud-r{border-left:0!important}   /* look9 drew a divider between cells */
html:not(.nolook10) body #main .j10-hero .hud .hud-r b{font-size:1.65rem!important;line-height:1!important;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
html:not(.nolook10) body #main .j10-hero .hud .hud-r{font-size:.74rem;color:var(--ink2);line-height:1.2}
html:not(.nolook10) body #main .j10-hero .hud .hud-r.hud-need:not(.clear){background:rgba(255,106,26,.12);box-shadow:inset 0 0 0 1px rgba(255,106,26,.45)}
html:not(.nolook10) body #main .j10-hero .worklist{margin:.6rem 0 0!important}
html:not(.nolook10) body #main .j10-hero .worklist .b{width:100%}
@media (min-width:600px){
  html:not(.nolook10) body #main .j10-hero .hud{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* the first-week screen keeps its own Today (starter.js hides the hud there); the hero follows it */
html:not(.nolook10) body.st-on:not(.st-hud) #main .j10-hero .hud,html:not(.nolook10) body.st-on:not(.st-hud) #main .j10-hero .worklist{display:none!important}

/* ---- 2 · tiles with a face --------------------------------------------------------------------------------------- */
html:not(.nolook10) body #main .tj-grid .tj-c.tj-t{flex-wrap:nowrap;align-items:center;min-height:52px;padding:.35rem .7rem .35rem .6rem;border-radius:16px}
html:not(.nolook10) body #main .tj-grid .tj-c.tj-t .tj-n{display:flex;flex-direction:column;gap:.1rem;line-height:1.15;-webkit-line-clamp:unset;overflow:visible}
html:not(.nolook10) body #main .tj-grid .tj-c.tj-t .tj-s{display:block;font-size:.7rem;line-height:1.15;font-weight:600;color:var(--quiet,#8FA6BD);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-variant-numeric:tabular-nums}
html:not(.nolook10) body #main .tj-grid .tj-c.tj-t .tj-s.hot{color:var(--or-lt)}
html:not(.nolook10) body #main .tj-grid .tj-c.tj-t .tj-s:empty{display:none}

/* ---- 3 · status you can read at a glance ------------------------------------------------------------------------ */
html:not(.nolook10) body #main .job .bd .inv-st span,html:not(.nolook10) body #main .j10-st{display:inline-flex;align-items:center;gap:.3rem;
  min-height:22px;padding:.1rem .55rem;border-radius:999px;font-size:.7rem;font-weight:700;line-height:1.2;letter-spacing:.01em;
  background:rgba(255,194,77,.14);color:#FFD27A;box-shadow:inset 0 0 0 1px rgba(255,194,77,.35);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook10) body #main .j10-st.late,html:not(.nolook10) body #main .job .bd .inv-st span.late{background:rgba(255,107,94,.14);color:#FFB3A8;box-shadow:inset 0 0 0 1px rgba(255,107,94,.4)}
html:not(.nolook10) body #main .j10-st.ok,html:not(.nolook10) body #main .job .bd .inv-st span.ok{background:rgba(62,213,152,.14);color:#B8F5D6;box-shadow:inset 0 0 0 1px rgba(62,213,152,.4)}
html:not(.nolook10) body #main .j10-st.quiet,html:not(.nolook10) body #main .job .bd .inv-st span.quiet{background:rgba(255,255,255,.06);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)}
html:not(.nolook10) body #main .j10-sub{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;margin-top:.35rem!important;opacity:1!important;font-size:.78rem}
html:not(.nolook10) body #main .j10-sub .j10-date{color:var(--muted);font-family:var(--mono);font-size:.68rem;letter-spacing:.04em}
html:not(.nolook10) body #main .j10-sub .j10-amt{margin-left:auto;font-weight:800;font-size:1rem;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
html:not(.nolook10) body #main .job .bd .nm+.sv,html:not(.nolook10) body #main .job .sv{font-variant-numeric:tabular-nums}
html:not(.nolook10) body #main .jobs .job .bd .inv-st{display:block!important;margin:.3rem 0 0!important}   /* the chip under the name, never under the amount (compact-b put it inline) */
html:not(.nolook10) body #main .jobs .job>.bd:first-child+.when{font-weight:800;font-size:1rem;font-family:inherit;color:var(--ink);font-variant-numeric:tabular-nums}
html:not(.nolook10) body #main .cb-amt,html:not(.nolook10) body #main .hud-r b,html:not(.nolook10) body #main .lx-s,html:not(.nolook10) body #main .tj-s{font-variant-numeric:tabular-nums}
html:not(.nolook10) body #main .job .bd>.amt,html:not(.nolook10) body #main .job .amt{font-variant-numeric:tabular-nums;font-weight:800}

/* ---- 4 · one customer, one color --------------------------------------------------------------------------------- */
html:not(.nolook10) body #main .av[style*="--avh"],html:not(.nolook10) body #main .j10-av{
  background:hsl(var(--avh,210) 42% 20%)!important;color:hsl(var(--avh,210) 85% 78%)!important;
  box-shadow:inset 0 0 0 1px hsl(var(--avh,210) 55% 38% / .9)!important;font-weight:800;letter-spacing:.02em}   /* beats look-docs' blue coin */
html:not(.nolook10) body #main .j10-av{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;font-size:.66rem;
  font-family:var(--mono);margin-right:.5rem;vertical-align:middle;text-transform:uppercase}
html:not(.nolook10) body #main .job .bd .nm.j10-has-av{display:inline-flex;align-items:center;gap:0}
html:not(.nolook10) body #main .j10-wo-name{display:inline-flex;align-items:center;gap:0;min-width:0}
html:not(.nolook10) body #main .rn-r .rn-h.j10-has-av{display:flex;align-items:center}

/* ---- 5 · rhythm and feedback ------------------------------------------------------------------------------------- */
html:not(.nolook10) body #main details.rmgrp>summary.cb-s{position:sticky;top:calc(var(--j10-top,56px) - 1px);z-index:5;
  background:linear-gradient(180deg,rgba(11,20,32,.97),rgba(11,20,32,.92));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html:not(.nolook10) body #main .h.j6-hi{position:sticky;top:calc(var(--j10-top,56px) - 1px);z-index:5;background:linear-gradient(180deg,rgba(5,9,15,.96),rgba(5,9,15,.9));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding-top:.35rem;padding-bottom:.35rem;margin-top:.5rem!important}
html:not(.nolook10) body #main .cb-body,html:not(.nolook10) body #main .bc{scroll-margin-top:calc(var(--j10-top,56px) + 8px)}
@media (prefers-reduced-motion:no-preference){
  html:not(.nolook10) body .b,html:not(.nolook10) body .tj-c,html:not(.nolook10) body .tb,html:not(.nolook10) body .je2-tb,html:not(.nolook10) body #main .person,
  html:not(.nolook10) body #main .job,html:not(.nolook10) body #main .lx-t,html:not(.nolook10) body #main .rn-r{transition:transform .12s ease,filter .12s ease}
  html:not(.nolook10) body .b:active,html:not(.nolook10) body .tj-c:active,html:not(.nolook10) body .je2-tb:active,html:not(.nolook10) body #main .lx-t:active{transform:scale(.965)}
  html:not(.nolook10) body #main .person:active,html:not(.nolook10) body #main .job:active,html:not(.nolook10) body #main .rn-r:active{filter:brightness(1.12)}
  html:not(.nolook10) body #tabbar .tb:active{transform:translateY(1px)}
}
html:not(.nolook10) body #main>.bc+.bc,html:not(.nolook10) body #main>details.rmgrp+details.rmgrp{margin-top:.6rem}