/* LFM terminal chrome — boot strip + command bar.
   On Store / Resources / 404 (NOT the homepage, NOT the TG series).
   Self-hosted, CSP-safe (no external origins). Plain and legible — no glow. */

#lfm-boot,#lfm-cmd,#lfm-pal,#lfm-out{
  --tc-ink:#e9e7e1; --tc-mut:#a6a49e; --tc-green:#84c98a;
  --tc-red:#cf362f; --tc-ln:rgba(255,255,255,.10);
  --tc-lt:#4a4f57; --tc-dk:#090a0b;
  --tc-fl:'JetBrains Mono',ui-monospace,monospace;
  box-sizing:border-box;
}
#lfm-boot *,#lfm-cmd *,#lfm-pal *,#lfm-out *{box-sizing:border-box}

/* ── Top boot strip ─────────────────────────────────────────── */
#lfm-boot{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px clamp(16px,4vw,34px);
  font-family:var(--tc-fl); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; mix-blend-mode:difference; pointer-events:none;
}
#lfm-boot .tc-id{display:flex; align-items:center; gap:9px}
#lfm-boot .tc-mk{width:10px; height:10px; background:var(--tc-red); flex:0 0 auto}
#lfm-boot .tc-path{opacity:.9}
#lfm-boot .tc-soc{display:flex; align-items:center; gap:14px}
#lfm-boot .tc-soc a{display:flex; color:#fff; opacity:.82; transition:opacity .15s; pointer-events:auto}
#lfm-boot .tc-soc a:hover{opacity:1}
#lfm-boot .tc-soc svg{width:16px; height:16px; display:block}

/* ── Bottom command bar ─────────────────────────────────────── */
#lfm-cmd{
  position:fixed; left:0; right:0; bottom:0; z-index:130;
  display:flex; align-items:center; gap:12px;
  padding:11px clamp(16px,4vw,34px);
  padding-bottom:calc(11px + env(safe-area-inset-bottom));
  min-height:46px;
  background:#2b2e33;
  border-top:1px solid var(--tc-dk); box-shadow:inset 0 2px 0 var(--tc-lt);
  font-family:var(--tc-fl); font-size:16px; color:var(--tc-ink);
  transition:transform .35s ease, opacity .35s ease;
}
/* homepage: hidden until you scroll past the hero, then slides up into view */
#lfm-cmd.tc-veil{transform:translateY(112%); opacity:0; pointer-events:none}
#lfm-cmd .tc-prompt{color:var(--tc-green); font-weight:700; flex:0 0 auto; letter-spacing:.01em; white-space:nowrap}
#lfm-cmd input{
  flex:1 1 auto; min-width:0; background:transparent; border:0; outline:0;
  font-family:var(--tc-fl); font-size:16px; color:var(--tc-ink); letter-spacing:.02em;
  caret-color:var(--tc-green);
}
#lfm-cmd input::placeholder{color:var(--tc-mut); opacity:.85}
#lfm-cmd .tc-hint{flex:0 0 auto; color:var(--tc-mut); font-size:13px; letter-spacing:.12em; text-transform:uppercase; opacity:.8}
@media(max-width:560px){
  #lfm-cmd .tc-hint{display:none}
  #lfm-cmd input{font-size:16px}   /* avoid iOS focus-zoom */
  #lfm-cmd .tc-prompt{font-size:14px}
}

/* ── Shell scrollback (output from typed commands) ───────────── */
#lfm-out{
  position:fixed; left:0; right:0; bottom:46px; z-index:135;
  display:none; padding:0 clamp(16px,4vw,34px);
  font-family:var(--tc-fl); pointer-events:none;
}
#lfm-out.tc-show{display:block}
#lfm-out{max-height:min(56vh,460px); overflow:auto}
#lfm-out > *{
  max-width:680px; pointer-events:auto;
  background:#1c1f23; border:1px solid var(--tc-ln); border-bottom:0;
  padding:8px 16px; font-size:15px; line-height:1.58; color:var(--tc-ink);
}
#lfm-out > *:first-child{border-top:0}
#lfm-out .tc-echo{color:var(--tc-mut)}
#lfm-out .tc-echo .tc-pr{color:var(--tc-green)}
#lfm-out .tc-out{box-shadow:0 -10px 30px rgba(0,0,0,.4)}
#lfm-out pre{
  margin:0; font-family:var(--tc-fl); font-size:15px; line-height:1.58;
  color:var(--tc-ink); white-space:pre-wrap; word-break:break-word;
}
/* `find` / `locate` results — path rows in the scrollback (clickable when a page exists) */
#lfm-out .tc-hits{display:flex; flex-direction:column}
#lfm-out .tc-hit{
  display:flex; align-items:baseline; gap:12px; padding:5px 0; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.05);
}
#lfm-out .tc-hit:last-child{border-bottom:0}
#lfm-out .tc-hit .tc-cmd{color:var(--tc-green); font-size:15px; flex:1 1 auto; min-width:0; word-break:break-all}
#lfm-out .tc-hit .tc-desc{color:var(--tc-mut); font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; flex:0 0 auto}
#lfm-out a.tc-hit:hover{background:rgba(255,255,255,.06)}
#lfm-out a.tc-hit:hover .tc-cmd{color:#9fe7bd}
#lfm-out .tc-noopen .tc-cmd{color:var(--tc-mut)}   /* container dir / non-page: not a link */

