/* =============================================================================
   FogoFi app shell, 2026-08-06
   Loaded AFTER the existing panel stylesheets on purpose: the eleven panels are
   carried over byte for byte from the old build, so their own styles must still
   apply, and this layer only owns the chrome around them.
   ========================================================================== */

.ap-body { background: var(--fg-bg); }

/* ---- top bar ---- */
.ap-top {
  position: sticky; top: 0; z-index: 60; height: 58px;
  display: flex; align-items: center; gap: var(--fg-s4);
  padding: 0 var(--fg-s5);
  background: rgba(10, 8, 6, .82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fg-hair);
}
.ap-brand { display: flex; align-items: center; gap: 9px; font-family: var(--fg-display); font-weight: 700; font-size: 15px; }
.ap-top-r { margin-left: auto; display: flex; align-items: center; gap: var(--fg-s2); }
.ap-connect { padding: 8px 16px; font-size: 13px; }

/* ---- shell ---- */
.ap-shell { display: flex; min-height: calc(100vh - 58px); }

/* ---- rail. Five areas, replacing eight flat tabs plus three orphan panels. ---- */
.ap-rail {
  position: sticky; top: 58px; align-self: flex-start;
  height: calc(100vh - 58px); width: 88px; flex: 0 0 88px;
  display: flex; flex-direction: column; gap: 2px; padding: var(--fg-s3) var(--fg-s2);
  border-right: 1px solid var(--fg-hair); background: var(--fg-bg-2);
}
.ap-rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 4px; border: 0; border-radius: var(--fg-r);
  background: transparent; color: var(--fg-faint); cursor: pointer;
  font-family: var(--fg-body); font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  transition: color var(--fg-fast), background var(--fg-fast);
}
.ap-rail-btn svg { width: 21px; height: 21px; }
.ap-rail-btn:hover { color: var(--fg-ink); background: var(--fg-glass); }
.ap-rail-btn.on { color: var(--fg-flame); background: rgba(249, 115, 22, .1); }
/* the active marker is a bar, not a colour change alone, so it survives a colour-blind read */
.ap-rail-btn.on::before {
  content: ""; position: absolute; left: 0; width: 3px; height: 26px;
  border-radius: 0 3px 3px 0; background: var(--fg-flame);
}
.ap-rail-btn { position: relative; }

/* ---- main ---- */
.ap-main { flex: 1; min-width: 0; padding: var(--fg-s6) var(--fg-s6) var(--fg-s16); }

/* ---- sub navigation, only rendered for areas that hold more than one panel ---- */
.ap-subs { margin-bottom: var(--fg-s5); }
.ap-sub { display: flex; gap: var(--fg-s2); flex-wrap: wrap; }
.ap-sub[hidden] { display: none !important; }
[hidden] { display: none !important; }
.ap-chip {
  padding: 7px 15px; border-radius: var(--fg-r-full);
  border: 1px solid var(--fg-hair); background: var(--fg-surface);
  color: var(--fg-dim); font-family: var(--fg-body); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all var(--fg-fast);
}
.ap-chip:hover { color: var(--fg-ink); border-color: var(--fg-hair-2); }
.ap-chip.on { color: #170c02; background: var(--fg-flame); border-color: transparent; }

/* ---- panels. The old build showed everything at once; only the active area renders. ---- */
.tc { display: none; }
.tc.active { display: block; animation: ap-in var(--fg-mid) var(--fg-ease); }
@keyframes ap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- overview ---- */
.ap-hero {
  position: relative; overflow: hidden; border-radius: var(--fg-r-xl);
  border: 1px solid var(--fg-hair); background: linear-gradient(150deg, var(--fg-surface-2), var(--fg-bg-2));
  padding: var(--fg-s10) var(--fg-s8); margin-bottom: var(--fg-s8);
}
.ap-hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: var(--fg-s8); align-items: center; }
.ap-h1 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.08; margin-bottom: var(--fg-s4); }
.ap-h1-sub { color: var(--fg-dim); font-size: var(--fg-t-base); max-width: 46ch; margin: 0 0 var(--fg-s5); }
.ap-hero-cta { display: flex; gap: var(--fg-s3); flex-wrap: wrap; }
.ap-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fg-s3); }
.ap-hero-stats .fg-stat-v { font-size: var(--fg-t-lg); }

.ap-sec-t { font-size: var(--fg-t-lg); margin: var(--fg-s8) 0 var(--fg-s4); }

/* ---- jump grid ---- */
.ap-jump { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--fg-s3); }
.ap-jump-b {
  display: flex; align-items: center; gap: var(--fg-s3); text-align: left;
  padding: var(--fg-s4); border-radius: var(--fg-r-lg);
  border: 1px solid var(--fg-hair); background: linear-gradient(150deg, var(--fg-surface-2), var(--fg-surface));
  color: var(--fg-ink); cursor: pointer; font-family: var(--fg-body);
  transition: transform var(--fg-mid) var(--fg-ease), border-color var(--fg-mid), box-shadow var(--fg-mid);
}
.ap-jump-b:hover { transform: translateY(-4px); border-color: rgba(249, 115, 22, .34); box-shadow: var(--fg-e-glow); }
.ap-jump-ic {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(249, 115, 22, .12); border: 1px solid rgba(249, 115, 22, .22); color: var(--fg-flame);
}
.ap-jump-t { font-weight: 700; font-size: 13.5px; }
.ap-jump-d { font-size: 11.5px; color: var(--fg-faint); }

