/* Technical (cat 3) - V12: 5 blocks with COPY button (May 1 2026) */
:root {
  --tech-arch: #0e7490;
  --tech-arch-bg: hsl(187, 78%, 96%);
  --tech-code: #581c87;
  --tech-code-bg: #1e1b3a;
  --tech-code-text: #e9d5ff;
  --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 (DARK PURPLE with COPY button) */
.code-snippet{
  background:var(--tech-code-bg);
  border-left:4px solid var(--tech-code);
  color:var(--tech-code-text);
  position:relative;
}
.code-snippet .content-block-header{color:#c4b5fd}
.code-snippet .code-lang{
  display:inline-block;background:var(--tech-code);color:#fff;
  padding:2px 10px;border-radius:3px;font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:1px;
  margin-block-end:8px;
}
.code-snippet pre{
  background:#0f0f23;padding:14px;border-radius:4px;
  overflow-x:auto;margin:0;
}
.code-snippet code{
  font-family:'Cascadia Code','JetBrains Mono','Consolas',monospace;
  font-size:13px;color:#e9d5ff;line-height:1.5;
}
.code-snippet .code-copy{
  position:absolute;top:14px;right:14px;
  background:var(--tech-code);color:#fff;
  border:none;padding:6px 14px;border-radius:4px;
  font-size:12px;font-weight:600;cursor:pointer;
  transition:background 0.2s;
}
.code-snippet .code-copy:hover{background:#7c3aed}
.code-snippet .code-copy:focus-visible{outline:2px solid #c4b5fd;outline-offset:2px}

/* 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:4px 12px;border-radius:4px;
  font-weight:700;font-size:11px;letter-spacing:1px;
  text-transform:uppercase;margin-block-end:8px;
}
.security-callout .sev-low{background:#dcfce7;color:#166534;border:1px solid #86efac}
.security-callout .sev-medium{background:#fef3c7;color:#a16207;border:1px solid #fcd34d}
.security-callout .sev-high{background:#fed7aa;color:#9a3412;border:1px solid #fb923c}
.security-callout .sev-critical{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.security-callout .sec-ref{
  font-style:italic;color:#666;font-size:13px;margin-block-start:6px;
}

/* 5. tech-stack (INDIGO with badges) */
.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-tier{
  margin-block:6px;padding:8px 12px;background:#fff;
  border-radius:4px;border:1px solid hsl(243,30%,90%);
}
.tech-stack .tech-badge{
  display:inline-block;background:var(--tech-stack);color:#fff;
  padding:2px 10px;border-radius:12px;font-size:12px;
  margin:2px;font-weight:600;
}

/* Phase 5 mask-image icons */
.tech-architecture .content-block-header::before,
.code-snippet .content-block-header::before,
.api-endpoint .content-block-header::before,
.security-callout .content-block-header::before,
.tech-stack .content-block-header::before{
  content:'';display:inline-block;width:18px;height:18px;
  background-color:currentColor;mask-size:contain;
  mask-repeat:no-repeat;mask-position:center;flex-shrink:0;
}
.tech-architecture .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E")}
.code-snippet .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4'/%3E%3C/svg%3E")}
.api-endpoint .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E")}
.security-callout .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'/%3E%3C/svg%3E")}
.tech-stack .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10'/%3E%3C/svg%3E")}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
  .code-snippet .code-copy{transition:none}
}

/* Mobile responsive */
@media (max-width:768px){
  .code-snippet .code-copy{position:static;margin-block-start:8px;width:100%}
  .tech-stack .stack-tier{font-size:14px}
  .api-endpoint .api-path{display:block;margin-block-start:6px;word-break:break-all}
}