/* look12-nav.css — v463 · C. Glass navigation (Joe 22 Oct 2026 9:42am "Make 5 major upgrades to the look of our dashboard make it look
   like a billion dollar crm … think of yourself as a world class software engineer").
   The menu bar at the bottom (nav.tabs / #tabbar, menubar.js, easy2.js's five tabs + More), the slim bar at the top of a work tab
   (look6's #j6bar), menubar's + and the owner's company row (#co-bar) become one family of frosted glass:
     · the bars: the page blurred behind them (26 px, saturate 180%), a hairline on the edge that meets the page;
     · the tab you are on: its icon filled in, a soft orange pill behind it, the name in the same orange; the others quiet;
       names in plain words, 11 px semibold, the phone's own font — no spaced capitals;
     · badges round, 18 px, on the icon's corner;
     · the company row ONE line that slides sideways (never two rows), the picked company white with dark type, and a soft fade on
       the edge that has more;
     · the top bar's name is a title (17 px), its buttons glass circles, its + the one orange disc.
   PAINT ONLY. Nothing here moves a bar or changes its height: tabs.js measures nav.tabs and fixes its place in the iPhone app
   (v446–v455), menubar.js slims it to icons on a finger's scroll (v461), look6/look7 size #j6bar (50 px) and pad the page by it.
   Every box keeps its size: the pill is painted by the icon's own padding (look2's), enlarged with a negative margin; the names
   keep look2's line box. The one size that changes on purpose is the company row: one line instead of two.
   The bar keeps its own backdrop-filter (menubar.js r2 turned it off on phones because the bar was 97 % solid then — it is glass
   now); tabs.js only ever looks at the bar's ANCESTORS for a backdrop-filter, never at the bar itself.
   The filled icons: app.js's TABS icons are line drawings; the tab you are on fills its shapes, matched by their own path data
   (an icon this file does not know stays a line drawing). The cut-outs (the $ on Invoices, the check on Work orders, the gear's
   hole) are drawn in the pill's own color (--j12n-knock).
   Light mode (html.je-light): easy2.js flips the literal colors below like every other rule; the rules that name je-light are
   written for the light screen and are left alone by it. Yaya's pink dashboard (body.jgirly) keeps its pink.
   Off switch: localStorage nolook12 = 1 (html.nolook12): every rule is under html:not(.nolook12). */