/* ---- protocol row on overview ---- */
.ap-proto { display: flex; align-items: center; gap: var(--fg-s3); padding: var(--fg-s4);
  border-radius: var(--fg-r-lg); border: 1px solid var(--fg-hair);
  background: linear-gradient(150deg, var(--fg-surface-2), var(--fg-surface));
  transition: transform var(--fg-mid) var(--fg-ease), border-color var(--fg-mid), box-shadow var(--fg-mid); }
.ap-proto:hover { transform: translateY(-4px); border-color: rgba(249,115,22,.34); box-shadow: var(--fg-e-glow); }
.ap-proto img, .ap-proto .ap-letter { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; object-fit: contain; background: rgba(255,255,255,.04); padding: 4px; }
.ap-letter { display: flex; align-items: center; justify-content: center; font-family: var(--fg-display); font-weight: 700; color: #170c02; background: linear-gradient(140deg, var(--fg-amber), var(--fg-flame)); padding: 0; }
.ap-proto-n { font-weight: 700; font-size: 13.5px; }
.ap-proto-k { font-size: 11.5px; color: var(--fg-faint); }
.ap-proto-v { margin-left: auto; font-family: var(--fg-mono); font-size: 13px; color: var(--fg-flame); font-weight: 600; }

/* =============================================================================
   🚨 The old build opened a connect-wallet modal on arrival and blurred the
   whole page behind it, so a first-time visitor saw nothing before being asked
   for a wallet. The modal still exists and still works, it is just no longer
   forced open at load: it opens on an action that genuinely needs an address.
   ========================================================================== */
body > .mo:not(.open), .mo:not(.open) { display: none !important; }
.ap-body .blur, .ap-body .blurred { filter: none !important; }

@media (max-width: 900px) {
  .ap-shell { flex-direction: column; }
  .ap-rail {
    position: sticky; top: 58px; width: auto; height: auto; flex: none;
    flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--fg-hair);
  }
  .ap-rail-btn { flex: 1 0 auto; min-width: 74px; }
  .ap-rail-btn.on::before { left: 0; top: auto; bottom: 0; width: 100%; height: 3px; border-radius: 3px 3px 0 0; }
  .ap-main { padding: var(--fg-s4) var(--fg-s4) var(--fg-s12); }
  .ap-hero { padding: var(--fg-s6) var(--fg-s5); }
  .ap-hero-in { grid-template-columns: 1fr; }
}


/* -----------------------------------------------------------------------------
   The old app stylesheets define --sg: 'Space Grotesk' and load AFTER the design
   system, so headings kept rendering in the old face. This layer loads last, so
   it is the right place to point the legacy variables at Fogo's own fonts rather
   than editing eight inherited stylesheets.
   -------------------------------------------------------------------------- */
:root {
  --sg: 'FunnelDisplay', system-ui, sans-serif;
  --inter: 'InterVar', system-ui, sans-serif;
  --mono: 'FragmentMono', ui-monospace, monospace;
  /* legacy colour aliases pointed at Fogo's real brand, so panels we did not
     rewrite still inherit the correct palette */
  --orange: var(--fg-flame);
  --cyan:   var(--fg-cyan);
  --purple: var(--fg-blue);
  --green:  var(--fg-good);
  --red:    var(--fg-bad);
  --yellow: var(--fg-warn);
  --text1:  var(--fg-ink);
  --text2:  var(--fg-dim);
  --text3:  var(--fg-faint);
  --bg:     var(--fg-bg);
  --glass:  var(--fg-glass);
  --glass-border: var(--fg-hair);
}
h1, h2, h3, h4, .card-t, .ap-h1 { font-family: var(--fg-display); }
.mono, code, pre, [class*="mono"] { font-family: var(--fg-mono); }


/* -----------------------------------------------------------------------------
   Fogo session button, matched to sato.fogofi.com.
   The SDK sizes this button in rem (12rem x 2.5rem, radius 0.5rem). sato sets
   `html, body { font-size: 14px }`, so 1rem is 14px there and the button lands at
   168x35. This app uses the browser default 16px, so the SAME rule rendered at
   192x40, which is actually the spec size. Operator asked for parity with sato,
   so the button is pinned to sato's computed pixels here rather than changing
   this app's root font-size, which would resize every other rem in the build.
   Delete this block to go back to the SDK's own scale.
   -------------------------------------------------------------------------- */
.ap-top .fw-btn { width: 168px; height: 35px; border-radius: 7px; font-size: 13px; }
.ap-top .fw-btn img, .ap-top .fw-btn svg { width: 18px; height: 18px; }