/* =============================================================================
   look9.css — v356 · 5 major upgrades to the look of the dashboard · 10 Oct 2026
   Joe, 7:47am: "I'd like you to make 5 major upgrades to the look for the dashboard please" (no preference on the picks).
   The LAST stylesheet, after compact-a.css, so it wins on specificity ties. Upgrades 2 (tiles) and 5's Right now card are
   in board.js / app.js; this file carries 1 (room), 3 (one card style), 4 (color) and the Today strip of 5.

   Measured before (bench, 390×844, a free-week account on Today): the install note 77px + the status strip 111px + the
   header 185px + the trial banner = the work started at y≈431, past half the screen. Other tabs: ~40%.

   The console language (navy, orange, mono labels, the chamfer cut) stays — the brand lock of 3 Sep 2026.
   ========================================================================= */

/* ---------------------------------------------------------------- 4 · color tokens ---- */
:root{
  --do:var(--or);            /* the one "do this" color: primary buttons, the active tab, the + */
  --do-ink:#1A0E06;          /* type on --do (14:1) */
  --money-in:#3ED598;        /* paid, coming in */
  --money-out:#FF6B5E;       /* late, short */
  --money-due:#FFC24D;       /* due soon */
  --quiet:#8FA6BD;           /* a count that is a size, not a to-do (4.9:1 on the panel) */
  --pill-bg:rgba(255,255,255,.06);
}

