/* =====================================================================
   The Salt Line — the one element every Lightly-Salted property carries.

   Loaded three ways, all off this single file: <link>ed by the main site
   and the two sub-domain hubs, and inlined into network-embed.php's script
   for the docroots that can't include PHP (the game sites, lvbbs, the shop).

   Two rules keep it safe on eleven very different pages:

   1. EVERY selector is prefixed .ls-net. It lands on top of Bootstrap
      (lvbbs), Storefront (shop), game-template.css (r22r/martin/pachinko)
      and beltzfilled's local fork — all of which already own .nav, .btn,
      .footer and bare `a`/`ul` rules. Nothing here may leak out, and
      anything inherited in has to be restated rather than assumed.
   2. COLOUR IS BORROWED, NOT DECLARED. The two design systems name their
      tokens differently — site.css has --paper/--surface/--ink/--accent,
      game-template.css has --bg/--panel/--ink/--yellow — so each value
      walks a var() chain through both vocabularies before falling back to
      studio gold. That's what makes one file look native on the lake-blue
      site and the highway-amber one. Sites with no tokens at all
      (starlitfair, lvbbs, shop) land on the fallback, which is the point.
   ===================================================================== */

.ls-net {
  --ls-bg:     var(--dark,   var(--panel-alt, var(--bg, #0e0d11)));
  --ls-ink:    var(--ink,    #ece6db);
  --ls-muted:  var(--dark-muted, var(--muted, var(--grey, #8f8778)));
  --ls-accent: var(--accent, var(--yellow, #daa520));
  --ls-line:   var(--line,   rgba(255, 255, 255, .14));
  --ls-type:   var(--font-type, var(--body, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)));

  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 2rem 1.25rem 2.25rem;
  background: var(--ls-bg);
  border-top: 1px solid var(--ls-line);
  color: var(--ls-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

.ls-net *,
.ls-net *::before,
.ls-net *::after { box-sizing: border-box; }

.ls-net__inner {
  max-width: var(--container, var(--maxw, 1180px));
  margin: 0 auto;
  display: grid;
  gap: 1.75rem;
}

/* ---- The wordmark ---------------------------------------------------- */
/* Typographic on purpose: the main site hotlink-blocks images for any
   referer that isn't *.lightly-salted.com, and starlitfair.com isn't one.
   Text also dodges the tight img-src in all three CSPs at once. */
.ls-net__brand { display: block; }

.ls-net__mark {
  display: block;
  margin: 0;
  font-family: var(--ls-type);
  font-size: 1.15rem;
  letter-spacing: .02em;
  color: var(--ls-ink);
}

.ls-net__mark::before {
  content: "\25C4\00A0";           /* ◄ — the cartridge-bar tick the game sites already wear */
  color: var(--ls-accent);
}

.ls-net__tagline {
  margin: .35rem 0 0;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ls-muted);
}

/* ---- The roster ------------------------------------------------------ */
.ls-net__groups {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: 1fr;
}

.ls-net__group { min-width: 0; }

.ls-net__group-title {
  margin: 0 0 .6rem;
  font-family: var(--ls-type);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ls-accent);
}

.ls-net__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ls-net__item {
  margin: 0 0 .3rem;
  padding: 0;
  list-style: none;
}
.ls-net__item::marker { content: none; }

.ls-net__link,
.ls-net__here,
.ls-net__soon {
  display: inline-block;
  padding: .1rem 0;
  font-size: .92rem;
  text-decoration: none;
  background: none;
  border: 0;
}

.ls-net__link {
  color: var(--ls-ink);
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.ls-net__link:hover,
.ls-net__link:focus-visible {
  color: var(--ls-accent);
  border-bottom-color: var(--ls-accent);
  text-decoration: none;
}

.ls-net__link:focus-visible {
  outline: 2px solid var(--ls-accent);
  outline-offset: 3px;
}

/* You are here — plain text, never a link back to the page you're on. */
.ls-net__here {
  color: var(--ls-accent);
  cursor: default;
}
.ls-net__here::after {
  content: "\00A0\2190 you are here";
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--ls-muted);
}

/* Not shipped yet (pachinko) — listed so the universe is complete, dimmed
   so nobody follows it into a coming-soon stub. */
.ls-net__soon {
  color: var(--ls-muted);
  cursor: default;
}
.ls-net__soon::after {
  content: "\00A0\00B7 soon";
  font-size: .74rem;
  letter-spacing: .06em;
}

/* ---- Legal line ------------------------------------------------------ */
.ls-net__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ls-line);
  font-size: .78rem;
  color: var(--ls-muted);
}

/* ---- Escape hatch ---------------------------------------------------- */
/* Forces the studio palette when a host site's own tokens collide with the
   chain above — Storefront's light theme on the shop is the likely one.
   Set with data-ls-theme="studio" on the embed script tag. Must stay after
   .ls-net: same specificity, so source order is what decides it. */
.ls-net--studio {
  --ls-bg:     #0e0d11;
  --ls-ink:    #ece6db;
  --ls-muted:  #8f8778;
  --ls-accent: #daa520;
  --ls-line:   rgba(255, 255, 255, .14);
  --ls-type:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (min-width: 640px) {
  .ls-net__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .ls-net__inner {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
  .ls-net__legal { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-net__link { transition: none; }
}