/* ==========================================================================
   Profile chip — which set of books am I in?

   A person can be a director of several limited companies and also have a
   Personal space. Each limited company is a separate legal entity with its own
   P&L and its own balance sheet, so they are separate accounts and can never be
   merged (Peter, 30 Jul 2026). The chip says which one you are looking at, on
   every screen, and opens the switcher.

   It is a CHIP, not a gesture. The single most important fact in the product is
   which books you are in — the moment you photograph a receipt it decides where
   that receipt lands — and a gesture shows nothing when it isn't being made.
   This is always on screen.

   Injected by src/js/profile-switcher.js. Catalogued in preview/index.html.
   ========================================================================== */

/* TOP RIGHT, BESIDE THE LOGOUT (Peter, 30 Jul 2026) — see profile-switcher.js
   for why it moved twice. A pill, not a nav row: it is an account control sitting
   with the other account control, not a destination. */
.pchip {
  position: fixed;
  top: 26px;            /* level with the logout beside it, and the sidebar logo */
  right: 96px;          /* the 48px logout sits at right: 32, so 32 + 48 + 16 */
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 260px;
  height: 48px;         /* matches the logout button beside it */
  box-sizing: border-box;
  /* Slides with the body when a drawer opens — see profile-switcher.js. */
  transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 14px 0 8px;   /* a touch more room to the left of the avatar */
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);   /* the button radius, not a pill: the pill jarred beside Actions (Peter, 3 Sep) */
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color .15s ease;
}
.pchip:hover { border-color: var(--color-border-strong); }

@media (prefers-reduced-motion: reduce) { .pchip { transition: none; } }

@media (max-width: 900px) {
  .pchip { top: var(--space-3); right: calc(var(--space-3) + 56px); height: 40px; }
  .pchip__name { display: none; }   /* the avatar alone at phone widths */
}

/* A DRAWER IS OPEN → THE CHIP FOLDS TO ITS AVATAR (Peter, 25 Aug: "make this
   picker just the circle... the name is too big and it's clashing with the
   breadcrumb — or have it temporarily disappear. You pick it.").

   SHRINK, never hide. Which books you are in is the single most important fact
   in the product, and a drawer open is precisely when someone is entering
   something — hiding it at that moment is the wrong half of the trade. Some
   pages also keep a drawer open permanently, which would lose it for good.
   The name folds away (max-width to 0, the app's fold, nothing snaps) and the
   avatar + caret stay, which is exactly what the phone already shows.

   Sibling selector because the chip is injected NEXT TO .app, not inside it. */
.app.drawer-open ~ .pchip {
  max-width: 96px;
  padding-right: 8px;
}
.app.drawer-open ~ .pchip .pchip__name {
  max-width: 0;
  opacity: 0;
  margin: 0;
}
.pchip__name {
  transition: max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  max-width: 180px;
}
.pchip { transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { .pchip, .pchip__name { transition: none; } }

.pchip:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

.pchip__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  /* The colour is set inline per profile, from the invoice palette — see
     profile-switcher.js. This is only the fallback. The letter is BLACK on the
     pastel, which is what makes the pill pop (Peter, 30 Jul). */
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* Personal is a different KIND of thing, not another company — so it is marked
   differently rather than just named differently. */
.pchip__mark--personal { background: var(--color-bg); color: var(--color-text); border: var(--border-width) solid var(--color-border-strong); }
/* Personal has no company colour to take, so it keeps the app's own pink. */

.pchip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The caret rides with the label: when the sidebar is collapsed the avatar is
   the whole control, and a chevron beside nothing reads as a glitch. */
.pchip__caret { flex: none; width: 14px; height: 14px; color: var(--color-text-muted); }


/* ----- the switcher ----- */

.pswitch {
  position: fixed;
  z-index: 61;
  width: 296px;
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-dropdown);
}

.pswitch__label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.pswitch__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 10px var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.pswitch__item:hover { background: var(--color-bg-subtle); }
/* The current profile is marked by the TICK alone (Peter, 30 Jul: the pink fill
   "looks a bit odd"). Right call — every dropdown in the app marks its selection
   with the tick and no fill, and menu-pink as a selected state was this menu
   inventing its own convention. */
.pswitch__item.is-on { background: none; }

.pswitch__body { flex: 1; min-width: 0; }
.pswitch__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pswitch__sub { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 1px; }
.pswitch__tick { flex: none; width: 16px; height: 16px; color: var(--color-text); }
.pswitch hr { border: none; border-top: var(--border-width) solid var(--color-border); margin: var(--space-2) 0; }

@media (max-width: 640px) {
  .pchip { left: auto; right: 64px; top: 14px; max-width: 46vw; }
  .pswitch { width: calc(100vw - 32px); }
}

/* Folded header: just the mark (profile-switcher.js toggles it), same spot */
.pchip--mini { padding-right: 6px; }
.pchip--mini .pchip__name, .pchip--mini .pchip__caret { display: none; }

/* The chip as a sidebar item (profile-switcher.js, 3 Sep): the base .sidebar__item
   look wins; only the mark is ours. */
.pchip--side { position: static; right: auto; top: auto; border: none; background: none; box-shadow: none; border-radius: 0; padding: 0 10px; max-width: none; height: auto; width: 100%; transition: none; }   /* the same 10px side padding as every .sidebar__item, so the letter sits on the icon column (Peter, 4 Sep) */
.pchip--side .pchip__box { overflow: hidden; }
.pchip--side .pchip__mark { width: 24px; height: 24px; border-radius: 50%; font-size: 12px; background: transparent !important; border: 1px solid currentColor; color: currentColor; }   /* an outlined letter, like the other icons, no coloured disc (Peter, 3 Sep) */