/* Frogjet TI-84 overrides (CSP-safe) */
:root{ --fj-fg:#e9ffe9; --fj-bg:#0a0f0b; --fj-border:#223325; --fj-acc:#84cc16; --fj-pri:#16a34a; }
.fj-wrap{max-width:1100px;margin-inline:auto;padding:clamp(16px,2.5vw,28px)}
.fj-hero{display:grid;gap:8px;margin:8px 0 20px}
.fj-muted{opacity:.8}
.fj-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:1000px){.fj-grid{grid-template-columns:minmax(340px,480px) 1fr}}

.fj-ti84{border-radius:18px;padding:14px;background:linear-gradient(180deg,#111,#1a1a1a);box-shadow:0 10px 30px rgba(0,0,0,.3);border:1px solid #222}
.fj-screen{background:#0d0f10;border-radius:10px;border:1px solid #222;padding:12px;min-height:84px;color:var(--fj-fg);font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.fj-screen .expr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fj-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.fj-toolbar button{border-radius:999px;border:1px solid #2a2a2a;background:#121517;padding:8px 12px;color:var(--fj-fg);cursor:pointer}
.fj-toolbar button.active{outline:2px solid var(--fj-acc)}

.fj-keypad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.fj-key{border:1px solid #2a2a2a;background:#171a1c;color:#fafafa;border-radius:10px;padding:12px 10px;user-select:none;cursor:pointer;text-align:center}
.fj-key.fn{background:#13251a}
.fj-key.op{background:#1b1f21}
.fj-key.eq{background:linear-gradient(180deg,var(--fj-pri),var(--fj-acc));color:#0b1b10;font-weight:700;border-color:#1f441f}
.fj-key.wide{grid-column:span 2}

.fj-panel{background:#0f1411;border:1px solid var(--fj-border);border-radius:14px;padding:14px}
.fj-panel h2{margin:.2rem 0 10px;font-size:1rem}

.fj-rows{display:grid;gap:10px}
.fj-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fj-row label{min-width:72px}
.fj-row input[type="text"], .fj-row input[type="number"], .fj-row select{flex:1;min-width:160px;padding:10px;border-radius:10px;border:1px solid #26402b;background:#0f1411;color:var(--fj-fg)}
.fj-row button{padding:10px 14px;border-radius:10px;border:1px solid #1e3422;background:#13251a;color:var(--fj-fg);cursor:pointer}

.fj-graph{background:#0b0d0c;border:1px solid #142016;border-radius:12px;padding:10px;position:relative}
.fj-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:.9rem}
.fj-chip{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:#111a14;border:1px solid #17351e}
.fj-trace{position:absolute;left:10px;bottom:10px;background:#0d1410;border:1px solid #1f3525;border-radius:10px;padding:8px 10px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;color:var(--fj-fg);pointer-events:none;max-width:98%}
.fj-trace p{margin:0;line-height:1.3}

.fj-funlist{display:grid;gap:8px}
.fj-funrow{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:8px;align-items:center}
.fj-funrow input[type="text"]{min-width:220px}
.fj-funrow .vis{width:20px;height:20px;border-radius:4px;border:1px solid #2a4b31;background:#0f1411;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.fj-funrow .clr{width:28px;height:28px;border-radius:6px;border:1px solid #2a4b31;background:#0f1411;cursor:pointer}
.fj-funrow .del{border:1px solid #4a1f1f;background:#1b1111;color:#ffbaba}

.fj-ad{border:1px dashed #2c5d33;border-radius:12px;padding:14px;display:flex;justify-content:center;align-items:center;color:#2c5d33}

.fj-graph canvas{display:block;width:100%;height:auto;max-height:480px}
/* Make FAQ readable on light background */
.faq details{
  border:1px solid #d9efe0;
  border-radius:10px;
  padding:.6rem .8rem;
  background:#f7fff9;      /* light card */
  color:#0e1b12;           /* dark text */
}
.faq details[open]{ background:#f2fbf4; }
.faq summary{ cursor:pointer; font-weight:600; color:inherit; }
.faq p{ color:inherit; }
/* Force light FAQ even if dark theme styles exist */
.faq details{
  border:1px solid #d9efe0 !important;
  border-radius:10px;
  background:#f7fff9 !important;   /* light card */
  color:#0e1b12 !important;         /* dark text */
  overflow:hidden;
}
.faq summary{
  background:#f7fff9 !important;    /* ensure collapsed header is light */
  color:#0e1b12 !important;
  padding:.6rem .8rem;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  list-style:none;
}
.faq details[open]{ background:#f2fbf4 !important; }
.faq details[open] summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.faq details > *:not(summary){ padding:.6rem .8rem .8rem; }
.faq summary::marker{ content:""; } /* hide default arrow for consistency */
/* Inline alignment for Examples + Share controls next to "+ Add function" */
.inline-controls {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: 0.5rem;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .inline-controls {
    width: 100%;
    margin: 0.5rem 0 0;
  }
}