/* ═══════════════════════════════════════════════════════════
   RSMS-Site Design System — Cognitive Load Estimator
   Stack: Vanilla CSS | 0 dependencies | GPU-only motion
   Theme: Dark-first Ultra-Premium
   ═══════════════════════════════════════════════════════════ */

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100dvh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* ═══ DESIGN TOKENS ═══ */
:root{
  /* Spacing */
  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;
  --space-4:1rem;--space-6:1.5rem;--space-8:2rem;
  --space-12:3rem;--space-16:4rem;--space-24:6rem;--space-32:8rem;

  /* Typography */
  --font-base:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --text-xs:clamp(0.7rem,0.65rem + 0.2vw,0.75rem);
  --text-sm:clamp(0.8rem,0.75rem + 0.2vw,0.875rem);
  --text-base:clamp(0.95rem,0.9rem + 0.2vw,1.05rem);
  --text-lg:clamp(1.15rem,1rem + 0.5vw,1.3rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);
  --text-2xl:clamp(2rem,1.5rem + 2.5vw,3.5rem);
  --text-display:clamp(2.5rem,1.5rem + 5vw,4.5rem);
  --leading-tight:1.1;--leading-normal:1.6;--leading-relaxed:1.8;

  /* Colors — Dark Ultra-Premium (FORCED — no light mode) */
  --surface-base:hsl(225 20% 7%);
  --surface-raised:hsl(225 18% 11%);
  --surface-overlay:hsl(225 16% 15%);
  --surface-glass:hsl(225 18% 11% / 0.6);
  --text-primary:hsl(220 15% 95%);
  --text-secondary:hsl(220 10% 64%);
  --text-muted:hsl(220 8% 42%);
  --accent:hsl(160 70% 44%);
  --accent-hover:hsl(160 70% 52%);
  --accent-subtle:hsl(160 70% 44% / 0.1);
  --accent-glow:hsl(160 70% 44% / 0.3);
  --accent-glow-strong:hsl(160 70% 44% / 0.5);
  --border:hsl(225 12% 20%);
  --border-subtle:hsl(225 12% 14%);
  --inner-light:hsl(0 0% 100% / 0.07);
  --inner-light-strong:hsl(0 0% 100% / 0.12);

  /* Result Colors */
  --result-low:hsl(160 70% 50%);
  --result-medium:hsl(42 95% 58%);
  --result-high:hsl(0 75% 62%);

  /* Motion */
  --duration-fast:150ms;
  --duration-normal:250ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1);

  /* Layout */
  --content-width:65ch;
  --page-width:1100px;
  --nav-height:3.5rem;
}

/* ═══ BASE ═══ */
body{
  font-family:var(--font-base);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--text-primary);
  background-color:var(--surface-base);
  background-image:
    linear-gradient(hsl(225 15% 18% / 0.25) 1px,transparent 1px),
    linear-gradient(90deg,hsl(225 15% 18% / 0.25) 1px,transparent 1px);
  background-size:60px 60px;
}

/* Ambient radial glow — depth without cost */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%,hsl(160 50% 15% / 0.3),transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 20%,hsl(225 40% 15% / 0.4),transparent 70%);
}

/* ═══ NAVIGATION ═══ */
.site-nav{
  position:sticky;top:0;z-index:100;
  background:hsl(225 20% 7% / 0.7);
  border-bottom:1px solid var(--border-subtle);
  height:var(--nav-height);
  display:flex;align-items:center;
  padding:0 var(--space-6);
}

@supports(backdrop-filter:blur(1px)){
  .site-nav{
    background:hsl(225 20% 7% / 0.4);
    backdrop-filter:blur(20px) saturate(1.4);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
  }
}

.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:var(--page-width);margin:0 auto;
}

.nav-brand{
  font-size:var(--text-sm);font-weight:700;
  color:var(--accent);letter-spacing:-0.02em;
  white-space:nowrap;
}

.nav-links{display:flex;gap:var(--space-1);align-items:center}