/* ── Command palette ────────────────────────────────────────── */
#lfm-pal{
  position:fixed; left:0; right:0; bottom:46px; z-index:140;
  display:none; padding:0 clamp(16px,4vw,34px);
  font-family:var(--tc-fl);
}
#lfm-pal.tc-open{display:block}
#lfm-pal .tc-list{
  max-width:540px;
  background:#1c1f23; border:1px solid var(--tc-ln); border-bottom:0;
  box-shadow:0 -12px 40px rgba(0,0,0,.55);
  max-height:min(54vh,440px); overflow:auto;
}
#lfm-pal .tc-row{
  display:flex; align-items:baseline; gap:12px; padding:11px 16px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05); color:var(--tc-ink);
}
#lfm-pal .tc-row:last-child{border-bottom:0}
#lfm-pal .tc-cmd{color:var(--tc-green); font-size:16px; letter-spacing:.02em; flex:0 0 auto; min-width:112px}
#lfm-pal .tc-desc{color:var(--tc-mut); font-size:14px}
#lfm-pal .tc-ext{margin-left:auto; color:var(--tc-mut); font-size:12px; letter-spacing:.12em; opacity:.7; flex:0 0 auto}
#lfm-pal .tc-row.tc-sel,#lfm-pal .tc-row:hover{background:rgba(255,255,255,.07)}
#lfm-pal .tc-row.tc-sel .tc-cmd{color:#9fe7bd}
#lfm-pal .tc-empty{padding:13px 16px; color:var(--tc-mut); font-size:14px}

/* ── fzf interactive finder ─────────────────────────────────── */
#lfm-fzf{
  position:fixed; left:0; right:0; bottom:46px; z-index:160;
  display:none; padding:0 clamp(16px,4vw,34px); font-family:var(--tc-fl);
}
#lfm-fzf.fz-open{display:block}
#lfm-fzf .fz-box{
  max-width:680px;
  background:#1c1f23; border:1px solid var(--tc-ln); border-bottom:0;
  box-shadow:0 -16px 50px rgba(0,0,0,.6);
}
#lfm-fzf .fz-in{
  width:100%; box-sizing:border-box; background:transparent; border:0;
  border-bottom:1px solid var(--tc-ln); outline:0; padding:11px 16px;
  font-family:var(--tc-fl); font-size:16px; color:var(--tc-ink); caret-color:var(--tc-green);
}
#lfm-fzf .fz-in::placeholder{color:var(--tc-mut); opacity:.85}
#lfm-fzf .fz-list{max-height:min(50vh,420px); overflow:auto}
#lfm-fzf .fz-row{
  display:flex; align-items:baseline; gap:12px; padding:6px 16px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.04);
}
#lfm-fzf .fz-row:last-child{border-bottom:0}
#lfm-fzf .fz-path{color:var(--tc-ink); font-size:15px; flex:1 1 auto; min-width:0; word-break:break-all}
#lfm-fzf .fz-kind{color:var(--tc-mut); font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; flex:0 0 auto}
#lfm-fzf .fz-row.fz-sel{background:rgba(255,255,255,.07)}
#lfm-fzf .fz-row.fz-sel .fz-path{color:#9fe7bd}
#lfm-fzf .fz-empty{padding:13px 16px; color:var(--tc-mut); font-size:14px}

