/* dashboard.css — dumbmodel Lab
Solo personal project, no connection to employer, built with public/free-tier only
Sunni SCAD gate: AAA Okabe-Ito, 18px/1.65, 56px tabs, safe-area, 44px touch, 2px ink
*/
:root{
  --ink:#111; --bg:#FFFBF0; --card:#FFF; --ok:#009E73; --warn:#E69F00; --bad:#D55E00;
  --blue:#0072B2; --sky:#56B4E9; --pink:#CC79A7; --yellow:#F0E442;
  --border:2px solid var(--ink);
  --shadow:4px 4px 0 var(--ink);
  --radius:14px;
}
body{ background:var(--bg); font-family: Inter, system-ui, sans-serif; color:#101010; }
.dash-main{ max-width:1200px; margin:0 auto; padding:16px clamp(12px,4vw,20px) calc(148px + env(safe-area-inset-bottom)); }
.dash-header{ background:var(--card); border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-bottom:16px; }
.dash-eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:#666; margin-bottom:6px; }
.dash-title{ font-size: clamp(28px,5vw,40px); line-height:1.1; margin:0 0 6px; font-weight:900; } .dash-title .accent{ color:var(--blue); }
.dash-subtitle{ font-size:18px; line-height:1.65; color:#3A3A3A; margin:0 0 12px; max-width:75ch; }
.dash-controls{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.toggle-group{ display:flex; border:var(--border); border-radius:999px; overflow:hidden; background:#fff; }
.toggle-btn{ padding:0 14px; height:44px; min-width:44px; border:0; background:transparent; font-weight:700; cursor:pointer; border-right:var(--border); }
.toggle-btn:last-child{ border-right:0; } .toggle-btn.is-active{ background:var(--yellow); }
.dash-status-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:var(--border); border-radius:999px; background:#fff; font-size:13px; font-weight:700; }
.dot{ width:10px; height:10px; border-radius:50%; background:#aaa; } .dot--live{ background:var(--ok); box-shadow:0 0 0 3px rgba(0,158,115,0.25); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 3px rgba(0,158,115,0.25)} 50%{box-shadow:0 0 0 6px rgba(0,158,115,0.1)} 100%{box-shadow:0 0 0 3px rgba(0,158,115,0.25)} }

.dash-pipeline{ background:var(--card); border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px; margin-bottom:16px; overflow:auto; }
.pipe{ display:flex; align-items:center; gap:8px; min-width:680px; }
.pipe-step{ flex:1; border:var(--border); border-radius:10px; padding:10px 12px; background:#f7f7f5; display:flex; flex-direction:column; gap:2px; min-width:110px; }
.pipe-step.is-done{ background:#E6F4EA; border-color:var(--ok); }
.step-num{ font-size:10px; font-weight:900; opacity:0.6; } .pipe-step b{ font-size:14px; } .pipe-step i{ font-size:11px; font-style:normal; color:#555; }
.pipe-arrow{ font-weight:900; opacity:0.5; }

.dash-card{ background:var(--card); border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:16px; }
.card-head{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:baseline; border-bottom:1px dashed #ccc; padding-bottom:8px; margin-bottom:12px; }
.card-head h2{ margin:0; font-size:20px; } .card-badge{ font-size:11px; padding:3px 8px; border-radius:999px; background:var(--yellow); border:1px solid var(--ink); font-weight:800; } .card-meta{ font-size:12px; color:#666; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media(max-width:860px){ .grid-2{ grid-template-columns:1fr; } }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; } @media(max-width:1000px){ .grid-3{ grid-template-columns:1fr; } }

.novice-title{ font-size:14px; margin:0 0 4px; } .novice-text{ font-size:15px; line-height:1.6; color:#222; }
.expert-text{ font-size:12px; line-height:1.5; color:#444; background:#fbf8ef; border:1px dashed #ccc; padding:8px; border-radius:8px; margin-top:8px; }
.expert-text code{ font-size:11px; }
.metrics{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.metric{ border:var(--border); border-radius:10px; padding:8px 10px; background:#fff; min-width:90px; text-align:center; }
.metric b{ display:block; font-size:18px; line-height:1; } .metric span{ font-size:11px; color:#666; text-transform:uppercase; letter-spacing:0.05em; }

.code-panel{ border:var(--border); border-radius:10px; overflow:hidden; background:#0f1115; color:#e6e6e6; }
.code-head{ display:flex; justify-content:space-between; align-items:center; padding:6px 10px; font-size:11px; background:#181a20; border-bottom:1px solid #222; }
.copy{ border:1px solid #333; background:#222; color:#ddd; border-radius:6px; padding:2px 8px; font-size:11px; cursor:pointer; }
.code-panel pre{ margin:0; padding:10px; overflow:auto; font-size:12px; line-height:1.5; }
.chart-mini{ padding:8px; } .bar{ height:18px; background:#eee; border-radius:6px; margin:4px 0; overflow:hidden; border:1px solid #ddd; }
.bar span{ display:block; height:100%; background:var(--ink); color:#fff; font-size:11px; line-height:18px; padding-left:6px; white-space:nowrap; }

.checklist{ list-style:none; padding:0; margin:8px 0; display:grid; gap:6px; } .checklist li{ font-size:13px; padding:6px 8px; border:1px solid #ddd; border-radius:8px; background:#fff; }

.chart-box{ border:var(--border); border-radius:10px; padding:10px; background:#fff; }
.chart-head{ font-size:12px; font-weight:800; margin-bottom:6px; } .legend{ font-size:11px; color:#666; margin-top:6px; display:flex; gap:8px; align-items:center; } .leg{ width:12px; height:8px; display:inline-block; border-radius:2px; }

.train-col{ border:1px solid #ddd; border-radius:10px; padding:10px; background:#fff; }
.train-col h4{ margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:0.06em; }
.metric-row{ display:flex; justify-content:space-between; gap:8px; font-size:12px; padding:4px 0; border-bottom:1px dashed #eee; } .metric-row b{ font-size:12px; text-align:right; max-width:60%; word-break:break-word; }

.mini-charts{ display:grid; gap:6px; } .spark{ height:8px; background:var(--ink); border-radius:4px; margin-top:3px; }

.eval-table{ width:100%; border-collapse:collapse; font-size:12px; } .eval-table th{ text-align:left; font-size:11px; text-transform:uppercase; color:#666; border-bottom:2px solid var(--ink); padding:4px; } .eval-table td{ padding:6px 4px; border-bottom:1px solid #eee; } .pass{ color:var(--ok); font-weight:800; } .fail{ color:var(--bad); font-weight:800; }

.small-pre{ font-size:11px; background:#f7f7f5; padding:8px; border-radius:8px; overflow:auto; white-space:pre-wrap; }

.dash-how{ background:linear-gradient(135deg, #FFF 0%, #FFFBF0 100%); }
.tiny{ font-size:11px; color:#666; }