/* ---------------------------------------------------------------------------
   The bar, and nothing else.

   One bar, on every page of the product: the apex pages load this beside
   cp.css, and a restaurant's workspace -- which has no cp.css, only tailwind
   and its own brand variables -- loads it alone. That is the whole reason it
   is a file of its own rather than a block in cp.css.

   The same parts in the same places everywhere (src/nav.js says why):
   Credplate, the place, search, the tabs, and you.

   Two rules follow from being worn by both kinds of page:

   - Every colour is its own, declared on .bar, and the bar's ink is one
     variable. Credplate's pages leave it at Credplate's navy. A restaurant's
     page sets it to the restaurant's ink, because inside a restaurant the bar
     is the restaurant's -- that is one line in public/app/index.html rather
     than the restaurant's variable read in here, which would be a rule about
     restaurants loose on every page that has none.
   - Every selector is under .bar, but one: at 900px and narrower the tabs
     are a bar along the bottom of the screen, and the page has to make room
     for it (the end of this file).
   -------------------------------------------------------------------------- */

.bar {
  /* Credplate's navy, the same ink as every page's headings and the phone's
     address bar. It was the logo's green until 2026-10-08, when the user asked
     for navy everywhere: green had been chosen to stand apart from a
     restaurant's navy band, and there is no second band any more. */
  --bar-ink: #073147;
  --bar-brass: #C8873C;
  --bar-menu-ink: #17211f;
  /* The counts: a red circle with a white number, on any restaurant's ink. */
  --bar-badge: #CC1016;
  background: var(--bar-ink);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.bar .wrap {
  max-width: 1040px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 4px 12px;
  /* One row. The search box opens across the whole of it on a narrower
     screen, measured from here. */
  flex-wrap: nowrap; position: relative; min-height: 56px;
}
.bar .logo { display: flex; align-items: center; gap: 10px; min-height: 44px;
             text-decoration: none; color: #fff; flex: none; }
.bar .logo b { font-size: 19px; letter-spacing: -0.01em; }
/* The one button a stranger is offered -- "Sign in" on the brand site, "Get
   your own" on a profile. Drawn here in full rather than borrowed from cp.css:
   the brand site's pages keep their own look below the bar and load no cp.css. */
.bar .nav__cta { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; flex: none;
                 padding: 0 16px; border-radius: 10px; background: #fff; color: var(--bar-ink);
                 font: inherit; font-size: 15px; font-weight: 650; text-decoration: none; white-space: nowrap;
                 transition: background .15s; }
.bar .nav__cta:hover { background: #E3B477; color: var(--bar-menu-ink); }
/* "Sign in" beside it on the brand site: the way social sites pair the two,
   the quiet one for people who already have an account. It carries the
   margin that pushes the pair to the right edge. */
.bar .nav__in { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; flex: none;
                padding: 0 12px; color: #fff; font-size: 15px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.bar .nav__in:hover { text-decoration: underline; }
.bar .nav__in + .nav__cta { margin-left: 4px; }

/* ------------------------------------------------------------- the place

   One button: the restaurant's name as it writes it, then -- for somebody who
   sees more than one -- the location on show. It gives way before anything
   else on the row does, and cuts its words short rather than wrapping. */
.bar .place { position: relative; flex: 0 1 auto; min-width: 0; max-width: 280px; color: #fff; }
.bar .place__btn { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 44px;
                   padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22);
                   cursor: pointer; list-style: none; white-space: nowrap; color: #fff; }
.bar .place__btn::-webkit-details-marker { display: none; }
.bar .place__btn:hover, .bar .place[open] > .place__btn { background: rgba(255,255,255,.10); }
/* On Restaurant settings, which has no tab: the place button is lit instead. */
.bar .place--here > .place__btn { background: rgba(255,255,255,.18); }
.bar .place__name { font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; min-width: 0; flex: 0 1 auto; }
/* The wordmark as the restaurant set it on Look & feel. The workspace sets the
   same with tailwind's own classes; Credplate's pages have no tailwind. */
.bar .place__name--serif, .bar .place__name--serif-italic {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }
.bar .place__name--serif-italic { font-style: italic; }
.bar .place__chev { flex: none; }
/* A name with nothing behind it: staff at one restaurant. No chevron, no
   border, nothing to press (the workspace's shell turns it on once it knows). */
.bar .place[data-menu="off"] > .place__btn { border-color: transparent; padding: 0; cursor: default; pointer-events: none; }
.bar .place[data-menu="off"] .place__chev, .bar .place[data-menu="off"] > .place__menu { display: none; }
/* On Credplate's pages that name is a link home to the restaurant. */
.bar a.place--plain { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.bar a.place--plain:hover .place__name { text-decoration: underline; text-underline-offset: 3px; }

.bar .place__menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
                    min-width: 260px; max-width: calc(100vw - 32px); max-height: min(70vh, 520px); overflow-y: auto;
                    padding: 6px; border-radius: 12px; box-sizing: border-box;
                    background: #fff; color: var(--bar-menu-ink);
                    box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08); }
.bar .place__list > a, .bar .place__list > button, .bar .place__settings, .bar .place__sub > summary {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; box-sizing: border-box;
  border: 0; border-radius: 8px; background: transparent; color: var(--bar-menu-ink); text-decoration: none;
  text-align: left; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.bar .place__list > a:hover, .bar .place__list > button:hover, .bar .place__settings:hover,
.bar .place__sub > summary:hover { background: #f1efe8; }
/* Where you are now: ticked, and bold, so the list reads as "you are here". */
.bar .place__list > [aria-current] { font-weight: 700; }
.bar .place__list > [aria-current]::after { content: "\2713"; margin-left: auto; padding-left: 12px; color: #1F6F5C; }
.bar .place__sub + .place__settings { border-top: 1px solid #e5e2da; margin-top: 4px; padding-top: 4px; }
.bar .place__sub > summary { list-style: none; justify-content: space-between; }
.bar .place__sub > summary::-webkit-details-marker { display: none; }
.bar .place__sub > summary::after { content: "\203a"; font-size: 18px; color: #5f5e5a; }
.bar .place__sub[open] > summary::after { transform: rotate(90deg); }
.bar .place__sub > .place__list { padding-left: 12px; }

/* ------------------------------------------------------------- the tabs

   An icon over each label, LinkedIn's way: links on Credplate's pages,
   buttons inside a restaurant, where they switch screens without a page load;
   the same look either way. The brand site's own links (a stranger's) are
   plain words: they are `.nav` without `.nav--tabs`. */
.bar .nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; }
.bar .nav > a, .bar .nav > button {
  display: inline-flex; align-items: center; min-height: 44px; flex: none; white-space: nowrap;
  color: rgba(255,255,255,.82); text-decoration: none; font: inherit; font-size: 14px; font-weight: 600;
  padding: 0 11px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  transition: background .15s, color .15s;
}
.bar .nav > a:hover, .bar .nav > button:hover { color: #fff; background: rgba(255,255,255,.10); }
.bar .nav > [aria-current="page"] { color: #fff; background: rgba(255,255,255,.18); }

.bar .nav--tabs { flex: 0 0 auto; gap: 0; margin-left: auto; }
.bar .nav--tabs > a, .bar .nav--tabs > button {
  position: relative; flex-direction: column; justify-content: center; gap: 4px;
  min-width: 62px; min-height: 56px; padding: 6px 6px 5px; border-radius: 0; box-sizing: border-box;
  font-size: 12px; font-weight: 600; line-height: 1;
}
.bar .nav--tabs > a:hover, .bar .nav--tabs > button:hover { background: transparent; color: #fff; }
/* The page on show: white, and underlined in brass. */
.bar .nav--tabs > [aria-current="page"] { color: #fff; background: transparent;
                                          box-shadow: inset 0 -3px 0 var(--bar-brass); }
.bar .nav--tabs > [data-icon]::before {
  content: ""; width: 24px; height: 24px; flex: none; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
/* The one set of icons, for this file's tabs and the workspace's alike. */
.bar [data-icon="home"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20h5v-6h4v6h5V9.5'/%3E%3C/svg%3E"); }
.bar [data-icon="tests"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 2.5h6v3H9z'/%3E%3Cpath d='m9 13 2 2 4-4'/%3E%3C/svg%3E"); }
.bar [data-icon="team"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8'/%3E%3Cpath d='M18 14a6.5 6.5 0 0 1 3.5 6'/%3E%3C/svg%3E"); }
.bar [data-icon="messages"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.bar [data-icon="store"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16l1.5 5a2.5 2.5 0 0 1-5 .5 2.5 2.5 0 0 1-5 0 2.5 2.5 0 0 1-5 0A2.5 2.5 0 0 1 2.5 9z'/%3E%3Cpath d='M4 11.5V20h16v-8.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.bar [data-icon="network"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='3.5'/%3E%3Cpath d='M3.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M19 8v6M16 11h6'/%3E%3C/svg%3E"); }
.bar [data-icon="jobs"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E"); }

/* The counts, filled in by the page (CPBar.paint in bar.js): a red circle
   with a white number, on the icon's shoulder on a tab and at the end of a
   line behind the face. Red on white reads on any restaurant's ink, and the
   ring in the bar's ink sets it off the icon. */
.bar .nav__badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
                   background: var(--bar-badge); color: #fff; font-size: 11px;
                   font-weight: 700; line-height: 1.5; }
.bar .nav--tabs > * > span { position: absolute; top: 3px; left: calc(50% + 3px); margin: 0;
                             min-width: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
                             border: 2px solid var(--bar-ink); font-size: 11px; font-weight: 700;
                             line-height: 14px; height: auto; text-align: center; }

/* ------------------------------------------------------------- search

   People, tests and documents (public/assets/bar.js fills it). A box on a
   laptop, taking what the row has to spare; a magnifier that opens it across
   the bar on anything narrower (below). */
.bar .find { position: relative; flex: 1 1 200px; min-width: 140px; max-width: 300px; }
.bar .find__open, .bar .find__close {
  display: none; align-items: center; justify-content: center; flex: none;
  min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: rgba(255,255,255,.82); cursor: pointer;
}
.bar .find__open:hover, .bar .find__close:hover { background: rgba(255,255,255,.10); color: #fff; }
.bar .find__box { position: relative; display: flex; align-items: center; }
.bar .find__box > .find__glass { position: absolute; left: 10px; color: rgba(255,255,255,.72);
                                 pointer-events: none; }
.bar .find__input {
  width: 100%; min-width: 0; min-height: 38px; box-sizing: border-box; margin: 0;
  padding: 0 10px 0 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 15px;
  -webkit-appearance: none; appearance: none;
}
.bar .find__input::placeholder { color: rgba(255,255,255,.72); }
.bar .find__input::-webkit-search-decoration { -webkit-appearance: none; }
/* Typing is done on white, the way the menus are drawn. */
.bar .find__input:focus { background: #fff; color: var(--bar-menu-ink); border-color: #fff; }
.bar .find__input:focus::placeholder { color: #6b6a65; }
.bar .find__box:focus-within > .find__glass { color: #5f5e5a; }
.bar .find__input:focus-visible { outline: 3px solid rgba(255,255,255,.55); outline-offset: 1px; }

.bar .find__panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
                    width: min(420px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto;
                    padding: 6px; border-radius: 12px; background: #fff; color: var(--bar-menu-ink);
                    box-sizing: border-box; box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08); }
.bar .find__group + .find__group { border-top: 1px solid #e5e2da; margin-top: 4px; padding-top: 4px; }
.bar .find__head { padding: 8px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
                   text-transform: uppercase; color: #5f5e5a; }
.bar .find__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px;
                  border-radius: 8px; color: var(--bar-menu-ink); text-decoration: none; box-sizing: border-box; }
.bar .find__opt:hover { background: #f1efe8; }
/* The one Enter would open: tinted, and ringed so it reads without colour. */
.bar .find__opt[aria-selected="true"] { background: #f1efe8; box-shadow: inset 0 0 0 2px #2C5CA9; }
.bar .find__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.bar .find__title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }
.bar .find__sub { font-size: 13px; color: #5f5e5a; overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; }
.bar .find__face { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none;
                   background: #E3B477; }
.bar .find__face--text { display: inline-flex; align-items: center; justify-content: center;
                         font-size: 12px; font-weight: 700; color: var(--bar-menu-ink); }
.bar .find__chip { display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 999px;
                   background: #f1efe8; color: #5f5e5a; font-size: 11px; font-weight: 700;
                   line-height: 18px; vertical-align: 1px; }
.bar .find__more { font-size: 14px; font-weight: 600; color: #2C5CA9; }
.bar .find__note { margin: 0; padding: 12px 10px; font-size: 14px; color: #5f5e5a; }
.bar .find__sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
                 clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- you */
.bar .me { position: relative; margin-left: 4px; flex: none; }
.bar .me__btn { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px;
                border-radius: 10px; cursor: pointer; list-style: none; color: rgba(255,255,255,.82); }
.bar .me__btn::-webkit-details-marker { display: none; }
.bar .me__btn:hover, .bar .me[open] > .me__btn { background: rgba(255,255,255,.10); color: #fff; }
.bar .me--here > .me__btn { background: rgba(255,255,255,.18); color: #fff; }
.bar .me__face { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none;
                 background: var(--bar-brass); }
.bar .me__face--text { display: inline-flex; align-items: center; justify-content: center;
                       font-size: 12px; font-weight: 700; color: #fff; }
/* Notifications unread, on the face: Notifications is behind it, not a tab
   (owner, 2026-10-09), and a count nobody can see is news nobody reads.
   Tucked onto the face's top-right edge, ringed in the bar's ink so it reads
   as a badge on the picture rather than a second button. */
.bar .me__count { margin-left: -14px; margin-top: -20px; min-width: 18px; padding: 0 5px;
                  border-radius: 999px; border: 2px solid var(--bar-ink); background: var(--bar-badge);
                  color: #fff; font-size: 11px; font-weight: 700; line-height: 14px;
                  text-align: center; position: relative; }
.bar .me__chev { flex: none; }

.bar .me__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
                 min-width: 240px; padding: 6px; border-radius: 12px; background: #fff;
                 color: var(--bar-menu-ink); box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08); }
.bar .me__menu > a, .bar .me__menu > button, .bar .me__menu > .me__who {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px;
  padding: 0 12px; border: 0; border-radius: 8px; background: transparent; box-sizing: border-box;
  color: var(--bar-menu-ink); text-decoration: none; text-align: left;
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.bar .me__menu > a:hover, .bar .me__menu > button:hover { background: #f1efe8; }
.bar .me__menu > [aria-current="page"] { background: #f1efe8; font-weight: 700; }
/* A count at the end of a line behind the face. */
.bar .me__menu > a > .nav__badge { margin-left: 12px; font-size: 12px; }
/* A manager's Network and Jobs: behind the face only where their tabs are not
   (900px and narrower, below). */
.bar .me__menu > .me__narrow { display: none; }
/* The language that is not on screen (lang.js sets <html lang>). */
html:not([lang="es"]) .bar .me__menu > .me__lang[data-lang="en"],
html[lang="es"] .bar .me__menu > .me__lang[data-lang="es"] { display: none; }
.bar .me__menu > .me__who { flex-direction: column; align-items: flex-start; justify-content: center;
                            padding: 8px 12px; line-height: 1.3; }
.bar .me__menu > .me__who:not([href]) { cursor: default; }
.bar .me__menu > .me__who b { font-size: 15px; }
.bar .me__menu > .me__who span { font-size: 13px; color: #2C5CA9; font-weight: 600; }
.bar .me__menu hr { border: 0; border-top: 1px solid #e5e2da; margin: 6px 4px; }

/* "See it as" behind the face (src/nav.js): the roles below yours, the one
   you are seeing it as now in bold. The heading reads like the place menu's. */
.bar .me__seeas[hidden] { display: none; }
.bar .me__head { margin: 0; padding: 8px 12px 4px; font-size: 12px; font-weight: 700;
                 letter-spacing: .06em; text-transform: uppercase; color: #5f5e5a; }
.bar .me__seeas button {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent; box-sizing: border-box;
  color: var(--bar-menu-ink); text-align: left; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.bar .me__seeas button:hover { background: #f1efe8; }
.bar .me__seeas button[aria-current] { font-weight: 700; }
.bar .me__seeas button[aria-current]::after { content: "\2713"; margin-left: auto; color: #2C5CA9; }

/* While somebody sees Credplate as a role below their own: one thin line
   along the bottom of the bar, in brass so it cannot be mistaken for the
   restaurant's own colour, saying so and taking them back. */
.bar .seeas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px;
              min-height: 32px; padding: 4px 16px; box-sizing: border-box;
              background: var(--bar-brass); color: var(--bar-menu-ink); font-size: 14px; line-height: 1.3; text-align: center; }
.bar .seeas[hidden] { display: none; }
.bar .seeas__back { min-height: 32px; padding: 0 6px; border: 0; background: transparent; color: var(--bar-menu-ink);
                    font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bar .seeas__back:focus-visible { outline-color: var(--bar-menu-ink); }

/* Keyboard focus shows on every control: white on the ink, the link blue on
   the white of the menus, where white would not read. */
.bar :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bar .me__menu :focus-visible, .bar .place__menu :focus-visible { outline-color: #2C5CA9; }

/* Shown and hidden by the pages: `hidden` on Credplate's, tailwind's class on
   a restaurant's. Both have to beat the display rules above. */
.bar .wrap [hidden], .bar .wrap .hidden { display: none; }

/* ------------------------------------------------------------- narrower

   Under 1100px a restaurant's bar keeps Credplate's mark and folds its name
   away, so the restaurant's and seven tabs have room. Under 1000px the search
   box is a magnifier; pressed, the box opens across the whole row, over the
   rest of it. */
@media (max-width: 1100px) {
  .bar--place .logo b { display: none; }
}
@media (max-width: 1000px) {
  .bar .find { position: static; flex: none; min-width: 0; max-width: none; }
  .bar .find__open { display: inline-flex; }
  .bar .find__box { display: none; }
  .bar.bar--finding .find__box {
    display: flex; position: absolute; z-index: 70; left: 0; right: 0; top: 0; bottom: 0;
    padding: 0 16px 0 24px; gap: 4px; box-sizing: border-box; background: var(--bar-ink);
  }
  .bar.bar--finding .find__box > .find__glass { left: 34px; }
  .bar.bar--finding .find__close { display: inline-flex; }
  /* One way out of the opened box, not two crosses side by side. */
  .bar .find__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .bar .find__panel { left: 24px; top: 100%; width: min(480px, calc(100% - 48px)); max-height: calc(100vh - 80px); }
}

/* ------------------------------------------------------------- a phone, or a narrow tablet

   At 900px and narrower the top keeps the mark, the place, the magnifier and
   you; the tabs become a bar along the bottom of the screen, where a thumb
   is, the same inside a restaurant and on Credplate's own pages. Five at
   most: a manager's Network and Jobs (`tab--wide`) go behind the face
   (`me__narrow`), and nothing else is folded away -- staff open these
   screens every shift. */
@media (max-width: 900px) {
  .bar .find { margin-left: auto; }

  /* The tab bar, fixed along the bottom, above the phone's own home bar. */
  .bar .nav--tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; margin: 0;
    display: flex; justify-content: center; align-items: stretch;
    padding: 0 4px env(safe-area-inset-bottom); background: var(--bar-ink);
    border-top: 1px solid rgba(255,255,255,.14); box-shadow: 0 -2px 10px rgba(0,0,0,.12);
  }
  .bar .nav--tabs.hidden, .bar .nav--tabs[hidden] { display: none; }
  .bar .nav--tabs > a, .bar .nav--tabs > button { flex: 1 1 0; min-width: 0; max-width: 168px; min-height: 56px; padding: 6px 2px 5px; }
  .bar .nav--tabs > .tab--wide { display: none; }
  /* Lit along its top edge, where the bar meets the page. */
  .bar .nav--tabs > [aria-current="page"] { box-shadow: inset 0 3px 0 var(--bar-brass); }

  .bar .me__menu > .me__narrow:not([hidden]) { display: flex; }
  /* On a page behind the face only here (a manager's Network or Jobs). */
  .bar .me--here-narrow > .me__btn { background: rgba(255,255,255,.18); color: #fff; }
}

/* The page makes room for the tab bar, so nothing it ends with sits behind
   it -- the one rule here that is not under .bar, and only while a tab bar is
   on the page and showing. The workspace's sync pill and Credplate's toast
   step up above it. */
@media (max-width: 900px) {
  body:has(.bar .nav--tabs:not(.hidden):not([hidden])) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body:has(.bar .nav--tabs:not(.hidden):not([hidden])) #syncPill,
  body:has(.bar .nav--tabs:not(.hidden):not([hidden])) .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* A stranger's links, on the brand site, take a row of their own and wrap
   onto a second line rather than hide any: Sign in keeps the top row. */
@media (max-width: 720px) {
  .bar .wrap:has(> .nav__cta) { flex-wrap: wrap; padding-bottom: 6px; }
  .bar .nav:not(.nav--tabs) { order: 3; flex-basis: 100%; flex-wrap: wrap; justify-content: center; overflow: visible; }
  .bar .nav:not(.nav--tabs) > a { padding: 0 7px; min-height: 44px; }
}

/* A phone: tighter, since the bar is the only chrome above the work. */
@media (max-width: 640px) {
  .bar .wrap { padding: 6px 16px; column-gap: 8px; min-height: 0; flex-wrap: wrap; }
  .bar .logo b { font-size: 18px; }
  .bar .place { flex: 1 1 0; max-width: none; }
  .bar .place__name { font-size: 16px; }
  .bar .me { margin-left: 0; }
  .bar .me__chev { display: none; }
  .bar .me__btn { min-width: 44px; justify-content: center; }
  /* Sign in and Create account share the top row with the mark. */
  .bar .nav__in { padding: 0 8px; font-size: 14px; }
  .bar .nav__cta { padding: 0 12px; font-size: 14px; }

  .bar.bar--finding .find__box { padding: 0 8px 0 16px; }
  .bar.bar--finding .find__box > .find__glass { left: 26px; }
  .bar .find__panel { left: 16px; right: 16px; width: auto; }
}

/* The narrowest phones: a manager's restaurant name keeps some room. */
@media (max-width: 360px) {
  .bar .wrap { column-gap: 4px; }
  .bar .place__btn { padding: 0 6px; gap: 4px; }
}

/* The narrowest phones: the brand site's two buttons keep their words and the
   mark keeps the corner, so the name gives way, the way LinkedIn's does. */
@media (max-width: 400px) {
  .bar .wrap:has(.nav__in) .logo b { display: none; }
}