/* goa-app-kit — the language switch and the theme switch.

   Uses only the family ROLE tokens (the syntrofi profile contract:
   --bg-raised, --fg, --fg-soft, --line, --line-strong, --accent-fg,
   --accent-wash, --focus, --radius-sm, --font-text, --dur). Each one has a
   neutral fallback, so the switches are readable in an app that does not
   define it.

   Light and dark come from `color-scheme`, through light-dark(). The app sets
   the three color-scheme rules of ~/fleet/guides/dark-light.md.

   Do not edit a vendored copy. Edit the skill and run goa-kit-sync. */

.goa-lang,
.goa-theme {
  --goa-fg:       var(--fg,          light-dark(#1f1f1f, #f2f2f2));
  --goa-fg-soft:  var(--fg-soft,     light-dark(#3d3d3d, #d6d6d6));
  --goa-line:     var(--line,        light-dark(rgba(0, 0, 0, .12), rgba(255, 255, 255, .16)));
  --goa-line-2:   var(--line-strong, light-dark(rgba(0, 0, 0, .28), rgba(255, 255, 255, .32)));
  --goa-card:     var(--bg-raised,   light-dark(#ffffff, #1e1e1e));
  --goa-accent:   var(--accent-fg,   light-dark(#1a5fb4, #8cb4ff));
  --goa-wash:     var(--accent-wash, light-dark(#e3ecf8, #1d2a3d));
  --goa-focus:    var(--focus,       light-dark(#1a5fb4, #8cb4ff));
  --goa-dur:      var(--dur, 160ms);

  box-sizing: border-box;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  font-family: var(--font-text, system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-size: .875rem;
  line-height: 1.2;
}
.goa-lang *, .goa-theme * { box-sizing: border-box; }

/* The language switch is a nav, a list and links. In a header it meets app
   rules such as `body.plain header nav` (0,1,2). The class is doubled to reach
   (0,2,0) without an extra element. */
.goa-lang.goa-lang {
  display: inline-flex;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* Hidden from sight, not from assistive tech. A radio hidden this way still
   takes focus and arrow keys. */
.goa-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- one segmented track: the language links and the three theme modes -- */
/* The theme switch is labels and inputs, and app CSS styles those. An app rule
   such as `body.plain label { display: block; margin: … }` is (0,1,2). So each
   rule that resets the track, an option or its input is (0,2,0) or more.
   Do not use !important. Do not use @layer: unlayered app CSS beats any layer. */
.goa-lang .goa-lang__list {
  display: inline-flex;
  float: none;
  width: auto;
  margin: 0;
  padding: 2px;
  list-style: none;
  border: 1px solid var(--goa-line-2);
  border-radius: var(--radius-sm, 12px);
  background: var(--goa-card);
}
.goa-lang .goa-lang__item {
  display: flex;
  float: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Equal columns, each as wide as the widest label. */
.goa-theme .goa-theme__modes {
  display: inline-grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  float: none;
  width: auto;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--goa-line-2);
  border-radius: var(--radius-sm, 12px);
  background: var(--goa-card);
}

.goa-theme .goa-sw__opt {
  position: relative;
  display: flex;
  flex: none;
  float: none;
  width: auto;
  max-width: none;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

/* The radio or checkbox stays in the accessibility tree and takes focus.
   An app `input` rule (width: 100%, min-height: 44px …) must not show it. */
.goa-theme .goa-sw__opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

/* ---- the full switch: equal segments, stacked when one row does not fit --
   The .goa-theme box takes the width of its line. The visible track inside
   it takes the width of its content. The wrapper .goa-theme__fit holds only
   the three options and is the size container, so the sun toggle beside it
   does not count. When the wrapper is narrower than the row of options, the
   options stack in one column. Each label stays on one line. The thresholds
   are the row width of the longest label in each language ("Podľa systému",
   "System") at the kit font size. */
.goa-theme:not(.goa-theme--compact) {
  display: flex;
  width: 100%;
  align-items: flex-start;
}
.goa-theme .goa-theme__fit {
  display: flex;
  margin: 0;
  padding: 0;
}
/* No grow: the sun toggle stays next to the track. It wraps under the track
   when the line has no room for both. */
.goa-theme:not(.goa-theme--compact) .goa-theme__fit {
  container: goa-theme / inline-size;
  flex: 0 1 32em;
  min-width: 0;
}
/* A flex header must not squeeze the compact switch below 44 px. */
.goa-theme.goa-theme--compact { flex: none; }
.goa-theme .goa-sw__label { white-space: nowrap; }

.goa-lang .goa-lang__link,
.goa-theme .goa-sw__face {
  display: inline-flex;
  margin: 0;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .75rem;
  border-radius: calc(var(--radius-sm, 12px) - 3px);
  color: var(--goa-fg-soft);
  font-weight: 500;
  text-decoration: none;
}
/* A theme switch animates only after goa-theme.js has shown the stored state.
   Otherwise each load would fade from the server's "System" to the real choice. */
.goa-lang .goa-lang__link,
.goa-theme[data-goa-ready] .goa-sw__face {
  transition: background-color var(--goa-dur), color var(--goa-dur);
}
.goa-lang .goa-lang__link { letter-spacing: .04em; }
.goa-sw__icon { flex: none; width: 20px; height: 20px; }
.goa-theme .goa-sw__face { flex: 1 1 auto; }   /* fills its column, so the selected wash does too */
.goa-theme--compact .goa-sw__face { padding: 0; }

@container goa-theme (width < 32em) {
  .goa-theme:not(:lang(en)) .goa-theme__modes { grid-auto-flow: row; }
  .goa-theme:not(:lang(en)) .goa-theme__modes .goa-sw__face { justify-content: flex-start; }
}
@container goa-theme (width < 22em) {
  .goa-theme .goa-theme__modes { grid-auto-flow: row; }
  .goa-theme .goa-theme__modes .goa-sw__face { justify-content: flex-start; }
}

.goa-lang__link:hover,
.goa-sw__opt:hover .goa-sw__face { color: var(--goa-fg); }

/* The selected state is not colour alone: weight and a ring change too. */
.goa-lang__link[aria-current="true"],
.goa-sw__opt input:checked + .goa-sw__face {
  background: var(--goa-wash);
  color: var(--goa-accent);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--goa-accent);
}

/* ---- the sun toggle: a separate control beside the track ---------------- */
.goa-theme__sun .goa-sw__face {
  border: 1px solid var(--goa-line-2);
  border-radius: var(--radius-sm, 12px);
  background: var(--goa-card);
  min-height: 50px;            /* the track height: 44 + 2 × (2 padding + 1 border) */
}

/* ---- focus: a visible ring, keyboard only -------------------------------- */
.goa-lang__link:focus-visible,
.goa-sw__opt input:focus-visible + .goa-sw__face {
  outline: 3px solid var(--goa-focus);
  outline-offset: 2px;
}

/* Windows high contrast: the wash is dropped, so mark the choice with a border. */
@media (forced-colors: active) {
  .goa-lang__link[aria-current="true"],
  .goa-sw__opt input:checked + .goa-sw__face { outline: 2px solid CanvasText; outline-offset: -2px; }
}

@media (prefers-reduced-motion: reduce) {
  .goa-lang, .goa-theme { --goa-dur: 0s; }
}