/* Technical (cat 3) - V13: 5 blocks, reader-friendly palette (May 10 2026) */
:root {
  --tech-arch: #0e7490;
  --tech-arch-bg: hsl(187, 78%, 96%);
  --tech-code: #0e7490;
  --tech-code-bg: #f8fafc;
  --tech-code-text: #1e293b;
  --tech-code-border: #e2e8f0;
  --tech-api: #0f766e;
  --tech-api-bg: hsl(174, 78%, 96%);
  --tech-sec: #b91c1c;
  --tech-sec-bg: hsl(0, 78%, 96%);
  --tech-stack: #4338ca;
  --tech-stack-bg: hsl(243, 70%, 96%);
}

.tech-architecture,.code-snippet,.api-endpoint,.security-callout,.tech-stack{
  margin-block:18px;border-radius:8px;padding:clamp(14px,3vw,18px);
  font-size:15px;line-height:1.6;
}
.tech-architecture .content-block-header,
.code-snippet .content-block-header,
.api-endpoint .content-block-header,
.security-callout .content-block-header,
.tech-stack .content-block-header{
  font-weight:600;margin-block-end:12px;display:flex;align-items:center;gap:8px;
}

/* 1. tech-architecture (CYAN with subtle gradient) */
.tech-architecture{
  background:linear-gradient(135deg,var(--tech-arch-bg) 0%,#fff 100%);
  border-left:4px solid var(--tech-arch);
}
.tech-architecture .content-block-header{color:var(--tech-arch)}
.tech-architecture strong{color:color-mix(in srgb,var(--tech-arch) 80%,black)}
.tech-architecture ul{margin-block:8px;padding-inline-start:24px;background:#fff;padding-block:14px;border-radius:4px}

/* 2. code-snippet (READER-FRIENDLY: light bg, near-black text, teal accent) */
.code-snippet{
  background:var(--tech-code-bg);
  border-left:4px solid var(--tech-code);
  border-top:0.5px solid var(--tech-code-border);
  border-right:0.5px solid var(--tech-code-border);
  border-bottom:0.5px solid var(--tech-code-border);
  color:#0f172a;
  position:relative;
}
.code-snippet .content-block-header{color:#0f172a;font-weight:600}
.code-snippet .code-lang{
  display:inline-block;background:var(--tech-code);color:#fff;
  padding:3px 12px;border-radius:3px;font-size:11px;
  font-weight:600;text-transform:uppercase;letter-spacing:1px;
  margin-block-end:10px;
}
.code-snippet pre{
  background:#ffffff;padding:16px;border-radius:4px;
  border:0.5px solid var(--tech-code-border);
  overflow-x:auto;margin:0;
}
.code-snippet code{
  font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  font-size:13px;color:var(--tech-code-text);line-height:1.7;
  white-space:pre-wrap;word-break:break-word;
}
.code-snippet code br{display:block;content:""}
.code-snippet .code-copy{
  position:absolute;top:14px;right:14px;
  background:#fff;color:#0f172a;
  border:0.5px solid #cbd5e1;padding:6px 14px;border-radius:4px;
  font-size:12px;font-weight:500;cursor:pointer;
  transition:background 0.2s,border-color 0.2s;
}
.code-snippet .code-copy:hover{background:#f1f5f9;border-color:#94a3b8}
.code-snippet .code-copy:focus-visible{outline:2px solid var(--tech-code);outline-offset:2px}
.code-snippet .code-explanation{
  margin:14px 0 0;padding-top:14px;
  border-top:0.5px solid var(--tech-code-border);
  font-size:14px;color:#475569;line-height:1.7;
}

/* 3. api-endpoint (TEAL with method badges) */
.api-endpoint{
  background:var(--tech-api-bg);
  border-left:4px solid var(--tech-api);
  border-radius:8px;
}
.api-endpoint .content-block-header{color:var(--tech-api)}
.api-endpoint strong{color:color-mix(in srgb,var(--tech-api) 80%,black)}
.api-endpoint .api-method{
  display:inline-block;padding:4px 12px;border-radius:4px;
  font-weight:700;font-size:12px;letter-spacing:1px;
  margin-inline-end:10px;color:#fff;
}
.api-endpoint .method-get{background:#16a34a}
.api-endpoint .method-post{background:#2563eb}
.api-endpoint .method-put{background:#d97706}
.api-endpoint .method-delete{background:#dc2626}
.api-endpoint .method-patch{background:#7c3aed}
.api-endpoint .api-path{
  background:#fff;padding:6px 12px;border-radius:4px;
  font-family:monospace;font-size:14px;color:#0f172a;
  display:inline-block;
}

/* 4. security-callout (RED with severity badges) */
.security-callout{
  background:var(--tech-sec-bg);
  border-left:4px solid var(--tech-sec);
}
.security-callout .content-block-header{color:var(--tech-sec)}
.security-callout strong{color:color-mix(in srgb,var(--tech-sec) 85%,black)}
.security-callout .sec-severity{
  display:inline-block;padding:3px 10px;border-radius:3px;
  font-weight:700;font-size:11px;letter-spacing:1px;
  margin-inline-end:8px;color:#fff;text-transform:uppercase;
}
.security-callout .sev-critical{background:#7f1d1d}
.security-callout .sev-high{background:#b91c1c}
.security-callout .sev-medium{background:#d97706}
.security-callout .sev-low{background:#65a30d}

/* 5. tech-stack (INDIGO with version pills) */
.tech-stack{
  background:var(--tech-stack-bg);
  border-left:4px solid var(--tech-stack);
}
.tech-stack .content-block-header{color:var(--tech-stack)}
.tech-stack strong{color:color-mix(in srgb,var(--tech-stack) 80%,black)}
.tech-stack .stack-item{
  display:inline-block;background:#fff;padding:6px 14px;border-radius:6px;
  margin:4px;border:0.5px solid var(--tech-stack);font-size:14px;color:#0f172a;
}
.tech-stack .stack-version{
  font-family:monospace;font-size:12px;color:var(--tech-stack);
  margin-inline-start:6px;
}