/* site.css — minimal extras on top of Tailwind */
:root {
  --border: #0f172a;
}
.kbd {
  @apply border border-slate-800/70 bg-slate-900/60 rounded px-2 py-0.5 font-mono;
}
.term {
  @apply rounded-xl border border-slate-800/70 overflow-hidden bg-gradient-to-b from-slate-900 to-slate-950 shadow-xl;
}
.term .chrome { @apply flex gap-2 px-3 py-2 border-b border-slate-800/70; }
.term .dot { @apply inline-block w-2.5 h-2.5 rounded-full bg-slate-700; }
@media (prefers-color-scheme: light) {
  .term .dot { background: #d7e3ee }
}
.prose pre code { white-space: pre-wrap; }
.card { @apply rounded-xl border border-slate-800/70 bg-slate-900/40 shadow-xl p-4; }
/* Smooth anchor scrolling; pairs nicely with scroll-mt-24 */
html { scroll-behavior: smooth; }

/* Optional: polish tables inside .card blocks */
.card table { width: 100%; border-collapse: collapse; }
.card th, .card td { @apply border-b border-slate-800/70 py-2 pr-6; }
.card tbody tr:nth-child(even) { @apply bg-slate-900/30; }
/* Better details/summary affordance */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { color: #34d399; /* emerald-400 */ }
html { scroll-behavior: smooth; }

.terminal code {
  position: relative;
  white-space: pre-wrap; /* keep your formatting */
}

/* Caret lives INSIDE the <code> */
.terminal code::after {
  content: "";
  display: inline-block;
  width: .6ch;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.2em;
  background: currentColor;
  opacity: 1;
  animation: heroCaretBlink 1s steps(1,end) infinite;
}

@keyframes heroCaretBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .terminal code::after { animation: none; }
}
/* Controls overlay (non-intrusive, mobile-friendly) */
.term { position: relative; }
.term-controls {
  position: absolute;
  top: 6px; right: 8px;
  display: flex; gap: 6px;
  opacity: 0.9;
}
.term-btn {
  font: 600 11px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(2,6,23,.6);      /* slate-950-ish with alpha */
  color: #cbd5e1;                    /* slate-300 */
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.term-btn:hover { border-color: rgba(148,163,184,.45); }
@media (max-width: 480px) {
  .term-controls { top: 4px; right: 6px; gap: 4px; }
  .term-btn { padding: 3px 6px; font-size: 10px; }
}

/* Caret uses CSS variable so JS can recolor it without changing text color */
.terminal code {
  position: relative;
  white-space: pre-wrap;
  --caret: currentColor; /* default */
}
.terminal code::after {
  content: "";
  display: inline-block;
  width: .6ch;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.2em;
  background: var(--caret);
  opacity: 1;
  animation: heroCaretBlink 1s steps(1,end) infinite;
}
@keyframes heroCaretBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .terminal code::after { animation: none; } }
/* Nice, slim scrollbar for the terminal */
.terminal {
  scrollbar-width: thin;            /* Firefox */
  scrollbar-color: #334155 transparent;
}
.terminal::-webkit-scrollbar { width: 8px; height: 8px; }
.terminal::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; }
.terminal::-webkit-scrollbar-track { background: transparent; }
/* Make sure the pre can't expand its box unexpectedly */
.terminal { box-sizing: border-box; }
.terminal code { white-space: pre-wrap; position: relative; --caret: currentColor; }
.terminal code::after {
  content:""; display:inline-block; width:.6ch; height:1.1em; margin-left:2px;
  vertical-align:-0.2em; background:var(--caret); opacity:1;
  animation: heroCaretBlink 1s steps(1,end) infinite;
}
@keyframes heroCaretBlink { 50% { opacity:0 } }
@media (prefers-reduced-motion: reduce){ .terminal code::after{ animation:none } }