/* look13-top.css — v468 D · the top, like a first-class iPhone app (Joe, Fri 23 Oct 2026 5:05pm: "Make 5 major upgrades to the look
   of our dashboard make it look like a billion dollar crm compare my 4 biggest competitors look and make ours better think of yourself
   as a world class apple Software engineer who specializes in software development").
   · A customer's Today top (html.j13-top — look13-top.js sets it; never on Joe's own 5.0 top): ONE header instead of three capsules
     over a squeezed company box. Row 1: the business's coin + the name on one line … +, ? and Find (unchanged) and the owner's coin.
     Under the name: the plan's badge (the plan's chat button) and Answering. Nothing is moved in the page: the items are laid out
     with flex order; Español and Sign out live in the Account sheet now (the header's own elements stay, hidden, and the sheet
     clicks them). The header is shorter (about 80 px for 115).
   · The Account sheet (.j13-ov / .j13-sh): an iOS bottom sheet — grabber, title, Done; inset grouped rows in Jetsy's own look.
   · Light mode, for everyone (Joe included): the logo no longer sits on a dark plate (the "black blob" at the top-left of row 1 and
     left of the slim bar's title); the white "Jetsy" word turns dark instead.
   Colors: every one is a custom property in the two blocks below (dark, then html.je-light). easy2.js's light mode rewrites the
   literal colors of every rule whose text does not say je-light, so no rule here holds one. Specificity: the top's rules start
   with three fake ids (:not(#j13x):not(#j13y) … :not(#j13z)) so they beat look11/look12/easy2/cofit (the strongest is one id with
   !important) without depending on load order. Every rule sits under html:not(.nolook13). */

/* ----------------------------------------------------------------------------------------- the colors: dark, then light -- */
html:not(.nolook13){
  --j13-ink1:#F5F7FB; --j13-ink2:#A7B3C6; --j13-ink3:#8794A8;
  --j13-sheet:#0C131F; --j13-cell:#162133; --j13-cell-press:#1E2C43; --j13-sep:rgba(255,255,255,.10);
  --j13-ov:rgba(0,0,0,.52); --j13-grab:rgba(255,255,255,.30); --j13-sheet-sh:0 -16px 48px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
  --j13-tint:#FF8A3D; --j13-red:#F25F5C; --j13-glyph:#FFFFFF; --j13-chev:rgba(214,224,240,.32);
  --j13-blue:#4BA3F5; --j13-indigo:#7E86F5; --j13-purple:#A58BFA; --j13-gray:#8A94A6; --j13-green:#3ED598;
  --j13-me-bg:linear-gradient(180deg,#A6ABB7 0%,#7C828F 100%); --j13-me-ink:#FFFFFF; --j13-me-sh:inset 0 1px 0 rgba(255,255,255,.26),0 1px 2px rgba(0,0,0,.4);
  --j13-coin-hi:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 62%); --j13-coin-ring:inset 0 0 0 1px rgba(255,255,255,.14);
  --j13-logo-bg:#FFFFFF; --j13-logo-ring:inset 0 0 0 1px rgba(255,255,255,.18);
  --j13-seg:rgba(110,124,148,.24); --j13-seg-on:#5B6A80; --j13-seg-ink:#EBEBF5; --j13-seg-on-ink:#FFFFFF; --j13-seg-sh:0 3px 8px rgba(0,0,0,.24),0 1px 1px rgba(0,0,0,.12);
  --j13-sw-off:rgba(110,124,148,.36); --j13-sw-on:#3ED598; --j13-knob:#FFFFFF; --j13-knob-sh:0 3px 8px rgba(0,0,0,.2),0 3px 1px rgba(0,0,0,.08);
  --j13-ring:#4BA3F5;
}
html.je-light:not(.nolook13){
  --j13-ink1:#0B1220; --j13-ink2:#5B6475; --j13-ink3:#6B7486;
  --j13-sheet:#F3F5F9; --j13-cell:#FFFFFF; --j13-cell-press:#E3E8EF; --j13-sep:rgba(52,64,84,.18);
  --j13-ov:rgba(0,0,0,.30); --j13-grab:rgba(52,64,84,.30); --j13-sheet-sh:0 -10px 40px rgba(16,32,58,.16);
  --j13-tint:#C2410C; --j13-red:#D93B3B; --j13-glyph:#FFFFFF; --j13-chev:rgba(52,64,84,.32);
  --j13-blue:#1F6FD1; --j13-indigo:#5560D8; --j13-purple:#7C5CD6; --j13-gray:#8A94A6; --j13-green:#1FA971;
  --j13-me-bg:linear-gradient(180deg,#A6ABB7 0%,#7C828F 100%); --j13-me-ink:#FFFFFF; --j13-me-sh:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(16,32,58,.18);
  --j13-coin-hi:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 62%); --j13-coin-ring:inset 0 0 0 1px rgba(10,20,40,.10);
  --j13-logo-bg:#FFFFFF; --j13-logo-ring:inset 0 0 0 1px rgba(10,20,40,.12);
  --j13-seg:rgba(110,124,148,.12); --j13-seg-on:#FFFFFF; --j13-seg-ink:#3C3C43; --j13-seg-on-ink:#000000; --j13-seg-sh:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);
  --j13-sw-off:rgba(110,124,148,.16); --j13-sw-on:#1FA971; --j13-knob:#FFFFFF; --j13-knob-sh:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);
  --j13-ring:#1F6FD1;
}