/* ---------------------------------------------------------------- 1 · room ---- */
/* the install note: one line, 44px, the sentence cut with … */
html:not(.nolook9) body .install{min-height:44px;padding:.15rem .9rem;gap:.5rem;align-items:center}
html:not(.nolook9) body .install .tx{flex:1 1 auto;min-width:0;font-size:.76rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html:not(.nolook9) body .install .b.sm{min-height:44px;padding:0 .6rem;font-size:.72rem}
html:not(.nolook9) body .install .x{min-width:44px;min-height:44px}

/* the trial banner: one line — the days left and Keep Jetsy; the end date and the code sit under it in small type,
   on ONE line, cut with … (tap the banner to read it all: look9.js adds .j9-open) */
html:not(.nolook9) body .jtrial-ban{padding-top:calc(env(safe-area-inset-top,0px) + .35rem)!important;padding-bottom:.35rem!important;gap:.5rem;min-height:48px;align-items:center!important;cursor:pointer}
html:not(.nolook9) body .jtrial-ban .jtrial-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:0}
html:not(.nolook9) body .jtrial-ban .jtrial-tx b{font-size:.84rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* the Spanish title is longer: two lines before it is cut */
html:not(.nolook9) body .jtrial-ban .jtrial-tx>span,html:not(.nolook9) body .jtrial-ban .jtrial-code{display:inline;font-size:.72rem;line-height:1.3;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
html:not(.nolook9) body .jtrial-ban .jtrial-tx>span{display:block}
html:not(.nolook9) body .jtrial-ban .jtrial-tx>span.jtrial-code{display:none}
html:not(.nolook9) body .jtrial-ban:not(.loud) .jtrial-fw{display:none}   /* in the last two days (loud) the forwarding note stays in view */
html:not(.nolook9) body .jtrial-ban .jtrial-go{flex:none;min-height:44px;padding:0 .8rem;font-size:.8rem;display:inline-flex;align-items:center;border-radius:var(--cut-sm)}
html body .jtrial-ban.j9-open{max-height:none}
html body .jtrial-ban.j9-open .jtrial-tx b{-webkit-line-clamp:none;display:block}
html body .jtrial-ban.j9-open .jtrial-tx>span{white-space:normal}
html body .jtrial-ban.j9-open .jtrial-tx>span.jtrial-code{display:block;white-space:normal}
html body .jtrial-ban.j9-open .jtrial-fw{display:block}

/* the status strip (no phone / not connected / no live calls / sample): the kicker on the left, the sentence clamped to
   two lines beside it; tap to read it all. The demo-live state stays collapsed (look6). */
/* app.css gives the strip a ::before spacer (flex 0 0 100%, the clock band) — it keeps its own row; the kicker and the
   sentence share the next one (the sentence's basis is 0, so it never wraps under the kicker) */
html:not(.nolook9) body .demobar:not(.demo-live){display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem;padding:.3rem .9rem .3rem;min-height:44px;cursor:pointer}
html:not(.nolook9) body .demobar:not(.demo-live)>b{flex:0 0 auto;max-width:7.2rem;font-size:.58rem;line-height:1.25;white-space:normal}
html:not(.nolook9) body .demobar:not(.demo-live)>span{flex:1 1 0%;min-width:0;font-size:.76rem;line-height:1.3;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the cue that there is more: a small chevron on the right that turns when open */
html:not(.nolook9) body .demobar:not(.demo-live)::after,html:not(.nolook9) body .jtrial-ban::after{content:"";flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--quiet);border-bottom:2px solid var(--quiet);transform:rotate(45deg);margin:0 .2rem .25rem 0;transition:transform .15s}
html:not(.nolook9) body .demobar:not(.demo-live).j9-open::after,html:not(.nolook9) body .jtrial-ban.j9-open::after{transform:rotate(-135deg);margin-bottom:-.2rem}
html:not(.nolook9) body .demobar:not(.demo-live).j9-open>span{display:block!important;-webkit-line-clamp:none;overflow:visible}

/* the owner's company chips (multi-co, #co-bar): 36px chips instead of 56px.
   v357 · Joe 10 Oct 2:10pm "upgrade this to show all companies without having to scroll": the row wraps — every company
   on screen, two short rows on a phone, one on a tablet — instead of a side-scroll that hid the last chips */
html body #co-bar{padding:6px 12px!important;gap:5px!important;flex-wrap:wrap!important;overflow:visible!important;justify-content:flex-start}
html body #co-bar>*{flex:0 1 auto!important;min-height:40px!important;padding:0 .55rem!important;font-size:.76rem!important;white-space:nowrap}
html body #co-bar img,html body #co-bar svg{width:18px!important;height:18px!important}

/* the Today toolbar (Collapse all · Cards): a small row, right-aligned, 32px */
html body #main .tc-bar{margin:.1rem 0 .45rem}
html body #main .tc-bar .b,html body #main .tc-bar button{min-height:44px;padding:0 .6rem;font-size:.72rem}

/* the header on Today / Setup (look7 keeps the full header there): tighter rows */
html body header.appbar .in{padding-top:.45rem;padding-bottom:.45rem;row-gap:.3rem}
html body header.appbar .who{row-gap:.25rem}

/* v358 R-P-004 (Joe 10 Oct 11:12am "find everything that isn't working properly"): "Desert Sun Pain…" — the company name
   was cut to fit beside the plan pill. The name may take two lines now and the plan pill moves under it when it has to;
   a name is never cut. */
html body header.appbar .who{flex-wrap:wrap}
html body header.appbar .who .co{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;flex:1 1 auto}
/* … and on a phone the plan pill steps aside when the plan's own chat button in the bar already names the plan ("Jetsy 2.0") */
@media (max-width:430px){html body header.appbar:has(#j2btn.pc-btn) .who .pl{display:none}}

/* v358 R-P-041: on a 375×667 phone the work started at y≈344 under four strips. While the trial banner is up, the status strip
   under it said again what the header's chip says ("NOT CONNECTED", "CRM ONLY"); on a short phone it steps aside (the chip,
   Setup and the trial banner still say it all). */
@media (max-height:700px) and (max-width:430px){html body .jtrial-ban~.demobar{display:none!important}}

/* v358 R-P-076: the open card's bar holds "← Todas las tarjetas", the card's name and "Quitar de mi página" in Spanish; the
   name was squeezed until its words broke ("Respa/ldos"). When the three do not fit, Quitar moves to a second row (right). */
html body #lxbar.lx-bar{flex-wrap:wrap;row-gap:.35rem}
html body #lxbar.lx-bar>span{flex:1 1 6.5rem}
html body #lxbar.lx-bar>.cmk-bar{margin-left:auto}

/* v358 R-P-003: v356 promised one button scale (44px); these kept their small look and got no bigger tap. Each keeps its size
   on screen and gets an invisible band, so the tap is 44px — the same trick as Setup's switches (app.css). */
html body header.appbar .in>a.b.sm,html body header.appbar .in>button.b.sm,html body header.appbar #langsw{position:relative}
html body header.appbar .in>a.b.sm::before,html body header.appbar .in>button.b.sm::before,html body header.appbar #langsw::before{content:"";position:absolute;left:-2px;right:-2px;top:-6px;bottom:-6px}
html body .tc-chev::before{content:"";position:absolute;top:-7px;right:0;bottom:-7px;left:-14px;border-radius:50%}   /* the band grows left, never past the card's right edge (a chevron on the edge made Tonight 4px wider than the screen, t_v358_fixR2 sizes) */
html body .m5 .m5-sw button.m5-tg::before{content:"";position:absolute;top:-7px;right:-2px;bottom:-7px;left:-2px}
html body .m5 .m5-bt button{min-height:44px}
html body footer.appfoot a{display:inline-flex;align-items:center;min-height:44px;padding:0 .15rem;vertical-align:middle}
html body footer.appfoot a[href="delete-account.php"]{margin-left:1rem}

/* the floating + (menubar.js) sat half over the middle of the tab bar and on the last row of every list: it moves to
   the right, above the tab bar, and the page gets room under its last row */
html body .jmb-plus{left:auto!important;right:14px!important;margin-left:0!important;bottom:calc(var(--tabh,4.4rem) + 12px + env(safe-area-inset-bottom,0px))!important;width:54px!important;height:54px!important;font-size:1.9rem!important}
html body nav.tabs.jmb-slim ~ .jmb-plus{width:46px!important;height:46px!important;font-size:1.6rem!important}
/* gate (stuck window): the + stays where a thumb finds it, just above the tab bar; while the Ask pill still floats in that
   corner (a page without the app bar — app.js moves it into the bar on every page that has one) the PILL lifts above the + */
html.j2-on:not(.j2-bar) body #j2btn.j2-btn{bottom:calc(var(--j2-bottom,calc(var(--tabh,4.4rem) + 12px)) + 66px)!important}
html body main#main.shell{padding-bottom:calc(var(--tabh,4.4rem) + 84px + env(safe-area-inset-bottom,0px))!important}

/* ---------------------------------------------------------------- v359 · forms · one box per line on a phone ---- */
/* v359 · forms · Joe 10 Oct 11:12am "…easy to use crm dashboard": on a phone (≤480px) a form is one box per line with its
   label above it. Measured on Desert Sun Painting at 390×844: an open job had 11 rows of two boxes side by side, the
   narrowest 94px wide ("Rosa Elena Qui", "(480) 555-020" cut off). The two-box rows (.jf2), Measure a room (.rm-g) and
   the time sheet's From/To (.jcc-f) stack; a .brow holding a typed box and another box gives the typed one its own line
   (its small amount box and its buttons stay together under it); .jf2-1c is what app/forms.js marks when some other row
   still puts two typed boxes on one line. The small boxes inside a sentence (.nw: "Remind me [3] days") stay put. */
@media (max-width:480px){
  html:not(.nolook9) body .jf2,html:not(.nolook9) body .rm-g,html:not(.nolook9) body .jcc-f{grid-template-columns:minmax(0,1fr)}
  html:not(.nolook9) body .brow:has(> :is(input:not([type]),input[type=text],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=number],textarea):not(.nw)):has(> :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]),select,textarea) ~ :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]),select,textarea))>:is(input:not([type]),input[type=text],input[type=search],input[type=email],input[type=tel],input[type=url],input[type=number],textarea):not(.nw){flex:1 1 100%!important;max-width:none!important}
  html:not(.nolook9) body .jf2-1c{flex-wrap:wrap!important;grid-template-columns:minmax(0,1fr)!important}
  html:not(.nolook9) body .jf2-1c>:is(input,textarea,select,label,.jf,div){flex:1 1 100%!important;max-width:none!important;min-width:0!important}
  /* Setup's rows (words on the left, the box on the right) gave a typed box 128–152px ("Area you cover"); it goes under its words */
  html:not(.nolook9) body .grp>.r:has(>.ctl>:is(input:not([type]),input[type=text],input[type=tel],input[type=email],input[type=number])){flex-wrap:wrap;row-gap:.45rem}
  html:not(.nolook9) body .grp>.r>.ctl:has(>:is(input:not([type]),input[type=text],input[type=tel],input[type=email],input[type=number])){flex:1 1 100%}
  html:not(.nolook9) body .grp>.r>.ctl>:is(input:not([type]),input[type=text],input[type=tel],input[type=email],input[type=number]){box-sizing:border-box;width:100%;max-width:none!important;min-height:44px;text-align:left}
}

