/* Industrial (cat 1) - V10 LEAN: 5 blocks, Web Standard 4.0 multi-color (Apr 29 2026) */
/* CSS Custom Properties for theming */
:root {
  --ind-process: #1e40af;        /* Steel Blue - manufacturing authority */
  --ind-process-bg: hsl(228, 76%, 97%);
  --ind-safety: #ea580c;         /* Safety Orange - high-visibility warnings */
  --ind-safety-bg: hsl(20, 95%, 96%);
  --ind-quality: #166534;        /* Forest Green - quality assurance */
  --ind-quality-bg: hsl(143, 64%, 96%);
  --ind-equipment: #374151;      /* Charcoal - technical specifications */
  --ind-equipment-bg: hsl(217, 13%, 96%);
  --ind-sop: #475569;            /* Slate - procedural documentation */
  --ind-sop-bg: hsl(215, 20%, 96%);
}

/* ===== Common base styling ===== */
.process-flow,.safety-callout,.quality-checkpoint,.equipment-spec,.sop-procedure{
  margin-block:18px;border-radius:6px;padding:clamp(14px,3vw,18px);
  font-size:15px;line-height:1.6;
  box-shadow:0 1px 3px hsla(0,0%,0%,0.05);
}
.process-flow .content-block-header,
.safety-callout .content-block-header,
.quality-checkpoint .content-block-header,
.equipment-spec .content-block-header,
.sop-procedure .content-block-header{
  font-weight:600;margin-block-end:12px;display:flex;align-items:center;gap:8px;
}

/* ===== 1. process-flow (STEEL BLUE - manufacturing authority) ===== */
.process-flow{background:var(--ind-process-bg);border-left:4px solid var(--ind-process)}
.process-flow .content-block-header{color:var(--ind-process)}
.process-flow strong{color:color-mix(in srgb, var(--ind-process) 80%, black)}
.process-flow ol{margin-block:8px;padding-inline-start:24px;background:#fff;padding-block:14px;padding-inline-end:14px;border-radius:4px}
.process-flow ol li{margin-block:6px;padding-inline-start:4px}
.process-flow ol li::marker{color:var(--ind-process);font-weight:700}

/* ===== 2. safety-callout (SAFETY ORANGE - high-visibility warnings) ===== */
.safety-callout{background:var(--ind-safety-bg);border-left:4px solid var(--ind-safety);position:relative}
.safety-callout .content-block-header{color:var(--ind-safety);text-transform:uppercase;letter-spacing:0.5px;font-size:14px}
.safety-callout strong{color:color-mix(in srgb, var(--ind-safety) 85%, black)}
.safety-callout p{margin-block:6px}

/* ===== 3. quality-checkpoint (FOREST GREEN - quality assurance) ===== */
.quality-checkpoint{background:var(--ind-quality-bg);border-left:4px solid var(--ind-quality)}
.quality-checkpoint .content-block-header{color:var(--ind-quality)}
.quality-checkpoint strong{color:color-mix(in srgb, var(--ind-quality) 80%, black)}
.quality-checkpoint p{margin-block:6px}

/* ===== 4. equipment-spec (CHARCOAL - technical specifications) ===== */
.equipment-spec{background:var(--ind-equipment-bg);border-left:4px solid var(--ind-equipment)}
.equipment-spec .content-block-header{color:var(--ind-equipment)}
.equipment-spec strong{color:color-mix(in srgb, var(--ind-equipment) 90%, black)}
.equipment-spec dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin-block:8px;background:#fff;padding:14px;border-radius:4px}
.equipment-spec dt{font-weight:600;color:var(--ind-equipment)}
.equipment-spec dd{margin:0;color:#1f2937}

/* ===== 5. sop-procedure (SLATE - procedural documentation) ===== */
.sop-procedure{background:var(--ind-sop-bg);border-left:4px solid var(--ind-sop)}
.sop-procedure .content-block-header{color:var(--ind-sop)}
.sop-procedure strong{color:color-mix(in srgb, var(--ind-sop) 85%, black)}
.sop-procedure ol{margin-block:8px;padding-inline-start:24px;background:#fff;padding-block:14px;padding-inline-end:14px;border-radius:4px}
.sop-procedure ol li::marker{color:var(--ind-sop);font-weight:700}

/* ===== Phase 5 icon rules (mask-image for content-block-header) ===== */
.process-flow .content-block-header::before,
.safety-callout .content-block-header::before,
.quality-checkpoint .content-block-header::before,
.equipment-spec .content-block-header::before,
.sop-procedure .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;
}
.process-flow .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='M3 7l4 0M3 12l4 0M3 17l4 0M11 7h10M11 12h10M11 17h10'/%3E%3C/svg%3E")}
.safety-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 9v3m0 4h.01M5 19h14l-7-12z'/%3E%3C/svg%3E")}
.quality-checkpoint .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='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E")}
.equipment-spec .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.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065zM15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E")}
.sop-procedure .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='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E")}

/* ===== Accessibility: respect reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .process-flow,.safety-callout,.quality-checkpoint,.equipment-spec,.sop-procedure{
    transition:none;
  }
}

/* ===== Mobile responsive ===== */
@media (max-width: 768px){
  .equipment-spec dl{grid-template-columns:1fr}
  .equipment-spec dt{margin-block-start:8px}
}