/* ------------------------------------------------------------------------------------------------- the header: one row -- */
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;align-content:flex-start!important;
  column-gap:8px!important;row-gap:0!important;grid-template-areas:none!important;grid-template-columns:none!important;
  padding:6px 14.4px 8px!important;min-height:0!important;height:auto!important;
}
/* anything this file does not know sits on the second row, after the badges — never on the name */
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > *{order:9!important;margin:0!important}
/* the line break between the rows, then the indent that puts row 2 under the name (36 coin + 10 gap = 38 + the 8 gap) */
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in::after{content:""!important;display:block!important;order:5!important;flex:0 0 100%!important;width:100%!important;height:0!important;margin:0!important;padding:0!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in::before{content:""!important;display:block!important;position:static!important;order:6!important;flex:0 0 38px!important;width:38px!important;height:0!important;margin:0!important;padding:0!important;background:none!important}
/* gone from the top (the Account sheet has them): the Jetsy lockup, Español, Sign out / Sign in, the old plan pill, the robot */
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .mark,
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > #langsw,
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > a[href="logout.php"],
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > a[href="login.php"],
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .who > #pl,
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .who > .jb-badge{display:none!important}

/* left: the business — coin + name, one line */
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .who{
  order:1!important;flex:1 1 0%!important;min-width:0!important;max-width:none!important;width:auto!important;height:36px!important;
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:10px!important;
  padding:0!important;margin:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;
}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .who #co.co{
  flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;height:auto!important;
  display:block!important;-webkit-line-clamp:none!important;-webkit-box-orient:horizontal!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:normal!important;
  font:700 17px/22px var(--j12-sf)!important;letter-spacing:-.02em!important;text-transform:none!important;color:var(--j13-ink1)!important;
  padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;
}
/* the coin: their logo on a white tile, else their initials on their own color (look13-top.js sets --j13-co / --j13-co-ink) */
html:not(.nolook13) .j13-coin{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;border-radius:10px;overflow:hidden;
  background:var(--j13-coin-hi),var(--j13-co,#7E86F5);box-shadow:var(--j13-coin-ring);color:var(--j13-co-ink,#FFFFFF);
  font:700 14px/1 var(--j12-sf);letter-spacing:.01em;text-transform:uppercase;-webkit-user-select:none;user-select:none;box-sizing:border-box;
}
html:not(.nolook13) .j13-coin.j13-lg{background:var(--j13-logo-bg);box-shadow:var(--j13-logo-ring);padding:3px}
html:not(.nolook13) .j13-coin img{display:block;width:100%;height:100%;object-fit:contain;border-radius:6px}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .who > .j13-coin{display:inline-flex!important;flex:0 0 36px!important;width:36px!important;height:36px!important;margin:0!important}

/* right: +, ? and Find as they are (look11/look12 draw them), then the owner's coin */
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .je2-hb{order:2!important;flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:8px!important;margin:0!important;min-height:0!important;justify-self:auto!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .je2-hb .je2-tb,
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .je2-hb .j6-hfind,
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .j6-hfind{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;position:relative!important;margin:0!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .je2-hb .je2-tb::before,
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .je2-hb .j6-hfind::before,
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .j6-hfind::before{content:""!important;position:absolute!important;top:-4px!important;right:-4px!important;bottom:-4px!important;left:-4px!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .j6-hfind{order:3!important;flex:0 0 36px!important;border-radius:50%!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .je2-hb .je2-tb.je2-plus{font-size:26px!important;line-height:1!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .j13-me{
  order:4!important;flex:0 0 36px!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;position:relative!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;
  background:var(--j13-me-bg)!important;box-shadow:var(--j13-me-sh)!important;color:var(--j13-me-ink)!important;
  font:600 14px/1 var(--j12-sf)!important;letter-spacing:.02em!important;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--j12-tq) var(--j12-spring);
}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .j13-me::before{content:""!important;position:absolute!important;top:-4px!important;right:-4px!important;bottom:-4px!important;left:-4px!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .j13-me:active{transform:scale(.92)}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .j13-me:focus-visible{outline:2px solid var(--j13-ring)!important;outline-offset:2px!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .j13-me svg{display:block;width:20px;height:20px}

/* row 2, under the name: the plan's badge (its chat button — 24 px drawn, 44 px to a thumb) and Answering */
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > #j2btn.j2-btn{
  order:7!important;flex:0 0 auto!important;height:24px!important;min-height:24px!important;max-height:24px!important;min-width:0!important;
  margin:6px 0 0!important;padding:0 9px 0 7px!important;gap:5px!important;border-radius:999px!important;position:relative!important;
  align-self:center!important;line-height:1!important;translate:none!important;
}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > #j2btn.j2-btn::before{content:""!important;position:absolute!important;top:-10px!important;bottom:-10px!important;left:0!important;right:0!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > #j2btn.j2-btn .pc-btn-t{font:600 13px/1 var(--j12-sf)!important;letter-spacing:0!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > #j2btn.j2-btn .pc-mark,
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > #j2btn.j2-btn > svg{width:14px!important;height:14px!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > #j2btn.j2-btn img{width:16px!important;height:16px!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > #j2btn.j2-btn::after{font:700 12px/1 var(--j12-sf)!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .j13-plan{
  order:7!important;flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;height:24px!important;margin:6px 0 0!important;padding:0 9px!important;
  border-radius:999px!important;background:var(--j12c-cap)!important;box-shadow:inset 0 0 0 1px var(--j12c-cap-line)!important;
  color:var(--j13-ink2)!important;font:600 13px/1 var(--j12-sf)!important;white-space:nowrap!important;
}
/* Answering takes what is left of row 2 and never wraps to a third row: on a very narrow phone its words end in "…" */
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .live{
  order:8!important;flex:1 1 0%!important;min-width:0!important;max-width:max-content!important;height:24px!important;min-height:24px!important;margin:6px 0 0!important;padding:0 9px 0 8px!important;gap:6px!important;
  display:inline-flex!important;align-items:center!important;align-self:center!important;overflow:hidden!important;
}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .live > span:not(.pulse){font:600 13px/1 var(--j12-sf)!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .live .pulse{width:7px!important;height:7px!important;flex:0 0 7px!important}

/* ------------------------------------------------------------------------------------------------- the Account sheet -- */
html:not(.nolook13) .j13-ov{
  position:fixed;left:0;right:0;top:0;bottom:0;z-index:73;display:flex;align-items:flex-end;justify-content:center;
  background:var(--j13-ov);opacity:0;transition:opacity 280ms var(--j12-spring);-webkit-tap-highlight-color:transparent;touch-action:none;
}
html:not(.nolook13) .j13-ov.on{opacity:1}
html:not(.nolook13) .j13-sh{
  position:relative;box-sizing:border-box;width:100%;max-width:34rem;max-height:calc(100% - 44px - env(safe-area-inset-top,0px));
  overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
  margin:0;padding:0 16px calc(18px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;
  background:var(--j13-sheet);color:var(--j13-ink1);box-shadow:var(--j13-sheet-sh);text-align:left;outline:none;
  font:400 17px/22px var(--j12-sf);transform:translateY(100%);transition:transform 380ms var(--j12-spring);
}
html:not(.nolook13) .j13-ov.on .j13-sh{transform:none}
html:not(.nolook13) .j13-sh.j13-drag{transition:none}
html:not(.nolook13) .j13-sh *{box-sizing:border-box}
html:not(.nolook13) .j13-cap{position:sticky;top:0;z-index:2;margin:0 -16px 6px;padding:0 16px;background:var(--j13-sheet)}
html:not(.nolook13) .j13-grab{width:36px;height:5px;border-radius:3px;margin:0 auto;position:relative;top:6px;background:var(--j13-grab)}
html:not(.nolook13) .j13-shd{position:relative;display:flex;align-items:center;justify-content:center;height:50px;padding:0 64px}
html:not(.nolook13) .j13-shd h2{margin:0;font:600 17px/22px var(--j12-sf);letter-spacing:-.01em;color:var(--j13-ink1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook13) .j13-done{position:absolute;right:-8px;top:3px;height:44px;min-width:44px;padding:0 8px;border:0;background:none;color:var(--j13-tint);font:600 17px/22px var(--j12-sf);cursor:pointer;-webkit-tap-highlight-color:transparent}
/* inset grouped rows, in Jetsy's own look */
html:not(.nolook13) .j13-grp{background:var(--j13-cell);border-radius:16px;overflow:hidden;margin:0 0 18px}
html:not(.nolook13) .j13-row{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;margin:0;padding:8px 16px;
  border:0;border-radius:0;background:none;color:var(--j13-ink1);font:400 17px/22px var(--j12-sf);text-align:left;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
html:not(.nolook13) .j13-row + .j13-row::before{content:"";position:absolute;top:0;right:0;left:57px;height:1px;background:var(--j13-sep);transform:scaleY(.5);transform-origin:0 0}
html:not(.nolook13) .j13-row.j13-biz + .j13-row::before{left:57px}
html:not(.nolook13) .j13-tap{cursor:pointer;transition:background-color var(--j12-tq) linear}
html:not(.nolook13) .j13-tap:active{background:var(--j13-cell-press)}
html:not(.nolook13) .j13-row:focus-visible,html:not(.nolook13) .j13-done:focus-visible,html:not(.nolook13) .j13-seg button:focus-visible,html:not(.nolook13) .j13-sw:focus-visible{outline:2px solid var(--j13-ring);outline-offset:-2px}
html:not(.nolook13) .j13-ico{flex:0 0 29px;width:29px;height:29px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:var(--j13-glyph)}
html:not(.nolook13) .j13-ico svg{display:block}
html:not(.nolook13) .j13-blue{background:var(--j13-blue)}
html:not(.nolook13) .j13-indigo{background:var(--j13-indigo)}
html:not(.nolook13) .j13-purple{background:var(--j13-purple)}
html:not(.nolook13) .j13-gray{background:var(--j13-gray)}
html:not(.nolook13) .j13-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center}
html:not(.nolook13) .j13-tx b{font:400 17px/22px var(--j12-sf);color:var(--j13-ink1);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not(.nolook13) .j13-tx b.j13-wrap{white-space:normal;overflow-wrap:anywhere;font-weight:600}
html:not(.nolook13) .j13-tx small{font:400 13px/18px var(--j12-sf);color:var(--j13-ink2);margin-top:1px}
html:not(.nolook13) .j13-val{flex:0 0 auto;color:var(--j13-ink2);font:400 17px/22px var(--j12-sf);white-space:nowrap}
html:not(.nolook13) .j13-chev{flex:0 0 8px;display:block;color:var(--j13-chev)}
html:not(.nolook13) .j13-coin.j13-sm{flex:0 0 29px;width:29px;height:29px;border-radius:7px;font-size:12px}
html:not(.nolook13) .j13-coin.j13-sm.j13-lg{padding:2px}
/* who is signed in */
html:not(.nolook13) .j13-prof{display:flex;align-items:center;gap:14px;min-height:80px;padding:12px 16px}
html:not(.nolook13) .j13-av{flex:0 0 56px;width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--j13-me-bg);box-shadow:var(--j13-me-sh);color:var(--j13-me-ink);font:600 22px/1 var(--j12-sf);letter-spacing:.02em}
html:not(.nolook13) .j13-av svg{width:30px;height:30px}
html:not(.nolook13) .j13-prof .j13-tx b{font:600 20px/25px var(--j12-sf);letter-spacing:-.02em;white-space:normal;overflow-wrap:anywhere}
html:not(.nolook13) .j13-prof .j13-tx small{font:400 15px/20px var(--j12-sf);overflow-wrap:anywhere}
/* Language: a segmented control (44 px to a thumb) */
html:not(.nolook13) .j13-seg{flex:0 0 auto;position:relative;display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:var(--j13-seg)}
html:not(.nolook13) .j13-seg button{position:relative;min-width:74px;height:30px;margin:0;padding:0 10px;border:0;border-radius:7px;background:none;color:var(--j13-seg-ink);font:500 13px/1 var(--j12-sf);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--j12-tq) linear,color var(--j12-tq) linear}
html:not(.nolook13) .j13-seg button::before{content:"";position:absolute;top:-7px;bottom:-7px;left:0;right:0}
html:not(.nolook13) .j13-seg button[aria-checked="true"]{background:var(--j13-seg-on);color:var(--j13-seg-on-ink);box-shadow:var(--j13-seg-sh);font-weight:600}
/* Light mode: an iOS switch (the app's own data-je2s="light") */
html:not(.nolook13) .j13-sw{flex:0 0 51px;position:relative;width:51px;height:31px;margin:0;padding:0;border:0;border-radius:999px;background:var(--j13-sw-off);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--j12-t) var(--j12-spring)}
html:not(.nolook13) .j13-sw::before{content:"";position:absolute;top:-7px;bottom:-7px;left:-4px;right:-4px}
html:not(.nolook13) .j13-sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--j13-knob);box-shadow:var(--j13-knob-sh);transition:transform var(--j12-t) var(--j12-spring)}
html:not(.nolook13) .j13-sw[aria-checked="true"]{background:var(--j13-sw-on)}
html:not(.nolook13) .j13-sw[aria-checked="true"]::after{transform:translateX(20px)}
/* Sign out: red, centered, in Jetsy's own look */
html:not(.nolook13) .j13-row.j13-out,html:not(.nolook13) .j13-row.j13-in{justify-content:center;text-align:center;font:400 17px/22px var(--j12-sf)}
html:not(.nolook13) .j13-row.j13-out{color:var(--j13-red)}
html:not(.nolook13) .j13-row.j13-in{color:var(--j13-tint);font-weight:600}
@media (prefers-reduced-motion:reduce){
  html:not(.nolook13) .j13-ov,html:not(.nolook13) .j13-sh,html:not(.nolook13) .j13-sw,html:not(.nolook13) .j13-sw::after,html:not(.nolook13) .j13-seg button,html:not(.nolook13) .j13-tap{transition:none!important}
  html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .j13-me{transition:none!important}
  html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .j13-me:active{transform:none!important}
}

/* ------------------------------------------------- light mode: no dark plate behind the logo (everyone, Joe included) -- */
/* easy2.js put a navy plate behind the white-on-dark logo for the light screen; on the light screen that plate is the "black
   blob". The plate goes; the logo's white "Jetsy" turns dark (its robot keeps its orange headset). A picked company's own logo
   keeps its white tile. The fallback head (.mark.head, a navy square icon) is left as it is. */
html.je-light:not(.nolook13):not(#j13x) body header.appbar .mark.lockup:not(.head){background:transparent!important;padding:0!important;border-radius:0!important;box-shadow:none!important}
html.je-light:not(.nolook13):not(#j13x) body #j6bar .j6-mark{background:transparent!important;padding:0!important;box-shadow:none!important}
html.je-light:not(.nolook13):not(#j13x) body header.appbar .mark img[src*="jetsy-logo-on-dark"],
html.je-light:not(.nolook13):not(#j13x) body #j6bar .j6-mark img[src*="jetsy-logo-on-dark"]{background:transparent!important;padding:0!important;border-radius:0!important;filter:invert(1) hue-rotate(180deg) saturate(1.15)!important}
/* the strip behind the clock in the home-screen app (tabs.js #jtabs-sb) takes the page's color when it is made — the dark one if it
   was made before light mode set in: on the light screen it is the light page's color (easy2.js's theme-color) */
html.je-light:not(.nolook13):not(#j13x) body #jtabs-sb{background:#F3F6FA!important}
/* Joe's own top in light: the logo stands where it stands on the dark screen, so the crown stays on the robot's head */
html.j12-ceo.je-light:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .mark{height:30px!important}
html.j12-ceo.je-light:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .mark img[src*="jetsy-logo-on-dark"]{display:block!important;height:28px!important;width:auto!important;margin:0!important}
html.j12-ceo.je-light:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .mark.own-lux::before{left:8px!important;top:-12px!important}

/* v468 merge (the assembler) · the whole business name, never "…" (Joe, v445: "I'd like it to show my complete business name on top").
   look13-top.js picks the first fit that shows all of it: two lines at 15 px (inside the coin's 36 px), two at 13, three at 12, four at 11 */
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .who #co.co:is(.j13-n2,.j13-n3,.j13-n4,.j13-n5){
  white-space:normal!important;text-overflow:clip!important;overflow:hidden!important;overflow-wrap:break-word!important;
  display:-webkit-box!important;-webkit-box-orient:vertical!important;letter-spacing:-.01em!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .who #co.co.j13-n2{font-size:15px!important;line-height:18px!important;-webkit-line-clamp:2!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .who #co.co.j13-n3{font-size:13px!important;line-height:16px!important;-webkit-line-clamp:2!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .who #co.co.j13-n4{font-size:12px!important;line-height:13.5px!important;-webkit-line-clamp:3!important}
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .who #co.co.j13-n5{font-size:11px!important;line-height:12.5px!important;-webkit-line-clamp:4!important}
/* three or four short lines are taller than the coin: the business row grows with them (rare: a very long name on a narrow phone) */
html.j13-top:not(.nolook13):not(#j13x):not(#j13y) body header.appbar:not(#j13z) .in > .who:has(#co.co:is(.j13-n4,.j13-n5)){height:auto!important;min-height:36px!important}