.nav-links a{
  font-size:var(--text-sm);font-weight:500;
  color:var(--text-secondary);padding:var(--space-1) var(--space-3);
  border-radius:6px;
  transition:color var(--duration-fast) ease,background var(--duration-fast) ease;
}

.nav-links a:hover{color:var(--text-primary);background:var(--surface-overlay)}
.nav-links a[aria-current="page"]{color:var(--accent);background:var(--accent-subtle)}

.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  padding:var(--space-2);color:var(--text-secondary);
}
.nav-toggle svg{width:24px;height:24px}

/* ═══ MAIN LAYOUT ═══ */
.page-main{
  position:relative;z-index:1;
  max-width:var(--page-width);margin:0 auto;
  padding:var(--space-12) var(--space-6) var(--space-16);
}

.page-header{
  text-align:center;margin-bottom:var(--space-12);
  max-width:var(--content-width);margin-left:auto;margin-right:auto;
}

.page-header h1{
  font-size:var(--text-2xl);font-weight:800;
  line-height:var(--leading-tight);letter-spacing:-0.03em;
  color:var(--text-primary);margin-bottom:var(--space-4);
}

.page-header .subtitle{
  font-size:var(--text-lg);color:var(--text-secondary);
  line-height:var(--leading-normal);max-width:45ch;margin:0 auto;
}

/* ═══ HERO (Home) ═══ */
.hero{
  min-height:80vh;display:grid;place-items:center;
  padding:var(--space-16) var(--space-6);text-align:center;
  position:relative;z-index:1;
}

.hero-content{
  max-width:55ch;display:flex;flex-direction:column;
  gap:var(--space-6);align-items:center;
}

.hero-eyebrow{
  font-size:var(--text-xs);font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--accent);
  padding:var(--space-1) var(--space-4);
  background:var(--accent-subtle);
  border:1px solid hsl(160 70% 44% / 0.2);
  border-radius:9999px;
}

.hero-title{
  font-size:var(--text-display);font-weight:800;
  line-height:var(--leading-tight);letter-spacing:-0.04em;
}

.hero-title-gradient{
  background:linear-gradient(135deg,var(--text-primary) 20%,var(--accent) 80%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-description{
  font-size:var(--text-lg);color:var(--text-secondary);
  line-height:var(--leading-normal);max-width:42ch;
}

.hero-actions{
  display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center;
  margin-top:var(--space-4);
}

/* ═══ BUTTONS ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--text-sm);font-weight:600;
  padding:var(--space-3) var(--space-8);border-radius:8px;
  border:none;cursor:pointer;
  transition:transform var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-out),
             background var(--duration-fast) ease;
}

.btn:active{transform:scale(0.97)}

.btn-primary{
  background:var(--accent);color:hsl(225 20% 7%);font-weight:700;
  box-shadow:0 0 24px -6px var(--accent-glow),
             inset 0 1px 0 hsl(0 0% 100% / 0.15);
}

.btn-primary:hover{
  background:var(--accent-hover);
  box-shadow:0 0 40px -4px var(--accent-glow-strong),
             inset 0 1px 0 hsl(0 0% 100% / 0.2);
}

.btn-ghost{
  background:var(--surface-raised);color:var(--text-secondary);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--inner-light);
}

.btn-ghost:hover{color:var(--text-primary);background:var(--surface-overlay);border-color:var(--text-muted)}

/* ═══ CARDS ═══ */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  gap:var(--space-6);margin-top:var(--space-12);
}

.card{
  padding:var(--space-8);background:var(--surface-raised);
  border-radius:12px;
  border-top:1px solid var(--inner-light-strong);
  box-shadow:0 2px 16px hsl(225 20% 4% / 0.4),
             inset 0 1px 0 var(--inner-light);
  transition:transform var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-out),
             background var(--duration-fast) ease;
}

.card:hover{
  background:var(--surface-overlay);
  transform:translateY(-2px);
  box-shadow:0 8px 32px hsl(225 20% 4% / 0.5),
             0 0 20px -8px var(--accent-glow),
             inset 0 1px 0 var(--inner-light-strong);
}

.card-icon{
  width:44px;height:44px;margin-bottom:var(--space-4);
  color:var(--accent);
  filter:drop-shadow(0 0 8px var(--accent-glow));
}

