/* ============================================================
   TFhost CLI Reference — Shared Stylesheet
   ============================================================ */

:root {
  --bg:          #0b0f14;
  --surface:     #111720;
  --surface2:    #181f2a;
  --surface3:    #1e2736;
  --border:      #252e3d;
  --border2:     #2e3a4e;
  --text:        #dde4ef;
  --muted:       #6b7a94;
  --faint:       #3a4558;

  --blue:        #4d9fff;
  --blue-dim:    rgba(77,159,255,.12);
  --green:       #3ecf8e;
  --green-dim:   rgba(62,207,142,.12);
  --amber:       #f5a623;
  --amber-dim:   rgba(245,166,35,.12);
  --red:         #f06060;
  --red-dim:     rgba(240,96,96,.12);
  --purple:      #a78bfa;
  --purple-dim:  rgba(167,139,250,.12);
  --teal:        #38bdf8;
  --teal-dim:    rgba(56,189,248,.12);

  --mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;

  --radius-sm: 5px;
  --radius:    8px;
  --radius-lg: 12px;

  --nav-h: 58px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.65; min-height: 100vh; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: .85em; background: var(--surface3); padding: 1px 6px; border-radius: 4px; color: var(--amber); }

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 200;
  height: var(--nav-h);
  background: rgba(11,15,20,.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 1.5rem; gap: 1.25rem;
}
.nav-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--text); white-space: nowrap; text-decoration: none;
}
.nav-brand-icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.nav-links {
  display: flex; gap: 2px; flex: 1;
}
.nav-link {
  font-size: 13px; font-weight: 500;
  padding: 5px 12px; border-radius: var(--radius-sm);
  color: var(--muted); text-decoration: none;
  transition: color .15s, background .15s;
  white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.nav-link:hover { color: var(--text); background: var(--surface2); text-decoration: none; }
.nav-link.active { color: var(--blue); background: var(--blue-dim); }
.nav-link .nav-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 20px;
  background: var(--surface3); color: var(--muted); font-weight: 600;
}
.nav-search-wrap { position: relative; }
.nav-search-icon {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 14px; pointer-events: none;
}
.nav-search {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 12px 6px 30px;
  color: var(--text); font-size: 13px; font-family: var(--sans);
  width: 220px; outline: none; transition: border-color .2s, width .2s;
}
.nav-search:focus { border-color: var(--blue); width: 280px; }
.nav-search::placeholder { color: var(--faint); }

/* ── HERO ── */
.hero {
  padding: 3.5rem 1.5rem 2.5rem;
  max-width: 960px; margin: 0 auto;
  text-align: center;
}
.hero-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--green); margin-bottom: .9rem;
}
.hero h1 {
  font-size: clamp(26px,5vw,42px); font-weight: 700;
  line-height: 1.15; letter-spacing: -.025em;
  margin-bottom: .9rem;
}
.hero h1 em { font-style: normal; color: var(--blue); }
.hero-sub {
  font-size: 15px; color: var(--muted);
  max-width: 520px; margin: 0 auto 2rem;
  line-height: 1.7;
}
.hero-stats {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.hero-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 20px;
  font-size: 13px; color: var(--muted);
}
.hero-stat b { display: block; font-size: 22px; font-weight: 700; color: var(--text); }

/* ── FILTER BAR ── */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 1.5rem 1.75rem;
  max-width: 960px; margin: 0 auto;
  justify-content: center;
}
.fbtn {
  font-size: 12px; font-weight: 500;
  padding: 5px 14px; border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent; color: var(--muted);
  cursor: pointer; transition: all .15s; font-family: var(--sans);
}
.fbtn:hover { border-color: var(--blue); color: var(--blue); }
.fbtn.on { background: var(--blue); border-color: var(--blue); color: #0b0f14; font-weight: 600; }

/* ── MAIN CONTENT ── */
.content { max-width: 960px; margin: 0 auto; padding: 0 1.5rem 6rem; }

/* ── SECTION DIVIDERS ── */
.sec-head {
  display: flex; align-items: center; gap: 10px;
  margin: 2.25rem 0 1rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--border);
}
.sec-head h2 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.lvl-badge {
  font-size: 10px; font-weight: 700; padding: 2px 9px;
  border-radius: 20px; text-transform: uppercase; letter-spacing: .06em;
}
.lvl-beginner     { background: var(--green-dim);  color: var(--green);  }
.lvl-intermediate { background: var(--amber-dim);  color: var(--amber);  }
.lvl-advanced     { background: var(--purple-dim); color: var(--purple); }