/* ── learn: lesson cards in the footer scrollback ── */
#lfm-out .tc-lsn{--tc-amber:#cf362f}
#lfm-out .tc-lsn-track{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--tc-mut); margin-bottom:7px}
#lfm-out .tc-lsn-head{display:flex; align-items:baseline; gap:9px; margin-bottom:6px}
#lfm-out .tc-lsn-step{font-size:12px; color:#070a08; background:var(--tc-green); padding:1px 6px; border-radius:2px; font-weight:700; flex:0 0 auto}
#lfm-out .tc-lsn-title{color:#9fe7bd; font-size:16px; font-weight:600}
#lfm-out .tc-lsn-teach{color:var(--tc-ink); line-height:1.72; font-size:16px}
#lfm-out .tc-lsn-do{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap}
#lfm-out .tc-lsn-tag{font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--tc-amber); flex:0 0 auto}
#lfm-out .tc-lsn-cmd{font-size:15px; color:#9fe7bd; background:rgba(91,191,134,.1); border:1px solid var(--tc-ln); padding:5px 10px; border-radius:3px}
#lfm-out .tc-lsn-cmd::before{content:"$ "; color:var(--tc-mut)}
#lfm-out .tc-lsn-ctl{margin-top:10px; font-size:12px; color:var(--tc-mut); opacity:.7}
#lfm-out .tc-ok{color:var(--tc-green); font-weight:600}
#lfm-out .tc-next{color:var(--tc-ink); margin-top:6px; font-size:14px}
#lfm-out .tc-next b{color:#9fe7bd}
#lfm-out .tc-hintline{color:#cf362f}
/* clickable command chip (help / learn menu) */
#lfm-out .tc-chip{display:inline-block; color:#9fe7bd; background:rgba(91,191,134,.1); border:1px solid var(--tc-ln); padding:2px 9px; border-radius:3px; cursor:pointer; transition:background .15s,border-color .15s}
#lfm-out .tc-chip::before{content:"$ "; color:var(--tc-mut)}
#lfm-out .tc-chip:hover{background:rgba(91,191,134,.2); border-color:var(--tc-green)}
/* grouped help */
#lfm-out .tc-help-intro{color:var(--tc-ink); margin-bottom:4px; font-size:15px}
#lfm-out .tc-help-sec{color:#cf362f; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; margin:11px 0 6px}
#lfm-out .tc-help-grid{display:grid; grid-template-columns:minmax(120px,210px) 1fr; gap:4px 16px; align-items:baseline}
#lfm-out .tc-help-c{color:var(--tc-green); font-size:14px}
#lfm-out .tc-help-d{color:var(--tc-mut); font-size:14px; line-height:1.5}
#lfm-out .tc-help-foot{color:var(--tc-mut); margin-top:12px; font-size:10.5px; opacity:.85}
/* learn track cards */
#lfm-out .tc-lm-head{color:var(--tc-ink); margin-bottom:8px; font-size:15px}
#lfm-out .tc-lm-card{border-left:2px solid var(--tc-green); padding:8px 12px; margin:7px 0; background:rgba(91,191,134,.05)}
#lfm-out .tc-lm-title{color:#9fe7bd; font-weight:600; font-size:15px}
#lfm-out .tc-lm-count{color:var(--tc-mut); font-size:12px; margin-left:8px}
#lfm-out .tc-lm-blurb{color:var(--tc-ink); font-size:14px; line-height:1.65; margin:6px 0 10px}

/* keep page content clear of the fixed command bar (added by JS) */
body.tc-on{padding-bottom:calc(50px + env(safe-area-inset-bottom))}

/* ── nano: full-screen text editor (the `nano` command) ── */
#lfm-ed{position:fixed; inset:0; z-index:150; display:none; flex-direction:column;
  background:#070807; font-family:var(--tc-fl); color:var(--tc-ink)}
#lfm-ed.ed-open{display:flex}
#lfm-ed .ed-bar{flex:0 0 auto; display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:8px 14px; font-size:14px; letter-spacing:.04em}
#lfm-ed .ed-top{background:var(--tc-green); color:#04130c; font-weight:700}
#lfm-ed .ed-flag{font-size:13px; text-transform:uppercase; letter-spacing:.12em; opacity:.85}
#lfm-ed .ed-area{flex:1 1 auto; width:100%; resize:none; border:0; outline:none;
  background:#070807; color:var(--tc-ink); font-family:var(--tc-fl); font-size:14px; line-height:1.5;
  padding:14px; white-space:pre; overflow:auto; tab-size:4; -moz-tab-size:4}
#lfm-ed .ed-foot{background:#0c140f; border-top:1px solid var(--tc-ln); color:var(--tc-mut)}
#lfm-ed .ed-foot b{color:var(--tc-green); font-weight:700}
#lfm-ed .ed-msg{color:var(--tc-amber); font-size:13px; text-align:right; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}