/* Forjed launcher. Every rule is prefixed .fjl so it cannot touch the host page.
   Colours are the site's own tokens; Forjed Blue is #1e00ff exactly.

   Lifted verbatim from the <style> block of docs/launcher-embed.html. When
   forjed.xyz updates the launcher, re-copy that block's rules into this file and
   leave the host adaptations at the bottom alone. */
.fjl { position: relative; display: inline-block;
  --fjl-surface:#f9fafc; --fjl-surface-2:#f2f4f8; --fjl-border:#e0e3ea;
  --fjl-fg:#111111; --fjl-muted:#5a606c; --fjl-accent:#1e00ff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  .fjl:not([data-fjl-theme="light"]) {
    --fjl-surface:#18181c; --fjl-surface-2:#1f2026; --fjl-border:#2b2c34;
    --fjl-fg:#f0f1f4; --fjl-muted:#9fa2ac;
  }
}
.fjl[data-fjl-theme="dark"] {
  --fjl-surface:#18181c; --fjl-surface-2:#1f2026; --fjl-border:#2b2c34;
  --fjl-fg:#f0f1f4; --fjl-muted:#9fa2ac;
}

.fjl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  border: 1px solid var(--fjl-border); background: var(--fjl-surface);
  color: var(--fjl-fg); border-radius: 3px; transition: color .2s, border-color .2s;
}
.fjl-btn:hover { color: var(--fjl-accent); border-color: var(--fjl-accent); }
.fjl-btn:focus-visible { outline: 2px solid var(--fjl-accent); outline-offset: 2px; }

.fjl-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 2147483000;
  width: 280px; box-sizing: border-box;
  border: 1px solid var(--fjl-border); background: var(--fjl-surface);
  border-radius: 3px; box-shadow: 0 20px 45px -32px rgba(0,0,0,.55);
}
.fjl-panel[hidden] { display: none; }

/* Under 480px the trigger is rarely far enough from the left edge for a
   280px panel to fit beside it, so it becomes a sheet inset from both gutters. */
@media (max-width: 480px) {
  .fjl-panel { position: fixed; top: auto; left: 12px; right: 12px; width: auto; margin-top: 8px; }
}

.fjl-head {
  margin: 0; padding: 10px 12px 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 9.6px; letter-spacing: .18em; text-transform: uppercase; color: var(--fjl-muted);
}
.fjl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; }
.fjl-app {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px; text-align: center; text-decoration: none; border-radius: 3px;
  transition: background .2s;
}
.fjl-app:hover { background: var(--fjl-surface-2); }
.fjl-app:focus-visible { outline: 2px solid var(--fjl-accent); outline-offset: -2px; }
.fjl-name { font-size: 11px; line-height: 1.25; color: var(--fjl-fg); }

.fjl-ico {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 3px; overflow: hidden; flex: none;
}
.fjl-ico-fj { background: var(--fjl-accent); color: #fff; }
.fjl-letter { height: 13px; width: auto; display: block; }

/* Resulti keeps its own artwork, which is drawn for a light background, so it
   gets a white tile. The source is a 1080x1080 canvas holding a 416x493 logo
   sitting left of centre — about 62% of it is transparent padding — so it is
   scaled up and nudged back to the middle to fill the tile like the other two. */
.fjl-ico-resulti { background: #fff; }
.fjl-ico-resulti img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transform: scale(1.8) translate(-4%, 4.9%);
}

.fjl-all {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; text-decoration: none;
  border-top: 1px solid var(--fjl-border);
  font-size: 12px; color: var(--fjl-muted); transition: color .2s;
}
.fjl-all:hover { color: var(--fjl-accent); }

/* ------------------------------------------------------------------------
   Host adaptations for resulti.org. Everything above this line is the shared
   launcher; everything below is specific to this site.
   ------------------------------------------------------------------------ */

/* styleslol.css sets `a:hover, a:active { background-color: red }` site-wide,
   which reaches into the panel. .fjl-app already outranks it, .fjl-all does not. */
.fjl a:hover,
.fjl a:active {
  background-color: transparent;
}

.fjl .fjl-app:hover {
  background-color: var(--fjl-surface-2);
}

/* The button sits at the left of the header, not the right, so the panel opens
   rightward (tutorial section 6). Scoped above 480px so the full-width mobile
   sheet above keeps its own left/right values. */
@media (min-width: 481px) {
  .fjl .fjl-panel {
    right: auto;
    left: 0;
  }
}