/* ---------------------------------------------------------------- 3 · one card style ---- */
/* every card header: the icon tile (look6), the title in one weight and size, the readout on the right in the mono
   label style, one line each. Applies to board cards, the Today cards, and the work tabs' .h headings. */
html body #main section.bc>.bc-hd{display:flex;align-items:center;gap:.6rem;min-height:48px;padding:.55rem .9rem .5rem;border-bottom:1px solid var(--line2)}
html body #main section.bc>.bc-hd h2{flex:1 1 auto;min-width:0;margin:0;font:700 .9rem/1.25 Poppins,-apple-system,system-ui,sans-serif;letter-spacing:0;text-transform:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* two lines before a long (Spanish) title is cut */
html body #main section.bc>.bc-hd .sub{flex:0 1 auto;min-width:0;max-width:46%;font:600 .62rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:right}
html body #main .h{display:flex;align-items:center;gap:.6rem;min-height:44px;margin:.9rem 0 .5rem}
/* look7 (v274) set these headings in mono caps with !important; the one style is the cards' — sans, sentence case */
html body main#main .h>h2{flex:1 1 auto;min-width:0;margin:0;font-family:Poppins,-apple-system,system-ui,sans-serif!important;font-size:.9rem!important;font-weight:700!important;line-height:1.25!important;letter-spacing:0!important;text-transform:none!important;white-space:normal;overflow:hidden}
html body main#main .h>h2::after{content:none!important}
html body #main .h .n{flex:0 1 auto;font:600 .62rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);white-space:nowrap}
/* one button scale: a button is 44px, a small one 40px, both with the same corners; the primary is the one orange */
html body #main .b{min-height:44px;border-radius:var(--cut-sm);font-weight:700}
html body #main .b.sm{min-height:44px;font-size:.78rem;padding:0 .7rem}   /* a small button is still a 44px tap target (the playbook rule) */
html body #main .b.pri{background:var(--do);color:var(--do-ink)}
html body #main .b:not(.pri):not(.danger):not(.ring){background:var(--pill-bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
/* one pill: small caps mono, quiet by default, colored only by state */
html body #main .chip,html body #main .pill,html body #main .jnt-sec,html body #main .cmk-new{border-radius:var(--cut-sm);font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:.32rem .5rem;display:inline-flex;align-items:center;gap:.3rem}
html body #main .chip:not([class*=" "]),html body #main .pill:not([class*=" "]){background:var(--pill-bg);color:var(--quiet)}
/* one line color, one card ground */
html body #main section.bc{border-color:var(--line2)}
html body #main section.bc .bc-bd>.r+.r,html body #main .ld+.ld,html body #main .jb+.jb{border-top-color:var(--line2)}

