/*
  The language picker, and nothing else.

  ============================================================
  why this is not in styles.css
  ============================================================
  `styles.css` is a VERBATIM COPY of `admin/styles.css` and has to stay one — the two apps are
  the same product seen from two sides, and a portal that drifts visually is a portal a business
  trusts less. See vendors/README.md.

  The console has no language picker and will not get one: it is a staff tool, and the people
  who open it work here. So this rule cannot go in the shared file without either forking it or
  parking dead CSS in the other app. A second stylesheet is the honest version of "the portal
  has one thing the console does not", and `style-src 'self'` already admits it.

  Every value below is a token from styles.css. There are no literals here for the same reason
  there are none there.
*/

/*
  A segmented pill: two buttons, and the one you are on is pressed.

  Ink colours rather than page colours, because both of the places this appears — the rail foot
  and the mobile appbar — are the ink surface. The signed-out screens are the exception and are
  handled at the bottom.
*/
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 2px;
  border: 1px solid var(--rail-line);
  border-radius: var(--r-pill);
  background: var(--rail2);
}

.lang button {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: none;
  color: var(--rail-ink2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  line-height: 1;
  padding: 6px 8px;
  min-height: 0;
  border-radius: var(--r-pill);
}

.lang button:hover {
  color: var(--rail-on);
}

/*
  The language you are reading. `aria-pressed` is what a screen reader announces, so the styling
  hangs off that rather than off a class that could drift away from it.
*/
.lang button[aria-pressed='true'] {
  background: var(--accent-wash);
  color: var(--accent-ink);
}

/* ---------------------------------------------------------------- in the rail */

/*
  Its own row, between the nav and the foot, on the foot's left margin so the pill lines up with
  the avatar under it.

  It sat INSIDE the foot for one build. 230px of rail does not hold an avatar, a business name,
  a status line, a pill and a sign-out button — the name is what gave way, and a rail that says
  "Casa …" has lost the one thing it was there to say.
*/
.langbar {
  display: flex;
  flex: none;
  padding: 10px var(--s-lg);
  border-top: 1px solid var(--rail-line);
}

/*
  Gone in the narrow rail, exactly as sign-out is.

  Not a compromise: the narrow rail is 64px and the pill is 62 before its own padding. The one
  click that brings back the sign-out button brings this back with it.
*/
.shell.rail-narrow .langbar {
  display: none;
}

/* ---------------------------------------------------------------- on a phone */

/*
  The appbar replaces the rail below the breakpoint, and the drawer it opens is where the rail
  went — including the rail's copy of this. So the picker sits in the bar itself, where it is
  reachable without opening anything.

  `.who` carries `margin-left: auto`, so it is what pushes; the picker goes after it and wants
  its own gap.
*/
.appbar .lang {
  margin-left: var(--s-sm);
}

/* ---------------------------------------------------------------- signed out */

/*
  The front door — sign-in, sign-up, and the not-configured screen. No rail exists yet, and the
  surface is the page rather than the ink, so the pill wears page colours here.

  This is the most important of the three placements and the easiest to leave out. Somebody who
  reads Spanish meets this app at its sign-in screen, and the picker is no use to them if it
  only appears after they have read an English page well enough to get through it.
*/
.sign-in-mark .lang {
  margin-left: var(--s-sm);
  border-color: var(--line);
  background: var(--surface);
}

.sign-in-mark .lang button {
  color: var(--ink3);
}

.sign-in-mark .lang button:hover {
  color: var(--ink);
}

.sign-in-mark .lang button[aria-pressed='true'] {
  background: var(--accent-wash);
  color: var(--accent-ink);
}