/* ==========================================================
   AI LAB 2026 / VISION FAMILY
   Shared navigation + editorial workbench styles for
   Block / Classical ML / Deep Learning image classification.
   ========================================================== */
.vision-family-nav{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-bottom:2px solid var(--exp-ink);background:var(--exp-paper);
}
.vision-family-nav a{
  min-height:92px;padding:16px clamp(12px,2vw,28px);display:flex;gap:14px;align-items:center;
  border-right:1px solid var(--exp-ink);text-decoration:none;color:var(--exp-ink);
  position:relative;overflow:hidden;background:var(--exp-paper);
}
.vision-family-nav a:last-child{border-right:0}
.vision-family-nav a::before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--family-color,var(--exp-accent));transition:height .2s ease;z-index:0}
.vision-family-nav a:hover::before,.vision-family-nav a.active::before{height:100%}
.vision-family-nav a>*{position:relative;z-index:1}
.vision-family-nav .vf-no{font:950 2.35rem/.8 var(--exp-sans);letter-spacing:-.08em;min-width:2ch;white-space:nowrap;text-align:center}
.vision-family-nav .vf-copy{display:grid;gap:4px}
.vision-family-nav strong{font:950 .95rem/1.2 var(--exp-sans)}
.vision-family-nav small{font:800 .66rem/1.35 var(--exp-mono);letter-spacing:.04em}
.vision-family-nav a[data-mode="block"]{--family-color:var(--exp-yellow)}
.vision-family-nav a[data-mode="ml"]{--family-color:var(--exp-orange)}
.vision-family-nav a[data-mode="dl"]{--family-color:var(--exp-aqua)}

/* Current block lab: heatmap must be exactly the rendered image bounds. */
body.exp-vision .test-media-frame{position:relative;display:inline-block;line-height:0;max-width:100%;max-height:420px}
body.exp-vision .test-media-frame img{display:block;width:auto;height:auto;max-width:100%;max-height:420px}
body.exp-vision .test-media-frame .heatmap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;pointer-events:none}

