/* ============================================================================
   BlinkNBuild Hardware Academy - Code Blocks & Verilog/SystemVerilog Syntax
   ----------------------------------------------------------------------------
   Highlighting is applied at runtime by assets/js/code-copy.js, which wraps
   tokens in <span class="tok-*"> elements. No external highlighter library is
   loaded - this keeps the pages fast and the CSP tight.

   Markup contract:
     <div class="code-block" data-lang="verilog" data-title="mux4to1.v">
       <div class="code-head">…injected by JS…</div>
       <pre><code>…escaped source…</code></pre>
     </div>
   ========================================================================== */

.code-block {
  position: relative;
  margin: var(--sp-6) 0;
  background: var(--bg-code);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* --- Header bar: filename + language + copy button ---------------------- */

.code-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  min-height: 40px;
}

.code-title {
  font-family: var(--font-code);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.code-lang {
  font-family: var(--font-code);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: rgba(0, 212, 245, 0.1);
  border: 1px solid var(--border-cyan);
  color: var(--cyan-300);
  flex-shrink: 0;
}

.code-lang[data-lang="systemverilog"] {
  background: rgba(155, 127, 232, 0.14);
  border-color: rgba(155, 127, 232, 0.3);
  color: var(--violet-200);
}

/* --- Copy button -------------------------------------------------------- */

.copy-btn {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-subheading);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.copy-btn:hover {
  border-color: var(--border-cyan);
  color: var(--cyan-300);
  background: rgba(0, 212, 245, 0.06);
}

.copy-btn.is-copied {
  border-color: rgba(0, 230, 118, 0.45);
  color: var(--emerald);
  background: rgba(0, 230, 118, 0.08);
}

.copy-btn.is-failed {
  border-color: rgba(255, 82, 82, 0.45);
  color: var(--crimson);
  background: rgba(255, 82, 82, 0.08);
}

/* --- The code surface --------------------------------------------------- */

.code-block pre {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-400) transparent;
}

.code-block pre::-webkit-scrollbar { height: 8px; }
.code-block pre::-webkit-scrollbar-thumb {
  background: var(--neutral-400);
  border-radius: var(--r-full);
}

.code-block code {
  display: block;
  font-family: var(--font-code);
  font-size: 13.5px;
  line-height: 1.75;
  color: #C9D6E8;
  tab-size: 2;
  white-space: pre;
  background: none;
  border: 0;
  padding: 0;
}

/* Optional line numbers (add class="has-lines" to .code-block) */
.code-block.has-lines code { counter-reset: ln; }

.code-block.has-lines .code-line { counter-increment: ln; display: block; }

.code-block.has-lines .code-line::before {
  content: counter(ln);
  display: inline-block;
  width: 2.4em;
  margin-right: var(--sp-4);
  text-align: right;
  color: var(--neutral-400);
  user-select: none;
  -webkit-user-select: none;
}

/* Highlighted line - used to point at the bug in "Spot the Bug" drills */
.code-line.is-flagged {
  background: rgba(255, 82, 82, 0.10);
  box-shadow: inset 3px 0 0 var(--crimson);
}

.code-line.is-good {
  background: rgba(0, 230, 118, 0.08);
  box-shadow: inset 3px 0 0 var(--emerald);
}

/* ============================ Syntax tokens ============================= */

.tok-comment  { color: #5C7089; font-style: italic; }
.tok-string   { color: #A5E887; }
.tok-number   { color: #F8C43E; }

/* Structural keywords: module, always, begin, if, case … */
.tok-keyword  { color: #7EEEF9; font-weight: 600; }

/* Data types: wire, reg, logic, bit, int, integer … */
.tok-type     { color: #9B7FE8; font-weight: 600; }

/* SystemVerilog-specific: always_ff, always_comb, class, covergroup … */
.tok-sv       { color: #F5A623; font-weight: 600; }

/* Compiler directives & system tasks: `timescale, $display, $monitor */
.tok-directive{ color: #EC5E56; }
.tok-system   { color: #F5918B; }

/* Operators and punctuation */
.tok-operator { color: #8FA3BF; }

/* Port direction: input, output, inout */
.tok-port     { color: #00E676; font-weight: 600; }

/* ============================ Diff / annotation ========================= */

.code-block[data-variant="bad"]  { border-color: rgba(255, 82, 82, 0.3); }
.code-block[data-variant="bad"] .code-head {
  background: rgba(255, 82, 82, 0.07);
  border-bottom-color: rgba(255, 82, 82, 0.22);
}
.code-block[data-variant="bad"] .code-title::before {
  content: "\f057"; /* circle-xmark */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--crimson);
  margin-right: 7px;
}

.code-block[data-variant="good"] { border-color: rgba(0, 230, 118, 0.3); }
.code-block[data-variant="good"] .code-head {
  background: rgba(0, 230, 118, 0.07);
  border-bottom-color: rgba(0, 230, 118, 0.22);
}
.code-block[data-variant="good"] .code-title::before {
  content: "\f058"; /* circle-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--emerald);
  margin-right: 7px;
}

/* Side-by-side anti-pattern vs correct pattern */
.code-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}

.code-compare .code-block { margin: 0; min-width: 0; }

@media (max-width: 900px) {
  .code-compare { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .code-block code { font-size: 12.5px; }
  .code-block pre { padding: var(--sp-3); }
  .code-head { padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); }
  .copy-btn span { display: none; } /* icon-only on small screens */
}