:root {
  /* Never orange — see feedback_no_orange memory. Violet is the current pick (previously
     blue); accent-2 stays a contrasting teal for the locale switcher's active state.
     accent-light is the same violet lifted for text/links sitting directly on a dark
     (--panel/--panel-soft) background — --accent alone reads too dark/low-contrast there. */
  --accent: #8257e6;
  --accent-light: #a988f0;
  --accent-2: #3ecfc5;
  --ink: #1a1a1a;
  --paper: #ffffff;
  --panel: #121212;
  --panel-soft: #1e1e1e;
}

* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-copyright {
  text-align: center;
  font-size: 0.75rem;
  color: #ccc;
  padding: 2rem 1.5rem;
}

/* A quiet "jump to admin" link shown only to the logged-in site owner on otherwise-public pages. */
.admin-peek {
  color: #bbb;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: normal;
  margin-left: 0.5rem;
}

.admin-peek:hover {
  color: var(--accent);
}

/* Lives inline inside the site-wide navbar (see layouts/_navbar.html.erb, which yields
   :locale_switcher) on whichever pages set it — a small, subdued connected button group,
   quieter than the surrounding nav so it doesn't compete with the main links. The active
   language gets its own color (a cool teal) rather than the navbar's warm accent, so the two
   "active" states — current section vs. current language — don't read as the same thing. */
.locale-switcher {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
}

.locale-switcher a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.55rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.15s ease, color 0.15s ease;
}

.locale-switcher a:last-child {
  border-right: none;
}

.locale-switcher a:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.locale-switcher a.active {
  background: var(--accent-2);
  color: #06302c;
}

.locale-switcher-flag {
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.9;
}

.locale-switcher-label {
  line-height: 1;
}

@media (max-width: 620px) {
  .locale-switcher-label {
    display: none;
  }

  .locale-switcher a {
    padding: 0.35rem 0.45rem;
  }
}