/* ------------------------------------------------------------------ the roles this file paints with ---- */
html:not(.nolook12){
  --j12n-glass:var(--j12-glass,rgba(12,17,27,.66));
  --j12n-solid:#0B1019;                         /* the glass with nothing behind it (reduced transparency) */
  --j12n-blur:blur(26px) saturate(180%);
  --j12n-edge:rgba(255,255,255,.08);            /* the hairline where a bar meets the page */
  --j12n-idle:#8390A4;                          /* a tab you are not on: 6:1 on the glass */
  --j12n-on:#FF8A3D;                            /* the tab you are on (the brand's orange, lifted for the dark glass) */
  --j12n-pill:rgba(255,106,26,.16);             /* the soft pill behind its icon */
  --j12n-knock:#311C15;                         /* the pill's own color, for the cut-outs in a filled icon */
  --j12n-ring:rgba(11,16,25,.9);                /* the ring that lifts a dot off the icon */
  --j12n-chip:rgba(255,255,255,.06);
  --j12n-chip-on:#F5F7FB; --j12n-chip-on-ink:#0B1220;
}
/* a company or a customer's own color (JetsyLook.paint sets --or on <html>) tints the tab you are on, as it did before */
@supports (color:color-mix(in srgb,red 50%,blue)){
  html:not(.nolook12){
    --j12n-on:color-mix(in srgb,var(--or,#FF6A1A) 82%,#fff);
    --j12n-pill:color-mix(in srgb,var(--or,#FF6A1A) 16%,transparent);
    --j12n-knock:color-mix(in srgb,var(--or,#FF6A1A) 16%,#0A0D14);
  }
}

/* ======================================================================= 1 · the menu bar (nav.tabs) ==== */
html:not(.nolook12) body nav.tabs{
  background:var(--j12n-glass)!important;
  -webkit-backdrop-filter:var(--j12n-blur)!important;backdrop-filter:var(--j12n-blur)!important;
  border-top-color:var(--j12n-edge)!important;           /* the 1 px border stays (its width is part of the bar's height) */
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.55)!important;
}
html:not(.nolook12) body nav.tabs .in{background:transparent!important}
/* the tabs: quiet, the phone's own type, plain words */
html:not(.nolook12) body nav.tabs #tabbar .tb{
  color:var(--j12n-idle)!important;background:transparent!important;box-shadow:none!important;
  font-family:var(--j12-sf)!important;-webkit-tap-highlight-color:transparent;
}
html:not(.nolook12) body nav.tabs #tabbar .tb::before{content:none!important}   /* the old orange line on the top edge */
html:not(.nolook12) body nav.tabs #tabbar .tb>span:not(.badge):not(.jmb-b):not(.jmb-dot){
  font-family:var(--j12-sf)!important;font-weight:600!important;font-size:.6875rem;letter-spacing:-.003em;
  line-height:.792rem;   /* look2's own line box (.66rem × 1.2): a tab is never taller — five tabs keep their names while slim (easy2) */
  text-transform:none!important;text-shadow:none!important;color:inherit!important;font-variant-ligatures:none;
  -webkit-font-smoothing:antialiased;
}
html:not(.nolook12) body nav.tabs #tabbar .tb svg{
  filter:none!important;
  transition:background-color var(--j12-tq,160ms) var(--j12-spring,ease),color var(--j12-tq,160ms) var(--j12-spring,ease);
}
/* the tab you are on: the name and the icon in the orange, the pill behind the icon (look2's own padding, painted bigger with a
   negative margin: the icon's box stays 48 × 24, the pill reads 52 × 30) */
html:not(.nolook12) body nav.tabs #tabbar .tb[aria-selected="true"]{color:var(--j12n-on)!important}
html:not(.nolook12) body nav.tabs #tabbar .tb[aria-selected="true"]>span:not(.badge):not(.jmb-b):not(.jmb-dot){color:var(--j12n-on)!important}
html:not(.nolook12) body nav.tabs:not(.jmb-slim) #tabbar .tb svg{padding:5px 16px;margin:-3px -2px}
html:not(.nolook12) body nav.tabs #tabbar .tb[aria-selected="true"] svg{background:var(--j12n-pill)!important;color:var(--j12n-on)!important;border-radius:999px}
/* the slim bar (menubar.js, a finger scrolling down): icons only, 19 px in a 37 × 23 box — the pill painted 43 × 27 in the same box */
html:not(.nolook12) body nav.tabs.jmb-slim #tabbar .tb svg{padding:4px 12px!important;margin:-2px -3px}

/* the filled icon of the tab you are on (app.js TABS, by their own path data) */
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="m3 12 2-2 4 4"],
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M22 16.9v3"],
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M12.5 22H18"],
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M13.4 15.6"],
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg rect[x="5"][y="3"][width="14"],
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M14 2H6a2"],
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M16 21v-2"],
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg circle[cx="9"][cy="7"],
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M22 21v-2"],
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M16 3.1a4"],
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M19.4 15a1.7"]{fill:currentColor}
/* …its cut-outs, in the pill's own color: Proposals' fold and the pen's edge, Invoices' fold and $, Work orders' check and clip slot,
   the gear's hole */
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M14 2v5h6"],
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M14 2v6h6"],
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M12 18v-6"],
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M9.5 13.5h3.2"],
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="m9 13 2 2 4-4"]{stroke:var(--j12n-knock);fill:none}
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M13.4 15.6"]{stroke:var(--j12n-knock);stroke-width:1.5}
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M9 3h6v3H9z"]{fill:var(--j12n-knock)}
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg circle[cx="12"][cy="12"][r="3"]{fill:var(--j12n-knock);stroke:var(--j12n-knock);stroke-width:1.2}
/* Business: the bars go bold (a filled chart), the axis stays a line */
html:not(.nolook12) body #tabbar .tb[aria-selected="true"] svg path[d^="M7 15V9"]{stroke-width:3.4}
/* More (easy2.js): its grid of four, filled when one of its tabs is open */
html:not(.nolook12) body #tabbar .tb.je-more[aria-selected="true"] svg rect[rx="1.5"]{fill:currentColor}

/* badges: round, 18 px, on the icon's top-right corner — Today's "needs you" count (app.js), menubar's live counts (.jmb-b: amber
   = waiting on you, green = done), easy2's More dot and menubar's changed-since-you-looked dot */