.card-title{
  font-size:var(--text-lg);font-weight:700;
  color:var(--text-primary);margin-bottom:var(--space-3);
}

.card-text{
  font-size:var(--text-sm);color:var(--text-secondary);
  line-height:var(--leading-normal);
}

/* ═══ TOOL PAGE ═══ */
.tool-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-8);align-items:start;
}

.tool-form-card{
  padding:var(--space-8);background:var(--surface-raised);
  border-radius:16px;
  border-top:1px solid var(--inner-light-strong);
  box-shadow:0 4px 24px hsl(225 20% 4% / 0.5),
             inset 0 1px 0 var(--inner-light);
}

.form-group{margin-bottom:var(--space-6)}

.form-group label{
  display:block;font-size:var(--text-sm);font-weight:600;
  color:var(--text-primary);margin-bottom:var(--space-2);
}

.form-group .label-hint{
  font-size:var(--text-xs);color:var(--text-muted);
  font-weight:400;margin-left:var(--space-2);
}

.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:var(--space-3) var(--space-4);
  background:var(--surface-base);border:1px solid var(--border);
  border-radius:8px;font-size:var(--text-base);
  color:var(--text-primary);
  transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease;
}

.form-group textarea{resize:vertical;font-family:var(--font-base);line-height:var(--leading-normal)}

.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-subtle),0 0 16px -4px var(--accent-glow);
}

.form-group input::placeholder{color:var(--text-muted)}

.form-group select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234db896' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}

.form-group select option{background:var(--surface-base);color:var(--text-primary)}

.btn-calculate{
  width:100%;padding:var(--space-4);font-size:var(--text-base);
  margin-top:var(--space-2);
}

/* Result Area */
.tool-result-card{
  padding:var(--space-8);background:var(--surface-raised);
  border-radius:16px;
  border-top:1px solid var(--inner-light-strong);
  box-shadow:0 4px 24px hsl(225 20% 4% / 0.5),
             inset 0 1px 0 var(--inner-light);
  display:flex;flex-direction:column;gap:var(--space-6);
}

.result-placeholder{
  text-align:center;color:var(--text-muted);
  font-size:var(--text-sm);padding:var(--space-12) 0;
}

.result-score{text-align:center;padding:var(--space-4) 0}

.result-score .score-value{
  font-size:var(--text-2xl);font-weight:800;
  color:var(--text-primary);
  text-shadow:0 0 30px var(--accent-glow);
}

.result-score .score-label{
  font-size:var(--text-xs);font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-muted);margin-top:var(--space-1);
}

.result-badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--text-sm);font-weight:700;
  padding:var(--space-2) var(--space-6);
  border-radius:9999px;margin:var(--space-4) auto 0;
  letter-spacing:0.04em;text-transform:uppercase;
}

.result-badge[data-level="low"]{
  background:hsl(160 70% 44% / 0.12);color:var(--result-low);
  box-shadow:0 0 16px -4px hsl(160 70% 44% / 0.3);
}
.result-badge[data-level="medium"]{
  background:hsl(42 95% 58% / 0.12);color:var(--result-medium);
  box-shadow:0 0 16px -4px hsl(42 95% 58% / 0.3);
}
.result-badge[data-level="high"]{
  background:hsl(0 75% 62% / 0.12);color:var(--result-high);
  box-shadow:0 0 16px -4px hsl(0 75% 62% / 0.3);
}

.result-explanation{
  background:var(--surface-base);border-radius:10px;
  padding:var(--space-6);
  border:1px solid var(--border-subtle);
}

.result-explanation h3{
  font-size:var(--text-sm);font-weight:700;
  color:var(--text-primary);margin-bottom:var(--space-3);
  text-transform:uppercase;letter-spacing:0.06em;
}

.explanation-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--border-subtle);
  font-size:var(--text-sm);
}

.explanation-row:last-child{border-bottom:none}

.explanation-label{color:var(--text-secondary)}
.explanation-value{color:var(--text-primary);font-weight:600}