/* ── COMMAND CARD ── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: 10px;
  overflow: hidden; transition: border-color .2s;
  cursor: pointer;
}
.card:hover   { border-color: var(--border2); }
.card.open    { border-color: var(--blue); }

.card-head {
  display: flex; align-items: flex-start;
  gap: 13px; padding: 14px 16px;
}
.card-icon {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0; border: 1px solid var(--border);
}
.card-meta { flex: 1; min-width: 0; }
.card-top  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.card-name {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--blue);
}
.cat-tag {
  font-size: 10px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 7px; font-weight: 500;
}
.card-short { font-size: 13px; color: var(--muted); }
.card-chevron {
  color: var(--faint); font-size: 18px; line-height: 1;
  transition: transform .2s; flex-shrink: 0; margin-top: 3px;
  user-select: none;
}
.card.open .card-chevron { transform: rotate(180deg); color: var(--blue); }

.card-body { display: none; padding: 0 16px 16px; }
.card.open .card-body { display: block; }

.card-desc {
  font-size: 13.5px; color: #b0bac9; line-height: 1.75;
  border-top: 1px solid var(--border); padding-top: 13px;
  margin-bottom: 14px;
}

/* ── FLAGS TABLE ── */
.flags-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 7px;
}
.flags-tbl { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.flags-tbl td { padding: 5px 8px; vertical-align: top; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.flags-tbl tr:last-child td { border-bottom: none; }
.flags-tbl td:first-child { font-family: var(--mono); color: var(--amber); white-space: nowrap; width: 140px; }
.flags-tbl td:last-child { color: var(--muted); }

/* ── TERMINAL ── */
.terminal {
  background: #060a0f; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 10px;
}
.term-bar {
  background: var(--surface2); padding: 7px 12px;
  display: flex; align-items: center; gap: 5px;
  border-bottom: 1px solid var(--border);
}
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot-r { background: #ff5f56; } .dot-a { background: #ffbd2e; } .dot-g { background: #27c93f; }
.term-title { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: 5px; flex: 1; }
.copy-btn {
  background: none; border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 9px;
  font-size: 11px; color: var(--muted); cursor: pointer;
  transition: all .15s; font-family: var(--sans);
}
.copy-btn:hover { border-color: var(--blue); color: var(--blue); }
.copy-btn.copied { color: var(--green); border-color: var(--green); }

.term-body { padding: 12px 14px; }
.t-line {
  display: flex; gap: 7px; font-family: var(--mono);
  font-size: 12.5px; line-height: 1.65; min-height: 1.65em;
}
.t-prompt { white-space: nowrap; flex-shrink: 0; }
.t-prompt .pu { color: var(--green); }
.t-prompt .ph { color: var(--purple); }
.t-prompt .ps { color: var(--blue); }
.t-cmd  { color: var(--text); white-space: pre-wrap; word-break: break-all; }
.t-out  { color: var(--faint); font-size: 12px; padding-left: 0; }
.t-out .t-cmd { color: #5a6a82; }
.t-out .ok  { color: var(--green); }
.t-out .warn { color: var(--amber); }
.t-out .err  { color: var(--red); }
.t-out .info { color: var(--blue); }
.t-out .hl   { color: var(--teal); }
.t-comment   { color: #3a4d5c; }

/* TIP BOX */
.tip {
  margin-top: 11px; padding: 10px 13px;
  background: var(--blue-dim); border: 1px solid rgba(77,159,255,.2);
  border-radius: var(--radius); font-size: 13px; color: #93b4d6; line-height: 1.65;
}
.tip strong { color: var(--blue); }

/* WARNING BOX */
.warn-box {
  margin-top: 11px; padding: 10px 13px;
  background: var(--red-dim); border: 1px solid rgba(240,96,96,.2);
  border-radius: var(--radius); font-size: 13px; color: #d4838d; line-height: 1.65;
}
.warn-box strong { color: var(--red); }

/* ── NO RESULTS ── */
.no-results {
  text-align: center; padding: 5rem 1rem;
  color: var(--muted); font-size: 15px;
}
.no-results .nr-icon { font-size: 36px; display: block; margin-bottom: 1rem; }

/* ── INDEX PAGE CARDS ── */
.index-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 16px; margin-top: 2rem;
  max-width: 960px; margin: 2rem auto 0; padding: 0 1.5rem 5rem;
}
.index-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem;
  text-decoration: none; color: var(--text);
  transition: border-color .2s, transform .15s, box-shadow .2s;
  display: block;
}
.index-card:hover {
  border-color: var(--blue); text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.index-card-icon { font-size: 28px; margin-bottom: .75rem; }
.index-card-title { font-size: 17px; font-weight: 700; margin-bottom: .35rem; }
.index-card-desc  { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 1rem; }
.index-card-meta  { display: flex; gap: 8px; flex-wrap: wrap; }
.index-card-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 20px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--muted); font-family: var(--mono);
}
.index-card-arrow {
  float: right; color: var(--blue); font-size: 18px;
  margin-top: -28px;
}

/* ── FOOTER ── */
footer {
  text-align: center; padding: 1.5rem;
  font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--border);
}

/* ── RESPONSIVE ── */
@media(max-width:700px){
  .nav-links { display: none; }
  .nav-search { width: 160px; }
  .nav-search:focus { width: 190px; }
  .hero { padding: 2.5rem 1rem 2rem; }
  .filter-bar, .content { padding-left: 1rem; padding-right: 1rem; }
  .flags-tbl td:first-child { width: 100px; }
}