/* look11.css — v460 (Joe 21 Oct 2026 9:31pm "Can you make sure a user will have no problem using our software please? I am about to
   run lots of ads"): what the ad-visitor journey found on a 390 and a 375 phone.
   1. A customer's two-row header (html.je-top, not Joe's three-row one) put the orange +, ? and Find on top of the company name: the
      grid's column 4 was sized by row 1's language button (71 px) and the three 34 px buttons (112 px) hung out of it, leftwards, over
      the name ("Journey Paintin+"). The two rows are now two flex lines that size themselves: row 1 the logo, the plan, the language
      and Sign out; row 2 the company pill (it shrinks with …), the three buttons, the plan tag.
   2. The three buttons are 40 px with a 2 px halo (44 px to a thumb) and a card's fold chevron (28–30 px) gets an 8 px halo (never past the right edge).
   Off switch: localStorage nolook11 = 1 (html.nolook11), like the looks before it. Prefixed html:not(.nolook11) body. */
@media (max-width: 639px) {
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .in { display: flex !important; flex-wrap: wrap !important; align-items: center !important; row-gap: .3rem !important; column-gap: .35rem !important; }
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .in > * { order: 4; min-width: 0; }   /* review R1 #5: anything this file does not know (a 4.0 account's Ask button, a note chip) sits on row 1, never in the company name's room */
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .in > .mark { order: 1; flex: 0 1 auto; }
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .in > .pc-btn,
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .in > #j2btn { order: 2; margin-left: auto !important; flex: 0 1 auto; }
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .in > #langsw,
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .in > .b.sm:not(.quiet):not(.pc-btn) { order: 3; flex: 0 1 auto; }
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .in > a[href="logout.php"] { order: 4; flex: 0 1 auto; }
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .in::after { content: ""; flex-basis: 100%; order: 5; height: 0; }
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .in > .who { order: 6; flex: 1 1 0% !important; min-width: 0 !important; max-width: none !important; }
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .in > .je2-hb { order: 7; flex: 0 0 auto; justify-self: auto; }
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .in > .live { order: 8; flex: 0 0 auto; }
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .je2-hb .je2-tb,
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .je2-hb .j6-hfind { width: 40px !important; height: 40px !important; min-width: 40px !important; position: relative; }
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .je2-hb .je2-tb::before,
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .je2-hb .j6-hfind::before { content: ""; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; }
}
/* a narrow phone (375, 390): the three buttons at 36 px with a 4 px halo (44 to a thumb), so a long company name keeps a little more of its row (cofit.js, v445, still gives it two to four lines when it needs them) */
@media (max-width: 400px) {
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .in { column-gap: .3rem !important; }
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .je2-hb { gap: .25rem !important; }
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .je2-hb .je2-tb,
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .je2-hb .j6-hfind { width: 36px !important; height: 36px !important; min-width: 36px !important; }
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .je2-hb .je2-tb::before,
  html.je-top:not(.je-top3):not(.nolook11) body .appbar .je2-hb .j6-hfind::before { top: -4px; right: -4px; bottom: -4px; left: -4px; }
}
/* review R1 #2: the chevron is already position:absolute at the header's right edge (todaycards.js) — only the halo is added, and
   never past the right edge (look9: a chevron on the edge made Tonight 4 px wider than the screen) */
html:not(.nolook11) body .tc-chev::before { content: ""; position: absolute; top: -8px; right: 0; bottom: -8px; left: -10px; }
/* v461 (Joe 22 Oct 8:37am "Add this back permanently": his three-row top for good — the plate, the pill, Note and the robots): on
   that top the + and ? were 34 px and Note 32 px tall, under the 44 px floor (only a customer's two-row top was fixed above). The +
   and ? are 40 px with a 2 px halo; Note keeps its look and gets a 6 px halo above and below. 44 px to a thumb, both. */
@media (max-width: 639px) {
  html.je-top.je-top3:not(.nolook11) body .appbar .je2-hb { gap: .4rem !important; }
  html.je-top.je-top3:not(.nolook11) body .appbar .je2-hb .je2-tb { width: 40px !important; height: 40px !important; min-width: 40px !important; position: relative; }
  html.je-top.je-top3:not(.nolook11) body .appbar .je2-hb .je2-tb::before { content: ""; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; }
}
html:not(.nolook11) body header.appbar .jnote-b { position: relative; }
html:not(.nolook11) body header.appbar .jnote-b::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
/* …and on that top Find (drawn 36 px, row 1) reaches 44 with a 4 px halo each side; the language button and Sign out are never
   narrower than 44 (the Spanish "Salir" was 38) — on every top. */
html.je-top.je-top3:not(.nolook11) body header.appbar .in > .j6-hfind::before { left: -4px; right: -4px; }
/* …and the picked company's robot (.jbud.lead, its .in scaled 1.25) carried its "!" bubble 5 px past a 390 screen's right edge — invisible
   (opacity 0 until an alert), but the page grew to 395 px and slid sideways when Jetsy or AZ Directory was picked (t_v455_bar's 855) */
html:not(.nolook11) body .jbud.lead .ex { right: 3px; }
html:not(.nolook11) body header.appbar .in > a.b.sm[href="logout.php"], html:not(.nolook11) body header.appbar #langsw { min-width: 44px; justify-content: center; text-align: center; }