.explanation-total{
  margin-top:var(--space-3);padding-top:var(--space-3);
  border-top:1px solid var(--border);
  font-weight:700;font-size:var(--text-base);
}

/* ═══ CONTENT SECTIONS ═══ */
.content-section{
  max-width:var(--content-width);margin:0 auto var(--space-12);
}

.content-section h2{
  font-size:var(--text-xl);font-weight:700;
  color:var(--text-primary);margin-bottom:var(--space-4);
  letter-spacing:-0.02em;
}

.content-section h3{
  font-size:var(--text-lg);font-weight:600;
  color:var(--text-primary);margin-bottom:var(--space-3);
}

.content-section p{
  color:var(--text-secondary);margin-bottom:var(--space-4);
  line-height:var(--leading-normal);
}

.content-section ul,.content-section ol{
  color:var(--text-secondary);margin-bottom:var(--space-4);
  padding-left:var(--space-6);
}

.content-section li{margin-bottom:var(--space-2);line-height:var(--leading-normal)}
.content-section ul li{list-style:disc}
.content-section ol li{list-style:decimal}

.formula-block{
  background:var(--surface-raised);border-radius:10px;
  padding:var(--space-6);margin:var(--space-6) 0;
  border-left:3px solid var(--accent);
  font-family:'Courier New',monospace;
  font-size:var(--text-base);color:var(--accent);
  overflow-x:auto;
  box-shadow:0 0 20px -8px var(--accent-glow),
             inset 0 1px 0 var(--inner-light);
}

/* ═══ FAQ ═══ */
.faq-list{
  max-width:var(--content-width);margin:0 auto;
  display:flex;flex-direction:column;gap:var(--space-3);
}

.faq-item{
  background:var(--surface-raised);border-radius:10px;
  border-top:1px solid var(--inner-light);
  overflow:hidden;
  box-shadow:0 2px 12px hsl(225 20% 4% / 0.3);
}

.faq-question{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-6);
  background:none;border:none;cursor:pointer;text-align:left;
  font-size:var(--text-base);font-weight:600;color:var(--text-primary);
  transition:background var(--duration-fast) ease;
}

.faq-question:hover{background:var(--surface-overlay)}

.faq-icon{
  width:20px;height:20px;flex-shrink:0;margin-left:var(--space-4);
  color:var(--accent);
  transition:transform var(--duration-normal) var(--ease-out);
}

.faq-item[open] .faq-icon{transform:rotate(45deg)}

.faq-answer{
  padding:0 var(--space-6) var(--space-6);
  color:var(--text-secondary);font-size:var(--text-sm);
  line-height:var(--leading-normal);
}

/* ═══ CONTACT FORM ═══ */
.contact-layout{
  max-width:var(--content-width);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:var(--space-8);
}

.contact-form-card{
  padding:var(--space-8);background:var(--surface-raised);
  border-radius:16px;border-top:1px solid var(--inner-light-strong);
  box-shadow:0 4px 24px hsl(225 20% 4% / 0.5),
             inset 0 1px 0 var(--inner-light);
}

.contact-info{
  display:flex;flex-direction:column;gap:var(--space-4);
  padding:var(--space-6);
}

.contact-info-item{
  display:flex;align-items:center;gap:var(--space-3);
  font-size:var(--text-sm);color:var(--text-secondary);
}

.contact-info-item svg{width:20px;height:20px;color:var(--accent);flex-shrink:0}

.form-row{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);
}

.form-status{
  padding:var(--space-4);border-radius:8px;margin-top:var(--space-4);
  font-size:var(--text-sm);font-weight:500;display:none;
}

.form-status.success{
  display:block;background:hsl(160 70% 44% / 0.12);color:var(--result-low);
}

.form-status.error{
  display:block;background:hsl(0 75% 62% / 0.12);color:var(--result-high);
}

/* ═══ AD CONTAINER — Zero-CLS Containment ═══ */
.ad-container{
  display:block;
  width:100%;
  max-width:var(--page-width);
  min-height:280px;
  aspect-ratio:auto;
  overflow:hidden;
  contain:content;
  margin:var(--space-4) 0;
  background-color:var(--surface-raised);
  border-radius:10px;
  border:1px solid var(--border-subtle);
}