/* Newly added classical-ML / deep-learning pages */
body.exp-vision-ml{--exp-accent:var(--exp-orange);--exp-accent2:var(--exp-yellow)}
body.exp-vision-dl{--exp-accent:var(--exp-blue);--exp-accent2:var(--exp-aqua)}
body.exp-vision-ml,body.exp-vision-dl{
  --bg-0:var(--exp-paper);--bg-1:var(--exp-paper);--bg-2:#e7e4da;
  --panel:var(--exp-paper2);--panel-2:#fff;--panel-line:#10100f;
  --ink:#10100f;--muted:#62615c;--faint:#7a7871;--line:#10100f;
  --cyan:var(--exp-accent);--cyan-soft:#10100f;--violet:var(--exp-blue);--magenta:var(--exp-violet);
  --ok:#19784f;--warn:#9a7100;--bad:#a43d4e;
  --shadow:none;--glow-cyan:none;--glow-violet:none;
  background:var(--exp-paper)!important;color:var(--exp-ink)!important;
}
body.exp-vision-ml>header:not(.exp-toprail),body.exp-vision-dl>header:not(.exp-toprail){display:none!important}
body.exp-vision-ml main,body.exp-vision-dl main{max-width:1380px!important;margin:28px auto 70px!important;padding:0 clamp(14px,2.2vw,26px)!important}
body.exp-vision-ml .notice,body.exp-vision-dl .notice{
  border:2px solid var(--exp-ink)!important;border-radius:0!important;background:#fff!important;color:var(--exp-ink)!important;box-shadow:4px 4px 0 var(--exp-accent)!important;
}
body.exp-vision-ml .notice-icon,body.exp-vision-dl .notice-icon{border-radius:0!important;background:var(--exp-accent2)!important;color:var(--exp-ink)!important;border:1px solid var(--exp-ink)!important}
body.exp-vision-ml .steps,body.exp-vision-dl .steps{gap:26px!important}
body.exp-vision-ml .step,body.exp-vision-dl .step{
  position:relative!important;background:var(--exp-paper2)!important;color:var(--exp-ink)!important;
  border:2px solid var(--exp-ink)!important;border-radius:0!important;padding:clamp(18px,2.5vw,30px)!important;
  box-shadow:6px 6px 0 rgba(16,16,15,.16)!important;
}
body.exp-vision-ml .step:nth-child(3n+1),body.exp-vision-dl .step:nth-child(3n+1){box-shadow:6px 6px 0 var(--exp-accent)!important}
body.exp-vision-ml .step::before,body.exp-vision-dl .step::before{display:none!important}
body.exp-vision-ml .step-head,body.exp-vision-dl .step-head{border-bottom:2px solid var(--exp-ink);padding-bottom:15px;margin-bottom:20px!important}
body.exp-vision-ml .step-no,body.exp-vision-dl .step-no{border-radius:0!important;background:var(--exp-accent)!important;color:#fff!important;box-shadow:3px 3px 0 var(--exp-ink)!important}
body.exp-vision-ml .step-title h2,body.exp-vision-dl .step-title h2,body.exp-vision-ml .panel h3,body.exp-vision-dl .panel h3{color:var(--exp-ink)!important}
body.exp-vision-ml .step-title p,body.exp-vision-dl .step-title p{color:var(--exp-muted)!important}
body.exp-vision-ml .algorithm-description b,body.exp-vision-dl .algorithm-description b{color:var(--exp-ink)!important}
body.exp-vision-ml .class-card,body.exp-vision-dl .class-card,
body.exp-vision-ml .algorithm-card,body.exp-vision-dl .algorithm-card,
body.exp-vision-ml .panel,body.exp-vision-dl .panel,
body.exp-vision-ml .capture-panel,body.exp-vision-dl .capture-panel,
body.exp-vision-ml .meter-card,body.exp-vision-dl .meter-card,
body.exp-vision-ml .metric,body.exp-vision-dl .metric{
  border:1px solid var(--exp-ink)!important;border-radius:0!important;background:#fff!important;color:var(--exp-ink)!important;box-shadow:none!important;
}
body.exp-vision-ml .class-card:hover,body.exp-vision-dl .class-card:hover{transform:none!important;border-color:var(--exp-ink)!important;box-shadow:4px 4px 0 var(--exp-accent)!important}
body.exp-vision-ml .class-name,body.exp-vision-dl .class-name,
body.exp-vision-ml .algorithm-select,body.exp-vision-dl .algorithm-select,
body.exp-vision-ml select,body.exp-vision-dl select{background:#fff!important;color:var(--exp-ink)!important;border:1px solid var(--exp-ink)!important;border-radius:0!important}
body.exp-vision-ml .upload-box,body.exp-vision-dl .upload-box,
body.exp-vision-ml .drop,body.exp-vision-dl .drop{border:2px dashed var(--exp-ink)!important;border-radius:0!important;background:#f8f6ef!important;color:var(--exp-ink)!important;box-shadow:none!important}
body.exp-vision-ml .upload-box:hover,body.exp-vision-dl .upload-box:hover,body.exp-vision-ml .drop:hover,body.exp-vision-dl .drop:hover{background:var(--exp-accent2)!important;transform:none!important}
body.exp-vision-ml .upload-box strong,body.exp-vision-dl .upload-box strong{color:var(--exp-ink)!important}
body.exp-vision-ml .thumb,body.exp-vision-dl .thumb{border-radius:0!important;border-color:var(--exp-ink)!important;background:#fff!important}
body.exp-vision-ml .btn,body.exp-vision-dl .btn,
body.exp-vision-ml .primary,body.exp-vision-dl .primary,
body.exp-vision-ml .secondary,body.exp-vision-dl .secondary,
body.exp-vision-ml .danger,body.exp-vision-dl .danger,
body.exp-vision-ml .ghost,body.exp-vision-dl .ghost,
body.exp-vision-ml .file-label,body.exp-vision-dl .file-label,
body.exp-vision-ml .mini-btn,body.exp-vision-dl .mini-btn{
  border-radius:0!important;border:2px solid var(--exp-ink)!important;box-shadow:2px 2px 0 var(--exp-ink)!important;font-weight:900!important;
}
body.exp-vision-ml .primary,body.exp-vision-dl .primary,body.exp-vision-ml .btn.primary,body.exp-vision-dl .btn.primary{background:var(--exp-accent)!important;color:#fff!important}
body.exp-vision-ml .secondary,body.exp-vision-dl .secondary,body.exp-vision-ml .file-label,body.exp-vision-dl .file-label{background:#fff!important;color:var(--exp-ink)!important}
body.exp-vision-ml .ghost,body.exp-vision-dl .ghost{background:var(--exp-accent2)!important;color:var(--exp-ink)!important}
body.exp-vision-ml .danger,body.exp-vision-dl .danger{background:#ff9d8b!important;color:var(--exp-ink)!important}
body.exp-vision-ml .status,body.exp-vision-dl .status{border-radius:0!important;border:1px solid var(--exp-ink)!important;background:#fff!important;color:var(--exp-ink)!important}
body.exp-vision-ml .status.ok,body.exp-vision-dl .status.ok{border-left:8px solid #19784f!important}
body.exp-vision-ml .status.warn,body.exp-vision-dl .status.warn{border-left:8px solid var(--exp-yellow)!important}
body.exp-vision-ml .status.bad,body.exp-vision-dl .status.bad{border-left:8px solid #d74d5e!important}
body.exp-vision-ml .status.info,body.exp-vision-dl .status.info{border-left:8px solid var(--exp-accent)!important}
body.exp-vision-ml .progress-wrap,body.exp-vision-dl .progress-wrap,body.exp-vision-ml .bar,body.exp-vision-dl .bar{border-radius:0!important;border-color:var(--exp-ink)!important;background:#e4e0d5!important}
body.exp-vision-ml .progress-bar,body.exp-vision-dl .progress-bar,body.exp-vision-ml .fill,body.exp-vision-dl .fill,body.exp-vision-ml .bar>div,body.exp-vision-dl .bar>div{border-radius:0!important;background:var(--exp-accent)!important;box-shadow:none!important}
body.exp-vision-ml .image-stage,body.exp-vision-dl .image-stage,body.exp-vision-ml .capture-preview,body.exp-vision-dl .capture-preview{border:2px solid var(--exp-ink)!important;border-radius:0!important;background:#dedbd1!important}
body.exp-vision-ml .test-img,body.exp-vision-dl .test-img,body.exp-vision-ml .image-wrap img,body.exp-vision-dl .image-wrap img,body.exp-vision-ml .image-wrap video,body.exp-vision-dl .image-wrap video{border-radius:0!important;box-shadow:none!important}
body.exp-vision-ml .heatmap-canvas,body.exp-vision-dl .heatmap-canvas,body.exp-vision-ml .overlay,body.exp-vision-dl .overlay{border-radius:0!important}
body.exp-vision-ml .tip,body.exp-vision-dl .tip,body.exp-vision-ml .capture-note,body.exp-vision-dl .capture-note,body.exp-vision-ml .explain,body.exp-vision-dl .explain{border-radius:0!important;border:1px solid var(--exp-ink)!important;background:#fff!important;color:var(--exp-ink)!important}
body.exp-vision-ml .metric b,body.exp-vision-dl .metric b,body.exp-vision-ml .meter-value,body.exp-vision-dl .meter-value{color:var(--exp-accent)!important}
body.exp-vision-ml .site-footer,body.exp-vision-dl .site-footer{max-width:none!important;margin:0!important;padding:28px!important;background:var(--exp-ink)!important;color:#fff!important}
body.exp-vision-ml .site-footer-inner,body.exp-vision-dl .site-footer-inner{border:0!important}

@media(max-width:720px){
  .vision-family-nav{grid-template-columns:1fr}.vision-family-nav a{min-height:66px;border-right:0;border-bottom:1px solid var(--exp-ink)}.vision-family-nav a:last-child{border-bottom:0}.vision-family-nav .vf-no{font-size:1.8rem}
  body.exp-vision-ml .steps,body.exp-vision-dl .steps{grid-template-columns:minmax(0,1fr)}
  body.exp-vision-ml .step,body.exp-vision-dl .step,
  body.exp-vision-ml .class-card,body.exp-vision-dl .class-card,
  body.exp-vision-ml .panel,body.exp-vision-dl .panel{min-width:0}
  body.exp-vision-ml .class-grid,body.exp-vision-dl .class-grid,
  body.exp-vision-ml .sample-area,body.exp-vision-dl .sample-area,
  body.exp-vision-ml .test-grid,body.exp-vision-dl .test-grid,
  body.exp-vision-ml .algorithm-panel,body.exp-vision-ml .capture-layout,body.exp-vision-dl .capture-layout{grid-template-columns:minmax(0,1fr)}
}
@media print{.vision-family-nav{display:none!important}}