/* ---------------------------------------------------------------- 4 · color that means something ---- */
/* orange is for "do this": counts that are only a size go quiet; the HUD numbers read in ink, only "needs you" orange */
html body #main .hud .hud-r b{color:var(--ink)}
html body #main .hud .hud-need:not(.clear) b{color:var(--do)!important}
html body #main .hud .hud-need.clear b{color:var(--quiet)!important}   /* a zero is not a to-do (look2 set every need count orange) */
html body #main .hud .hud-list b{color:var(--ink)}
html body #main .lx-b{background:var(--do);color:var(--do-ink)}
/* money: paid / coming in green, late red, due soon amber, owed-not-late in ink */
html body #main .chip.inv-od,html body #main .pill.od,html body #main .pill.late,html body #main .chip.late{background:rgba(255,107,94,.14);color:var(--money-out)}
html body #main .chip.paid,html body #main .pill.paid,html body #main .ipr-paid,html body #main .chip.booked{background:rgba(62,213,152,.14);color:var(--money-in)}
html body #main .pill.due,html body #main .chip.due,html body #main .jdoc-due{background:rgba(255,194,77,.14);color:var(--money-due)}
html body #main .pill.watch,html body #main .pill.pend,html body #main .chip.message{background:rgba(79,168,255,.14);color:var(--blue-lt)}
html body #main .pill.new,html body #main .chip.new{background:rgba(79,168,255,.14);color:var(--blue-lt)}
/* the Invoices tab: an amount owed reads in ink; a late one in red (the row carries the Overdue chip); a paid one green */
@supports selector(:has(a)){
  html body #main .jobs .job .when{color:var(--ink)!important}
  html body #main .jobs .job:has(.chip.inv-od) .when{color:var(--money-out)!important}
  html body #main .jobs .job:has(.ipr-paid) .when,html body #main .jobs .job:has(.chip.paid) .when{color:var(--money-in)!important}
}

/* ---------------------------------------------------------------- 5 · the Today strip ---- */
/* the four counters become one strip: equal cells, the number over its label, 60px, no card look */
html body #main .hud{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0!important;margin:.5rem 0 .6rem!important;padding:0;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--cut);overflow:hidden}
html body #main .hud::after,html body #main .hud::before{content:none!important}   /* look2's ::after spacer would be a grid cell */
html body #main .hud .hud-r.asof{display:none!important}
html body #main .hud .hud-r{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:.1rem!important;min-height:60px;padding:.5rem .3rem!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:.6rem!important;line-height:1.15;text-align:center;color:var(--quiet);white-space:normal}
html body #main .hud .hud-r+.hud-r{border-left:1px solid var(--line2)}
html body #main .hud .hud-r b{font-size:1.25rem!important;line-height:1.1;font-weight:800}
html body #main .hud .hud-r::after,html body #main .hud .hud-r::before{content:none!important}