/* ═══ FOOTER ═══ */
.site-footer{
  position:relative;z-index:1;
  border-top:1px solid var(--border-subtle);
  padding:var(--space-8) var(--space-6);
  margin-top:var(--space-16);
}

.footer-inner{
  max-width:var(--page-width);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--space-4);
}

.footer-links{display:flex;gap:var(--space-6)}

.footer-links a{
  font-size:var(--text-sm);color:var(--text-muted);
  transition:color var(--duration-fast) ease;
}

.footer-links a:hover{color:var(--text-secondary)}

.footer-copy{font-size:var(--text-xs);color:var(--text-muted)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  .tool-layout{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .hero{min-height:65vh;padding:var(--space-8) var(--space-4)}
  .page-main{padding:var(--space-8) var(--space-4) var(--space-12)}
  .nav-links{
    display:none;position:fixed;top:var(--nav-height);left:0;right:0;
    flex-direction:column;padding:var(--space-4);
    background:var(--surface-base);border-bottom:1px solid var(--border);
    gap:var(--space-1);
  }
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .footer-inner{flex-direction:column;text-align:center}
}

@media(max-width:480px){
  .hero-title{font-size:clamp(1.8rem,1.2rem + 3vw,2.5rem)}
  .card-grid{grid-template-columns:1fr}
}

/* ═══ REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
  html{scroll-behavior:auto}
}

/* Low-end devices: disable GPU-heavy effects */
@media(max-resolution:1.5dppx){
  body::before{display:none}
  .card:hover{transform:none}
}

/* ═══ FOCUS STYLES ═══ */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ═══ KNOWLEDGE SYSTEM EXTENSIONS ═══ */

/* Evidence Differentiation Badges */
.evidence-badge {
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--text-xs);font-weight:700;
  padding:var(--space-1) var(--space-3);
  border-radius:6px;margin-bottom:var(--space-3);
  letter-spacing:0.04em;text-transform:uppercase;
  border: 1px solid transparent;
}
.evidence-badge.tier-1 {
  background:hsl(160 70% 44% / 0.1);color:var(--accent);
  border-color:hsl(160 70% 44% / 0.3);
}
.evidence-badge.tier-2 {
  background:hsl(210 100% 60% / 0.1);color:hsl(210 100% 70%);
  border-color:hsl(210 100% 60% / 0.3);
}
.evidence-badge.tier-3 {
  background:hsl(280 80% 60% / 0.1);color:hsl(280 80% 70%);
  border-color:hsl(280 80% 60% / 0.3);
}
.evidence-badge.tier-4 {
  background:hsl(42 95% 58% / 0.1);color:var(--result-medium);
  border-color:hsl(42 95% 58% / 0.3);
}

/* Framework Model Box (Pattern A) */
.metric-framework-box {
  background:var(--surface-raised);border-radius:12px;
  padding:var(--space-6);margin:var(--space-8) 0;
  border-left:4px solid var(--accent);
  box-shadow:0 4px 24px hsl(225 20% 4% / 0.5),
             inset 0 1px 0 var(--inner-light);
}
.framework-header {
  font-size:var(--text-sm);font-weight:700;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--text-muted);margin-bottom:var(--space-4);
}
.framework-formula {
  font-family:'Courier New',monospace;
  font-size:var(--text-xl);font-weight:800;color:var(--text-primary);
  margin-bottom:var(--space-3);
  text-shadow:0 0 20px var(--accent-glow-strong);
}
.framework-desc {
  font-size:var(--text-sm);color:var(--text-secondary);
  line-height:var(--leading-normal);margin-bottom:0;
}

/* Diagnostic Matrix Card (Pattern B) */
.diagnostic-matrix-card {
  background:var(--surface-overlay);border-radius:12px;
  padding:var(--space-6);margin:var(--space-8) 0;
  border:1px solid var(--border-subtle);
}
.matrix-list {
  list-style:none !important;padding-left:0 !important;margin-bottom:0 !important;
}
.matrix-list li {
  display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-3) 0;
  border-bottom:1px solid var(--border-subtle);
}
.matrix-list li:last-child { border-bottom:none;padding-bottom:0; }
.matrix-list input[type="checkbox"] {
  margin-top:var(--space-1);accent-color:var(--accent);
}