html:not(.nolook12) body nav.tabs #tabbar .tb .badge,
html:not(.nolook12) body nav.tabs #tabbar .tb .jmb-b{
  position:absolute!important;top:.125rem!important;left:50%!important;right:auto!important;transform:translateX(.3125rem)!important;
  display:grid!important;place-content:center;box-sizing:border-box;min-width:1.125rem!important;height:1.125rem!important;padding:0 .3125rem!important;
  border-radius:999px!important;border:0!important;
  font:700 .6875rem/1 var(--j12-sf)!important;font-variant-numeric:tabular-nums;letter-spacing:0!important;text-shadow:none!important;
  background:linear-gradient(180deg,#FF8A3D,#FF6A1A)!important;color:#fff!important;
  box-shadow:0 0 0 2px var(--j12n-ring),0 2px 6px rgba(0,0,0,.35)!important;
  pointer-events:none;z-index:1;
}
html:not(.nolook12) body nav.tabs #tabbar .tb .jmb-b.warm{background:linear-gradient(180deg,#FCD34D,#FBBF24)!important;color:#2A1D05!important}
html:not(.nolook12) body nav.tabs #tabbar .tb .jmb-b.cool{background:linear-gradient(180deg,#6EE7B7,#34D399)!important;color:#05210F!important}
html:not(.nolook12) body nav.tabs.jmb-slim #tabbar .tb .badge,
html:not(.nolook12) body nav.tabs.jmb-slim #tabbar .tb .jmb-b{top:-.0625rem!important;transform:translateX(.25rem) scale(.88)!important}
html:not(.nolook12) body nav.tabs #tabbar .tb .jmb-dot,
html:not(.nolook12) body nav.tabs #tabbar .tb.je-more .je-md{
  width:8px!important;height:8px!important;border-radius:50%!important;background:var(--j12-or,#FF6A1A)!important;
  box-shadow:0 0 0 2px var(--j12n-ring)!important;
}

/* ================================================================== 2 · the slim bar at the top (#j6bar) ==== */
html:not(.nolook12) body #j6bar.j6-bar{
  background:var(--j12n-glass)!important;
  -webkit-backdrop-filter:var(--j12n-blur);backdrop-filter:var(--j12n-blur);
  box-shadow:0 1px 0 var(--j12n-edge),0 10px 30px -22px rgba(0,0,0,.75)!important;
}
/* the tab's name is the bar's title: 17 px semibold, plain words; the orange dash before it goes; the ▾ that says it opens Go to
   (menubar.js v3 · 11) is a small chevron */
