/* ============================================================
   CATBACK footer — pixel network-station band.
   Markup is injected by nav.js (additive: the original
   .footer-brand / .footer-note / #footer-sim-note elements are
   MOVED into the new slots, never removed). All layout below is
   gated on .sf-ready so the no-JS fallback keeps base.css's
   simple centered footer.
   ============================================================ */

/* ---------------- elevated band ---------------- */

/* THE BUILDING DIRECTORY: the footer is the brass-headed directory
   board by the branch doors — opaque stone face, engraved plate. */
.site-footer.sf-ready {
  padding: 0;
  text-align: left;
  background-color: var(--ink-2);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, var(--scanline) 3px 6px),
    linear-gradient(180deg, var(--ink-3), var(--ink-2) 55%, var(--ink));
  border-top: var(--px) solid var(--forest-2);
  box-shadow:
    0 calc(-1 * var(--px)) 0 var(--brass),
    0 -14px 34px var(--shade);
}

/* the directory nameplate, straddling the top edge of the board */
.site-footer.sf-ready::before {
  content: 'BUILDING DIRECTORY';
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  padding: 6px 12px 5px;
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
  color: var(--terminal);
  background: linear-gradient(180deg,
    var(--brass-hi) 0 12%, var(--brass) 12% 74%, var(--brass-lo) 74% 100%);
  box-shadow:
    0 0 0 var(--px) var(--ink-3),
    0 0 0 calc(2 * var(--px)) var(--charcoal),
    0 calc(2 * var(--px)) 0 0 var(--shade-soft);
  pointer-events: none;
}

/* ---------------- pixel skyline strip (decorative) ----------------
   Stepped building silhouettes drawn with repeating gradients:
   two front rows (near-black, 2px cap highlight) over a distant
   forest-green row, plus a blinking amber beacon on the tall
   towers. Sits just above the footer border, over the page bg. */

.sf-skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 46px;
  pointer-events: none;
  background-image:
    /* sparse tall towers (front) : fill then 2px cap */
    repeating-linear-gradient(90deg,
      var(--ink-3) 0 26px, transparent 26px 187px,
      var(--ink-3) 187px 205px, transparent 205px 419px),
    repeating-linear-gradient(90deg,
      var(--forest-2) 0 26px, transparent 26px 187px,
      var(--forest-2) 187px 205px, transparent 205px 419px),
    /* main front row : fill then 2px cap */
    repeating-linear-gradient(90deg,
      var(--ink-3) 0 34px, transparent 34px 46px,
      var(--ink-3) 46px 88px, transparent 88px 99px,
      var(--ink-3) 99px 132px, transparent 132px 187px,
      var(--ink-3) 187px 216px, transparent 216px 311px),
    repeating-linear-gradient(90deg,
      var(--forest-2) 0 34px, transparent 34px 46px,
      var(--forest-2) 46px 88px, transparent 88px 99px,
      var(--forest-2) 99px 132px, transparent 132px 187px,
      var(--forest-2) 187px 216px, transparent 216px 311px),
    /* distant row, deep green */
    repeating-linear-gradient(90deg,
      var(--forest) 0 21px, transparent 21px 29px,
      var(--forest) 29px 55px, transparent 55px 60px,
      var(--forest) 60px 82px, transparent 82px 121px,
      var(--forest) 121px 150px, transparent 150px 233px),
    /* faint horizon glow along the band edge */
    linear-gradient(180deg, transparent 0 45%, var(--glow-soft));
  background-repeat: repeat-x;
  background-size:
    419px 36px,
    419px 38px,
    311px 26px,
    311px 28px,
    233px 44px,
    100% 100%;
  background-position:
    89px bottom,
    89px bottom,
    0 bottom,
    0 bottom,
    34px bottom,
    0 bottom;
}

/* beacon: 3px amber dot on top of each tall tower (tile = 419px) */
.sf-skyline::after {
  content: '';
  position: absolute;
  left: 100px;
  bottom: 38px;
  width: 3px;
  height: 3px;
  background: var(--amber);
  box-shadow:
    419px 0 0 var(--amber),
    838px 0 0 var(--amber),
    1257px 0 0 var(--amber),
    1676px 0 0 var(--amber);
  opacity: 0.85;
  animation: cb-sf-beacon 2.6s steps(1, end) infinite;
}
@keyframes cb-sf-beacon {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.15; }
}