/* Operational Comparison Table (Pattern C) */
.operational-comparison-table {
  width:100%;border-collapse:collapse;
  margin:var(--space-8) 0;
  background:var(--surface-raised);
  border-radius:8px;overflow:hidden;
}
.operational-comparison-table th, .operational-comparison-table td {
  padding:var(--space-4) var(--space-6);
  text-align:left;border-bottom:1px solid var(--border-subtle);
}
.operational-comparison-table th {
  background:var(--surface-overlay);font-weight:600;
  color:var(--text-primary);font-size:var(--text-sm);
}
.operational-comparison-table td {
  font-size:var(--text-base);color:var(--text-secondary);
}
.operational-comparison-table tr:last-child td { border-bottom:none; }

/* Tool Integration CTA */
.tool-integration-card {
  background:linear-gradient(145deg, var(--surface-raised), var(--surface-base));
  border-radius:12px;padding:var(--space-8);
  margin:var(--space-8) 0;text-align:center;
  border:1px solid var(--border);
  box-shadow:0 8px 32px hsl(225 20% 4% / 0.6);
}
.tool-integration-card .btn { margin-top:var(--space-4); }

/* Inline Parameter Box */
.parameter-box {
  background:var(--surface-base);border-radius:8px;
  padding:var(--space-4) var(--space-6);
  margin:var(--space-6) 0;
  border:1px dashed var(--border);
  font-size:var(--text-sm);color:var(--text-secondary);
}
.inline-link {
  color:var(--accent);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--accent-glow-strong);
  text-underline-offset:4px;
}
.inline-link:hover { color:var(--accent-hover);text-decoration-color:var(--accent); }

/* ═══ OPERATIONAL ARTIFACTS (PHASE 2) ═══ */

/* Bad SOP / Good SOP Comparison */
.sop-fragment {
  font-family:'Courier New',monospace;
  background:var(--surface-overlay);
  border:1px solid var(--border);
  padding:var(--space-4);
  border-radius:6px;
  margin:var(--space-4) 0;
  font-size:var(--text-sm);
  color:var(--text-secondary);
}
.sop-fragment.bad { border-left:4px solid hsl(0 80% 60%); }
.sop-fragment.good { border-left:4px solid hsl(160 70% 44%); }
.sop-label {
  display:inline-block; font-weight:700; font-size:var(--text-xs);
  text-transform:uppercase; margin-bottom:var(--space-2);
}
.sop-fragment.bad .sop-label { color:hsl(0 80% 60%); }
.sop-fragment.good .sop-label { color:hsl(160 70% 44%); }

/* Dashboard Mockup */
.dashboard-mockup {
  background:var(--surface-base);
  border:1px solid var(--border-subtle);
  border-radius:8px;
  padding:var(--space-4);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2);
  margin:var(--space-6) 0;
}
.dash-panel {
  background:var(--surface-overlay); border:1px solid var(--border);
  padding:var(--space-3); border-radius:4px;
  font-size:var(--text-xs); font-family:sans-serif;
  color:var(--text-muted);
}
.dash-panel.alert {
  border-color:hsl(0 80% 60% / 0.5); background:hsl(0 80% 60% / 0.1);
  color:hsl(0 80% 70%);
}

/* Interruption Chain Visual */
.interruption-chain {
  display:flex; flex-direction:column; gap:var(--space-2);
  margin:var(--space-6) 0; padding-left:var(--space-4);
  border-left:2px dashed var(--border);
}
.chain-node {
  position:relative; padding:var(--space-2) var(--space-4);
  background:var(--surface-raised); border-radius:6px;
  font-size:var(--text-sm);
}
.chain-node::before {
  content:""; position:absolute; left:-18px; top:50%;
  width:14px; height:2px; background:var(--border);
}
.chain-node.failure {
  border-left:3px solid hsl(0 80% 60%);
}

