/* ============================================================ */
/* Terminal-style code blocks — Measureaddict                   */
/* ============================================================ */

.code-block-wrapper {
  margin: 0 0 30px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #3c3836;
}

.code-header {
  background: #1d2021;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid #3c3836;
}

.code-traffic-lights {
  display: flex;
  gap: 6px;
  align-items: center;
}

.code-traffic-lights span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.code-traffic-lights .tl-red    { background: #ff5f57; }
.code-traffic-lights .tl-yellow { background: #febc2e; }
.code-traffic-lights .tl-green  { background: #28c840; }

.code-lang {
  font-family: monospace;
  font-size: 12px;
  color: #928374;
  letter-spacing: 0.03em;
}

.code-copy-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  font-size: 12px;
  font-family: "Open Sans", sans-serif;
  color: #fb4934;
  background: transparent;
  border: 1.5px solid #fb4934;
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.code-copy-btn:hover {
  color: #ebdbb2;
  border-color: #ebdbb2;
}

.code-copy-btn.copied {
  color: #b8bb26;
  border-color: #b8bb26;
}

.code-copy-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Override the theme's default pre/highlight styles inside our wrapper */

.code-block-wrapper .highlight,
.code-block-wrapper pre {
  margin: 0;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.code-block-wrapper pre.chroma {
  background: #282828;
  padding: 16px 16px 16px 22px;
  overflow-x: auto;
}

.code-block-wrapper code {
  background: transparent;
  padding: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #ebdbb2;
}

/* ============================================================ */
/* Chroma token overrides — Gruvbox Dark                        */
/* ============================================================ */

.code-block-wrapper .chroma                { background: #282828; color: #ebdbb2; }
.code-block-wrapper .chroma .err           { color: #fb4934; }

/* Keywords */
.code-block-wrapper .chroma .k,
.code-block-wrapper .chroma .kc,
.code-block-wrapper .chroma .kd,
.code-block-wrapper .chroma .kn,
.code-block-wrapper .chroma .kp,
.code-block-wrapper .chroma .kr            { color: #fb4934; font-weight: normal; }
.code-block-wrapper .chroma .kt            { color: #fabd2f; font-weight: normal; }

/* Names */
.code-block-wrapper .chroma .na            { color: #83a598; }
.code-block-wrapper .chroma .nb            { color: #83a598; }
.code-block-wrapper .chroma .bp            { color: #83a598; }
.code-block-wrapper .chroma .nc            { color: #fabd2f; font-weight: normal; }
.code-block-wrapper .chroma .nd            { color: #fabd2f; }
.code-block-wrapper .chroma .ne            { color: #fb4934; }
.code-block-wrapper .chroma .nf            { color: #fabd2f; font-weight: normal; }
.code-block-wrapper .chroma .ni            { color: #ebdbb2; }
.code-block-wrapper .chroma .nl            { color: #ebdbb2; }
.code-block-wrapper .chroma .nn            { color: #ebdbb2; }
.code-block-wrapper .chroma .no            { color: #ebdbb2; }
.code-block-wrapper .chroma .nt            { color: #83a598; }
.code-block-wrapper .chroma .nx            { color: #ebdbb2; }
.code-block-wrapper .chroma .nv,
.code-block-wrapper .chroma .vc,
.code-block-wrapper .chroma .vg,
.code-block-wrapper .chroma .vi            { color: #ebdbb2; }

/* Strings */
.code-block-wrapper .chroma .s,
.code-block-wrapper .chroma .sa,
.code-block-wrapper .chroma .sb,
.code-block-wrapper .chroma .sc,
.code-block-wrapper .chroma .dl,
.code-block-wrapper .chroma .sd,
.code-block-wrapper .chroma .s2,
.code-block-wrapper .chroma .se,
.code-block-wrapper .chroma .sh,
.code-block-wrapper .chroma .si,
.code-block-wrapper .chroma .sx,
.code-block-wrapper .chroma .s1,
.code-block-wrapper .chroma .ss            { color: #b8bb26; }
.code-block-wrapper .chroma .sr            { color: #8ec07c; }

/* Numbers */
.code-block-wrapper .chroma .m,
.code-block-wrapper .chroma .mb,
.code-block-wrapper .chroma .mf,
.code-block-wrapper .chroma .mh,
.code-block-wrapper .chroma .mi,
.code-block-wrapper .chroma .il,
.code-block-wrapper .chroma .mo            { color: #d3869b; }

/* Operators */
.code-block-wrapper .chroma .o,
.code-block-wrapper .chroma .ow            { color: #fe8019; font-weight: normal; }

/* Comments */
.code-block-wrapper .chroma .c,
.code-block-wrapper .chroma .ch,
.code-block-wrapper .chroma .cm,
.code-block-wrapper .chroma .c1,
.code-block-wrapper .chroma .cs,
.code-block-wrapper .chroma .cp,
.code-block-wrapper .chroma .cpf           { color: #928374; font-style: italic; }

/* Generic */
.code-block-wrapper .chroma .gd            { color: #fb4934; }
.code-block-wrapper .chroma .ge            { font-style: italic; }
.code-block-wrapper .chroma .gi            { color: #b8bb26; }
.code-block-wrapper .chroma .go            { color: #928374; }
.code-block-wrapper .chroma .gs            { font-weight: normal; }
.code-block-wrapper .chroma .gu            { color: #fabd2f; }
.code-block-wrapper .chroma .gt            { color: #fb4934; }
.code-block-wrapper .chroma .gl            { text-decoration: underline; }

/* Line numbers */
.code-block-wrapper .chroma .lnt,
.code-block-wrapper .chroma .ln            { color: #504945; margin-right: 1em; user-select: none; }
.code-block-wrapper .chroma .hl            { background: #3c3836; display: block; width: 100%; }
.code-block-wrapper .chroma .w             { color: #504945; }