/* ---------------- three-column station grid ---------------- */

.sf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) minmax(0, 1.3fr);
  gap: clamp(28px, 4.5vw, 56px);
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 54px) 20px 34px;
}

.sf-head {
  margin: 0 0 14px;
  padding-bottom: 8px;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--terminal-dim);
  /* each column heading is an engraved brass-ruled directory row */
  border-bottom: var(--px) solid var(--brass);
}
.sf-head::before { content: '▪ '; color: var(--c-emerald); }

/* ----- BRAND column ----- */

.sf-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-family: var(--font-pixel);
  font-size: 17px;
  letter-spacing: 2px;
  color: var(--terminal);
  text-shadow: 2px 2px 0 var(--forest), 0 0 14px var(--glow-soft);
  transition: color var(--dur-fast) var(--ease-snap);
}
.sf-note {
  width: 36px;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* the pre-existing brand line becomes the one-liner under the wordmark */
.site-footer.sf-ready .footer-brand {
  margin: 12px 0 0;
  font-size: 10px;
  line-height: 1.7;
  color: var(--c-emerald);
  text-align: left;
  max-width: none;
}

/* ----- NETWORK column ----- */

.sf-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sf-links a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 2px 4px;
  font-family: var(--font-term);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--terminal-soft);
  transition: color var(--dur-fast) var(--ease-snap);
}
/* reserved-width hover marker — mirrors the toolbar, no layout shift */
.sf-links a::before {
  content: '▸ ';
  color: var(--terminal);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-snap);
}
.sf-links a:hover,
.sf-links a:focus-visible { color: var(--terminal); }
.sf-links a:hover::before,
.sf-links a:focus-visible::before { opacity: 1; }

/* ----- STATUS column ----- */

.site-footer.sf-ready .footer-sim {
  margin: 0 0 16px;
  max-width: none;
  text-align: left;
  font-size: 17px;
  line-height: 1.45;
}
.sf-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
/* chips reuse .nav-chip from nav.css — enlarge to comfortable targets */
.site-footer.sf-ready .sf-social .nav-chip {
  min-height: 40px;
  font-size: 16px;
  padding: 6px 12px;
}

.sf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sf-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--ink-3);
  color: var(--terminal);
  border: var(--px) solid var(--forest-2);
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 var(--px) 0 var(--px) var(--ink), inset 0 calc(-1 * var(--px)) 0 rgba(0, 0, 0, 0.35);
  transition:
    transform var(--dur-fast) var(--ease-snap),
    box-shadow var(--dur-fast) var(--ease-snap),
    color var(--dur-fast) var(--ease-snap);
}
.sf-btn:hover,
.sf-btn:focus-visible {
  color: var(--sol-cyan);
  transform: translateY(-2px);
  box-shadow: 0 var(--px) 0 var(--px) var(--ink), 0 0 12px var(--glow-soft);
}
.sf-btn:active { transform: translateY(1px); }
.sf-btn .sf-btn-ico { color: var(--gold); }
#sf-top .sf-btn-ico { color: inherit; }

/* ---------------- bottom strip ---------------- */

.sf-bottom {
  border-top: var(--px) solid var(--forest);
  background: linear-gradient(180deg, transparent, var(--shade-soft));
}
.sf-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1060px;
  margin: 0 auto;
  padding: 16px 20px 92px; /* bottom clearance for the fixed audio toggle */
}
.sf-netline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--terminal);
}
.sf-dot {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--terminal);
  box-shadow: 0 0 10px var(--glow-terminal);
  animation: cb-sf-dot 1.8s steps(1, end) infinite;
}
@keyframes cb-sf-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.site-footer.sf-ready .footer-note {
  margin: 0;
  max-width: 760px;
  text-align: left;
  font-size: 16px;
}

/* ---------------- stacked mobile layout ---------------- */

@media (max-width: 819.98px) {
  .sf-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .sf-skyline { height: 38px; }
}

/* ---------------- reduced motion ---------------- */
/* base.css's data-motion gate already freezes these; the media
   query covers pre-boot paint. :not([data-motion="full"]) keeps
   the ?motion=full testing override working. */

body[data-motion="reduce"] .sf-dot,
body[data-motion="reduce"] .sf-skyline::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  body:not([data-motion="full"]) .sf-dot,
  body:not([data-motion="full"]) .sf-skyline::after { animation: none; }
}