/* ═══ DIAGNOSTIC OUTPUT SYSTEM (PHASE 3) ═══ */

.diagnostic-output {
  display:flex; flex-direction:column; gap:var(--space-6);
}
.diagnostic-section { margin-bottom:var(--space-2); }
.diagnostic-section h3 {
  font-size:var(--text-base); font-weight:700;
  color:var(--text-primary); margin-bottom:var(--space-3);
  text-transform:uppercase; letter-spacing:0.05em;
  font-size:var(--text-xs);
}

/* Pattern Cards */
.pattern-card {
  background:var(--surface-overlay);
  border:1px solid var(--border);
  border-radius:8px;
  padding:var(--space-4);
  margin-bottom:var(--space-3);
}
.pattern-header {
  display:flex; align-items:center; gap:var(--space-3);
  margin-bottom:var(--space-2);
}
.pattern-name {
  font-weight:700; font-size:var(--text-base);
  color:var(--text-primary);
}
.confidence-tag {
  display:inline-block; font-size:var(--text-xs);
  font-weight:600; padding:2px 8px;
  border-radius:4px; text-transform:uppercase;
  letter-spacing:0.04em;
}
.confidence-tag.high {
  background:hsl(0 80% 60% / 0.15); color:hsl(0 80% 65%);
  border:1px solid hsl(0 80% 60% / 0.3);
}
.confidence-tag.moderate {
  background:hsl(40 90% 55% / 0.15); color:hsl(40 90% 60%);
  border:1px solid hsl(40 90% 55% / 0.3);
}
.confidence-tag.low {
  background:hsl(210 30% 50% / 0.15); color:hsl(210 30% 60%);
  border:1px solid hsl(210 30% 50% / 0.3);
}
.signal-list {
  list-style:none; padding:0; margin:0;
}
.signal-list li {
  font-size:var(--text-sm); color:var(--text-secondary);
  padding:var(--space-1) 0;
  padding-left:var(--space-4);
  position:relative;
}
.signal-list li::before {
  content:"→"; position:absolute; left:0;
  color:var(--text-muted);
}

/* Contributing Factors Matrix */
.factors-table {
  width:100%; border-collapse:collapse;
  font-size:var(--text-sm);
}
.factors-table th {
  text-align:left; font-weight:600;
  color:var(--text-muted); font-size:var(--text-xs);
  text-transform:uppercase; letter-spacing:0.05em;
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--border);
}
.factors-table td {
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-secondary);
}
.factors-table tr:last-child td { border-bottom:none; }
.impact-indicator {
  display:inline-block; font-weight:700;
  font-size:var(--text-xs); text-transform:uppercase;
  padding:2px 6px; border-radius:3px;
}
.impact-indicator.high {
  color:hsl(0 80% 65%); background:hsl(0 80% 60% / 0.1);
}
.impact-indicator.moderate {
  color:hsl(40 90% 60%); background:hsl(40 90% 55% / 0.1);
}
.impact-indicator.low {
  color:hsl(160 50% 50%); background:hsl(160 50% 50% / 0.1);
}

/* Intervention Items */
.intervention-item {
  background:var(--surface-base);
  border-left:3px solid var(--accent);
  padding:var(--space-3) var(--space-4);
  margin-bottom:var(--space-3);
  border-radius:0 6px 6px 0;
}
.intervention-action {
  font-weight:600; color:var(--text-primary);
  font-size:var(--text-sm); margin-bottom:var(--space-1);
}
.intervention-rationale {
  font-size:var(--text-xs); color:var(--text-muted);
  font-style:italic;
}

/* Accumulation Warning */
.accumulation-warning {
  background:hsl(40 90% 55% / 0.08);
  border:1px solid hsl(40 90% 55% / 0.25);
  border-radius:8px;
  padding:var(--space-4);
  font-size:var(--text-sm);
  color:var(--text-secondary);
}
.accumulation-warning strong {
  display:block; color:hsl(40 90% 60%);
  font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:0.05em; margin-bottom:var(--space-2);
}