/* ---------- top bar ---------- */
/* Like a chat app's header: the name in the middle with the languages line under it, the menu on the right. */
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; row-gap: 2px; padding: 10px 0 8px; }
.bar h1 { grid-column: 2; grid-row: 1; }
.bar .settings-line { grid-column: 1 / -1; grid-row: 2; justify-self: center; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The menu sits top left, where people look for it; the conversation's cost goes under it. */
.bar .gear { grid-column: 1; grid-row: 1; justify-self: start; }
.cost { grid-column: 1; grid-row: 2; justify-self: start; margin: -4px 0 0; background: none; border: 0; padding: 0;
  font-size: var(--text-2xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.gear { display: grid; place-items: center; width: 40px; height: 40px; margin-inline-start: -8px; background: none; border: 0;
  border-radius: var(--radius-round); color: var(--color-text-muted); cursor: pointer; }
.gear:hover { color: var(--color-text); background: var(--color-surface); }
/* The name, handwritten: the one flourish on a screen that is otherwise about being read at a glance. */
h1 { font-family: var(--font-logo); font-size: var(--text-display); line-height: 1; margin: 0;
  font-weight: 400; color: var(--color-action); }