/* The theme button outside the landing chrome.
 *
 * The landing header styles the same control as .lc-theme in landing.css,
 * against that page's own tokens. The pages here — pricing, the blog, a
 * shared public portfolio, the four auth pages — load app.css instead, so
 * this is the same control drawn against the app's tokens rather than a
 * second stylesheet being invented for it.
 *
 * The language selector needs nothing new: app.css already carries
 * .lang-field, which is what the auth pages have always used.
 */

.pub-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pub-theme {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.pub-theme:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface);
}

.pub-theme:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* The two icons are stacked in one grid cell and one of them is shown, so the
   button never changes size as the theme changes. */
.pub-theme svg { grid-area: 1 / 1; display: block; }
/* Dark is showing, so the button offers the sun. */
.pub-theme .pub-theme-moon { display: none; }
html[data-theme="light"] .pub-theme .pub-theme-sun { display: none; }
html[data-theme="light"] .pub-theme .pub-theme-moon { display: block; }

/* The auth pages carried the language selector alone, centred under the form.
   The theme button joins it there rather than a bar being added to a layout
   that deliberately has no header. */
.auth-lang { gap: 10px; align-items: center; }