html:not(.nolook12) body #j6bar .j6-tab{
  font:650 1.0625rem/1.375rem var(--j12-sf)!important;letter-spacing:-.012em!important;text-transform:none!important;
  color:var(--j12-t1,#F5F7FB)!important;gap:.4rem;
}
html:not(.nolook12) body #j6bar .j6-tab::before{display:none!important}
html:not(.nolook12) body #j6bar .j6-tab b{font-weight:inherit}
html:not(.nolook12) body #j6bar .j6-tab::after{
  content:""!important;flex:0 0 auto;width:.4375rem;height:.4375rem;margin:-.25rem .15rem 0 .05rem!important;opacity:1!important;font-size:0!important;
  border-right:2px solid var(--j12-t3,#6E7B90);border-bottom:2px solid var(--j12-t3,#6E7B90);border-radius:0 0 2px 0;transform:rotate(45deg);
}
/* Joe's CEO tag on the slim bar keeps its gold (gold stays his), in the phone's type */
html:not(.nolook12) body #j6bar .j6-ceo{
  font:800 .625rem/1 var(--j12-sf)!important;letter-spacing:.06em!important;padding:.3rem .45rem!important;border-radius:999px!important;
  color:var(--j12-gold-ink,#2A1C05)!important;
  background:linear-gradient(135deg,var(--j12-gold1,#FBEFC0) 0%,var(--j12-gold2,#E2C26B) 45%,var(--j12-gold3,#B98A2E) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 6px rgba(201,162,74,.25)!important;
}
/* room for the title (Joe's bar read "W…": the mark, CEO, the live dot and four buttons left the name 17 px). On the owner's bar the
   mark shows the Jetsy head alone (the lockup's left 24 px — the app's icon; a company's logo is fitted whole into the same 24 px),
   and on every bar the answering dot sits on the mark's corner like a presence dot instead of taking a slot of its own. The bar's
   own box never changes (50 px, look6/look7). look12-nav.js steps the title down to 15 px before it is ever cut (.j12-tight). */
html:not(.nolook12) body #j6bar .j6-in{position:relative}
html:not(.nolook12) body #j6bar .j6-home{gap:.5rem!important}
html:not(.nolook12) body #j6bar .j6-home:has(.j6-ceo:not([hidden])) .j6-mark{width:24px!important;max-width:24px!important;overflow:hidden;border-radius:6px}
html:not(.nolook12) body #j6bar .j6-home:has(.j6-ceo:not([hidden])) .j6-mark img{max-width:none!important;flex:0 0 auto}
html:not(.nolook12) body #j6bar .j6-home:has(.j6-ceo:not([hidden])) .j6-mark img[style]{width:24px!important;max-width:24px!important;object-fit:contain!important;padding:1px!important;box-sizing:border-box}
/* the answering dot: the meaning green, on the mark's top corner (the Jetsy head's), ringed in the glass */
html:not(.nolook12) body #j6bar .j6-live{
  position:absolute;left:calc(.9rem + 17px);top:13px;margin:0!important;width:9px!important;height:9px!important;
  background:var(--j12-ok,#34D399);box-shadow:0 0 0 2px var(--j12n-ring),0 0 8px rgba(52,211,153,.55)!important;pointer-events:none;
}
html:not(.nolook12).jrp-msgs body #j6bar .j6-live{background:var(--j12-due,#FBBF24)!important;box-shadow:0 0 0 2px var(--j12n-ring),0 0 8px rgba(251,191,36,.5)!important}   /* callrec.js: taking messages */
html:not(.nolook12) body #j6bar.j12-tight .j6-tab{font-size:.9375rem!important;letter-spacing:-.008em!important}
/* its buttons (Note, +, ?, Find): glass circles drawn 36 px, a 4 px halo makes each 44 px to a thumb; the + is the orange disc */
html:not(.nolook12) body #j6bar .j6-in .j6-find,
html:not(.nolook12) body #j6bar .j6-in .j7-note,
html:not(.nolook12) body #j6bar .j6-in .je2-tb{
  position:relative;width:36px!important;min-width:36px!important;height:36px!important;border-radius:50%!important;
  background:var(--j12n-chip)!important;box-shadow:inset 0 0 0 1px var(--j12-stroke,rgba(255,255,255,.11))!important;
  color:var(--j12-t1,#F5F7FB)!important;-webkit-tap-highlight-color:transparent;
}
html:not(.nolook12) body #j6bar .j6-in .j6-find::before,
html:not(.nolook12) body #j6bar .j6-in .j7-note::before,
html:not(.nolook12) body #j6bar .j6-in .je2-tb::before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%}
html:not(.nolook12) body #j6bar .j6-in .j7-note{margin-right:.25rem}   /* 44 px apart, like the + and ? (easy2): no two halos overlap */
html:not(.nolook12) body #j6bar .j6-in .je2-tb.je2-help{font:650 1.0625rem/1 var(--j12-sf)!important}
html:not(.nolook12) body #j6bar .j6-in .j6-find svg{width:18px;height:18px}
html:not(.nolook12) body #j6bar .j6-in .j7-note .ji{width:18px;height:18px}
html:not(.nolook12) body #j6bar .j6-in .je2-tb.je2-plus,
html:not(.nolook12) body .jmb-plus{
  background:linear-gradient(180deg,var(--j12-or2,#FF8A3D) 0%,var(--j12-or,#FF6A1A) 100%)!important;color:#fff!important;
  font-weight:300!important;
}
html:not(.nolook12) body #j6bar .j6-in .je2-tb.je2-plus{box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(120,40,0,.25),0 6px 16px -6px rgba(255,106,26,.75)!important}
html:not(.nolook12) body .jmb-plus{box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(120,40,0,.25),0 12px 26px -10px rgba(255,106,26,.8)}   /* not !important: menubar's listening pulse animates it */
html:not(.nolook12) body #j6bar .j6-in .je2-tb.je2-plus{font-size:1.65rem!important;line-height:1!important}
@media (min-width:640px){
  html:not(.nolook12) body #j6bar .j6-in .j6-find,
  html:not(.nolook12) body #j6bar .j6-in .j7-note,
  html:not(.nolook12) body #j6bar .j6-in .je2-tb{width:40px!important;min-width:40px!important;height:40px!important}
  html:not(.nolook12) body #j6bar .j6-in .j6-find::before,
  html:not(.nolook12) body #j6bar .j6-in .j7-note::before,
  html:not(.nolook12) body #j6bar .j6-in .je2-tb::before{top:-2px;right:-2px;bottom:-2px;left:-2px}
}
/* menubar's own floating + (only drawn where the top bars have no +): the same orange disc, a soft glow instead of the dark ring;
   its listening pulse (.lis) is menubar's own and stays */
html:not(.nolook12) body .jmb-plus{border:0!important;-webkit-tap-highlight-color:transparent}
html:not(.nolook12) body .jmb-plus.lis{background:linear-gradient(180deg,#FF8A80,#F87171)!important}

/* ================================================================ 3 · the company row (#co-bar, the owner) ==== */
/* every company in view, no scrolling (Joe 10 Oct 2:10pm "show all companies without having to scroll" — look9 wraps them, v357):
   the capsules wrap onto a second line when they must; on the page's own ground, no strip. (v463 assembler: C's one sliding row
   would have hidden AZ Directory off the edge.) */
html:not(.nolook12) body #co-bar{
  flex-wrap:wrap!important;overflow:visible!important;justify-content:flex-start!important;
  gap:8px!important;padding:8px 16px!important;margin:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
html:not(.nolook12).j7-work body #co-bar{padding-top:10px!important}
html:not(.nolook12) body #co-bar::-webkit-scrollbar{display:none}
html:not(.nolook12) body #co-bar>button{
  position:relative;flex:0 0 auto!important;display:inline-flex!important;align-items:center;gap:7px;
  height:36px;min-height:36px!important;padding:0 14px 0 6px!important;margin:0!important;box-sizing:border-box;
  border:0!important;border-radius:999px!important;
  background:var(--j12n-chip)!important;box-shadow:inset 0 0 0 1px var(--j12-hair,rgba(255,255,255,.07))!important;
  color:var(--j12-t2,#A7B3C6)!important;font:600 .875rem/1 var(--j12-sf)!important;letter-spacing:-.006em!important;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--j12-tq,160ms) var(--j12-spring,ease),color var(--j12-tq,160ms) var(--j12-spring,ease);
}
html:not(.nolook12) body #co-bar>button.all{padding:0 16px!important}
html:not(.nolook12) body #co-bar>button::before{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px;border-radius:999px}   /* 44 px to a thumb */
html:not(.nolook12) body #co-bar>button[aria-pressed="true"]{
  background:var(--j12n-chip-on)!important;color:var(--j12n-chip-on-ink)!important;
  box-shadow:0 1px 1px rgba(0,0,0,.2),0 6px 16px -8px rgba(0,0,0,.6)!important;
}
html:not(.nolook12) body #co-bar>button:focus-visible{outline:2px solid var(--j12-or,#FF6A1A)!important;outline-offset:2px}
html:not(.nolook12) body #co-bar img{
  width:24px!important;height:24px!important;border-radius:50%!important;object-fit:cover;background:#fff;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
html:not(.nolook12) body #co-bar .j406-bdg{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;margin-left:1px;
  font:700 .6875rem/18px var(--j12-sf)!important;font-variant-numeric:tabular-nums;
  background:var(--j12-or,#FF6A1A)!important;color:#fff!important;
}
html:not(.nolook12) body #co-bar>button[aria-pressed="true"] .j406-bdg{background:var(--j12n-chip-on-ink)!important;color:#fff!important}
/* the edge that has more slides softly out (look12-nav.js marks it: j12-co-l / j12-co-r) */
html:not(.nolook12) body #co-bar.j12-co-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
html:not(.nolook12) body #co-bar.j12-co-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
html:not(.nolook12) body #co-bar.j12-co-l.j12-co-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}

/* ======================================================================================= light mode ==== */
html.je-light:not(.nolook12){
  --j12n-glass:rgba(255,255,255,.74);
  --j12n-solid:#F7F9FC;
  --j12n-edge:rgba(10,20,40,.10);
  --j12n-idle:#5F6B7E;                          /* 5:1 on the light glass */
  --j12n-on:#C2410C;
  --j12n-pill:rgba(255,106,26,.13);
  --j12n-knock:#FBE6DC;
  --j12n-ring:rgba(255,255,255,.95);
  --j12n-chip:rgba(10,20,40,.05);
  --j12n-chip-on:#0F1A2B; --j12n-chip-on-ink:#FFFFFF;
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  html.je-light:not(.nolook12){
    --j12n-on:color-mix(in srgb,var(--or,#FF6A1A) 74%,#000);
    --j12n-pill:color-mix(in srgb,var(--or,#FF6A1A) 13%,transparent);
    --j12n-knock:color-mix(in srgb,var(--or,#FF6A1A) 13%,#FAFBFD);
  }
}
html.je-light:not(.nolook12) body nav.tabs{box-shadow:0 -8px 24px -18px rgba(16,32,58,.35)!important}
html.je-light:not(.nolook12) body #j6bar.j6-bar{box-shadow:0 1px 0 var(--j12n-edge),0 10px 26px -22px rgba(16,32,58,.4)!important}
html.je-light:not(.nolook12) body #j6bar .j6-tab{color:#0B1220!important}
html.je-light:not(.nolook12) body #j6bar .j6-tab::after{border-color:#7A8597}
html.je-light:not(.nolook12) body #j6bar .j6-in .j6-find,
html.je-light:not(.nolook12) body #j6bar .j6-in .j7-note,
html.je-light:not(.nolook12) body #j6bar .j6-in .je2-tb:not(.je2-plus){box-shadow:inset 0 0 0 1px rgba(10,20,40,.12)!important;color:#0B1220!important}
html.je-light:not(.nolook12) body #co-bar>button{box-shadow:inset 0 0 0 1px rgba(10,20,40,.09)!important;color:#3D4859!important}
html.je-light:not(.nolook12) body #co-bar>button[aria-pressed="true"]{box-shadow:0 1px 1px rgba(16,32,58,.18),0 6px 16px -8px rgba(16,32,58,.45)!important;color:#fff!important}
html.je-light:not(.nolook12) body #co-bar img{box-shadow:0 0 0 1px rgba(10,20,40,.10)}
/* the badges, the + and the gold tag: their colors written for the light screen (the flip would turn their gradients round and
   their highlights dark) */
html.je-light:not(.nolook12) body nav.tabs #tabbar .tb .badge,
html.je-light:not(.nolook12) body nav.tabs #tabbar .tb .jmb-b{background:linear-gradient(180deg,#FF7A2E,#F25E10)!important;color:#fff!important;box-shadow:0 0 0 2px var(--j12n-ring),0 2px 6px rgba(16,32,58,.18)!important}
html.je-light:not(.nolook12) body nav.tabs #tabbar .tb .jmb-b.warm{background:linear-gradient(180deg,#FCD34D,#F59E0B)!important;color:#3A2604!important}
html.je-light:not(.nolook12) body nav.tabs #tabbar .tb .jmb-b.cool{background:linear-gradient(180deg,#34D399,#10B981)!important;color:#04291A!important}
html.je-light:not(.nolook12) body #j6bar .j6-in .je2-tb.je2-plus,
html.je-light:not(.nolook12) body .jmb-plus{background:linear-gradient(180deg,#FF8A3D,#FF6A1A)!important;color:#fff!important}
html.je-light:not(.nolook12) body #j6bar .j6-in .je2-tb.je2-plus{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -6px rgba(255,106,26,.6)!important}
html.je-light:not(.nolook12) body .jmb-plus{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 24px -10px rgba(255,106,26,.6)}
html.je-light:not(.nolook12) body #j6bar .j6-ceo{color:#2A1C05!important;background:linear-gradient(135deg,#FBEFC0 0%,#E2C26B 45%,#B98A2E 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 6px rgba(185,138,46,.3)!important}
html.je-light:not(.nolook12) body #j6bar .j6-live{background:#10B981;box-shadow:0 0 0 2px var(--j12n-ring),0 0 6px rgba(16,185,129,.45)!important}
html.je-light:not(.nolook12).jrp-msgs body #j6bar .j6-live{background:#F59E0B!important;box-shadow:0 0 0 2px var(--j12n-ring),0 0 6px rgba(245,158,11,.45)!important}

/* ================================================================ Yaya's pink dashboard keeps its pink ==== */
html:not(.nolook12) body.jgirly{
  --j12n-glass:rgba(32,14,40,.72); --j12n-idle:#D8BBE6; --j12n-on:#FF6FA8; --j12n-pill:rgba(255,111,168,.18); --j12n-knock:#4A1D45;
}

/* ============================================ when the phone asks for less (Reduce Transparency, Reduce Motion) ==== */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){   /* a browser with no blur: solid, never see-through text */
  html:not(.nolook12) body nav.tabs,
  html:not(.nolook12) body #j6bar.j6-bar{background:var(--j12n-solid)!important}
}
@media (prefers-reduced-transparency:reduce){
  html:not(.nolook12) body nav.tabs,
  html:not(.nolook12) body #j6bar.j6-bar{background:var(--j12n-solid)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-reduced-motion:reduce){
  html:not(.nolook12) body nav.tabs #tabbar .tb svg,
  html:not(.nolook12) body #co-bar>button{transition:none!important}
}