/* code.css, code blocks, copy buttons, and the animated terminal (shared) */

.code-wrap { position: relative; }
.codeblock {
  position: relative;
  background: var(--code-bg); color: var(--code-text);
  border-radius: 14px; padding: 1.1rem 1.2rem; font: .88rem/1.7 var(--mono);
  overflow-x: auto; white-space: pre; border: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%; max-width: 100%;
  text-align: left;
}
.codeblock .c  { color: #7d8590; }   /* comment */
.codeblock .p  { color: #8a9bff; }   /* prompt  */
.codeblock .ok { color: #57ca86; }   /* success */
.codeblock .k  { color: #f2b25e; }   /* key     */
.codeblock + .codeblock { margin-top: 1rem; }

.copy {
  position: absolute; top: .6rem; right: .6rem;
  background: rgba(255, 255, 255, 0.1); color: #f5f5f7; border: none; border-radius: 7px;
  padding: .3rem .6rem; font: 500 .72rem var(--sans); cursor: pointer; opacity: .8;
  transition: opacity .2s, background .2s;
}
.copy:hover { opacity: 1; background: rgba(255, 255, 255, 0.2); }

.cmd-label { font: 600 .8rem var(--sans); color: var(--text-2); margin: 0 0 .5rem; }

/* Terminal, a fake macOS window; home.js types into .term-typer */
.terminal {
  max-width: 720px; margin: 0 auto;
  background: var(--code-bg); border-radius: 18px; overflow: hidden;
  box-shadow: 0 28px 60px rgba(40, 45, 90, 0.34); border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}
[data-theme="dark"] .terminal { box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55); }
.term-bar { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; background: rgba(255, 255, 255, 0.05); }
.term-bar i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.term-bar .r { background: #ff5f57; } .term-bar .y { background: #febc2e; } .term-bar .g { background: #28c840; }
.term-bar span { margin-left: .5rem; color: #8a8a8e; font: 500 .78rem var(--mono); }
.term-body { padding: 1.2rem 1.3rem 1.5rem; font: .9rem/1.7 var(--mono); color: var(--code-text); overflow-x: auto; white-space: pre; max-width: 100%; }
.term-body .p { color: #8a9bff; }
.term-body .c { color: #7d8590; }
.term-body .o { color: #a9adcf; }
.term-body .ok { color: #57ca86; }
.term-cursor { display: inline-block; width: 8px; height: 1.05em; vertical-align: -2px; background: #57ca86; margin-left: 3px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 0%, 48% { opacity: 1; } 52%, 100% { opacity: 0; } }

/* Code tabs (macon.yml showcase) */
.code-tabs { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1.2rem; flex-wrap: wrap; }
.code-tab {
  font: 700 .88rem var(--round); color: var(--text-2);
  background: var(--card); border: 1px solid var(--border); border-radius: 980px;
  padding: .5rem 1.2rem; cursor: pointer; box-shadow: var(--card-shadow);
  transition: transform .2s, color .2s, background .2s, box-shadow .2s;
}
.code-tab:hover { transform: translateY(-2px); color: var(--text); }
.code-tab.active {
  background: var(--accent); color: var(--on-accent); border-color: transparent;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 40%, transparent);
}
.code-pane { display: none; }
.code-pane.active { display: block; animation: fadeUp .45s cubic-bezier(.2, .7, .2, 1); }

@media (max-width: 620px) {
  .term-body { font-size: .72rem; padding: 1rem 1.1rem 1.2rem; }
  .codeblock { font-size: .74rem; padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .term-cursor { display: none; } }