/* goa-app-kit — the family footer (v0).

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

   Light and dark come from `color-scheme`, through light-dark(). The app sets
   `color-scheme` on <html>. An app that switches dark mode only with a class
   (for example `.dark`) must also set `color-scheme: dark` on that class, or
   this footer stays light.

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

.goa-foot {
  --goa-fg:        var(--fg,          light-dark(#1f1f1f, #f2f2f2));
  --goa-fg-soft:   var(--fg-soft,     light-dark(#3d3d3d, #d6d6d6));
  --goa-fg-muted:  var(--fg-muted,    light-dark(#595959, #b3b3b3));
  --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-focus:     var(--focus,       light-dark(#1a5fb4, #8cb4ff));

  box-sizing: border-box;
  margin-top: 3rem;
  padding: 1.5rem 16px calc(1.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--goa-line);
  color: var(--goa-fg-muted);
  font-family: var(--font-text, system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-size: .875rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.goa-foot *, .goa-foot *::before, .goa-foot *::after { box-sizing: inherit; }
.goa-foot > * { max-width: 64rem; margin-inline: auto; }
.goa-foot ul { list-style: none; margin: 0; padding: 0; }
.goa-foot p { margin-block: .5rem 0; text-align: center; }

/* ---- sister apps: one column on a phone, a row of cards on a wide screen */
.goa-foot__apps { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
@media (min-width: 40rem) {
  .goa-foot__apps { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
.goa-foot__app {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  padding: .5rem .75rem;
  border: 1px solid var(--goa-line);
  border-radius: var(--radius-sm, 12px);
  background: var(--goa-card);
  color: var(--goa-fg);
  text-decoration: none;
}
.goa-foot__app:hover { border-color: var(--goa-line-2); }
.goa-foot__mark { flex: none; width: 28px; height: 28px; }
.goa-foot__app-text { display: flex; flex-direction: column; min-width: 0; }
.goa-foot__name { font-weight: 600; color: var(--goa-fg); }
.goa-foot__tagline { color: var(--goa-fg-muted); }

/* ---- the app's own links ------------------------------------------------ */
.goa-foot__links { margin-top: 1rem; }
.goa-foot__links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .25rem; }
.goa-foot__links a,
.goa-foot__maker a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: .5rem;
  color: var(--goa-fg-soft);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.goa-foot__maker a { color: var(--goa-accent); font-weight: 600; }

/* ---- focus: a visible ring on every link, keyboard only ------------------ */
.goa-foot a:focus-visible {
  outline: 3px solid var(--goa-focus);
  outline-offset: 2px;
  border-radius: 6px;
}