/* Prose, read on a laptop rather than projected: light surfaces, per the
   house style. The scoreboard keeps the charcoal panel. */
* { box-sizing: border-box; }
body { margin:0; background: var(--bg-subtle); color: var(--text);
       font-family: var(--font-sans); font-size:16px; line-height:1.6; }
h1,h2 { margin:0 0 var(--sp-3); font-weight:800; letter-spacing:-.02em; }
h2 { font-size:20px; font-weight:700; }
code { font-family: var(--font-mono); font-size:.92em; }

.bar { display:flex; align-items:center; gap:var(--sp-5);
       padding:var(--sp-3) var(--sp-6); background:var(--surface);
       border-bottom:1px solid var(--border); }
.bar .title { font-weight:700; letter-spacing:-.01em; }
.bar .right { margin-left:auto; color:var(--mauve-600); text-decoration:none; }
.wordmark { display:inline-block; line-height:1; color:var(--neutral-700); }
.wordmark .name { font-weight:800; font-size:15px; letter-spacing:.34em;
                  text-indent:.34em; display:block; }
.wordmark .rule { display:block; height:3px; background:currentColor; margin-top:3px; }

.page { max-width:52rem; margin:0 auto; padding:var(--sp-7) var(--sp-6); }
.eyebrow { font-size:11px; font-weight:600; text-transform:uppercase;
           letter-spacing:.1em; color:var(--text-muted); margin:0 0 var(--sp-2); }

.block { background:var(--surface); border:1px solid var(--border);
         border-radius:var(--radius-lg); padding:var(--sp-5) var(--sp-6);
         margin-bottom:var(--sp-5); }
.block p { margin:0 0 var(--sp-4); }
.block p:last-child { margin-bottom:0; }
.sql { margin:0 0 var(--sp-4); padding:var(--sp-4); overflow-x:auto;
       background:#0e1015; color:#e8eaf0; border-radius:var(--radius-md);
       font-family:var(--font-mono); font-size:14px; line-height:1.5; }
.sql code { font-family:inherit; }
.block.warning { border-left:3px solid var(--warm-500); background:var(--warm-50);
                 color:var(--on-warning); }

/* The two panels that frame the whole investigation. */
.split { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4);
         margin-bottom:var(--sp-5); }
@media (max-width:48rem) { .split { grid-template-columns:1fr; } }
.panel { border-radius:var(--radius-lg); padding:var(--sp-5);
         border:1px solid var(--border); }
.panel ul { margin:0; padding-left:1.1rem; }
.panel li { margin-bottom:var(--sp-2); }
.panel.known   { background:var(--sage-50); border-left:3px solid var(--sage-500); }
.panel.unknown { background:var(--mauve-50); border-left:3px solid var(--mauve-600); }

.findings { width:100%; border-collapse:collapse; margin-top:var(--sp-3); }
.findings th { text-align:left; font-size:11px; text-transform:uppercase;
               letter-spacing:.1em; color:var(--text-muted);
               border-bottom:1px solid var(--border); padding:var(--sp-2); }
.findings td { padding:var(--sp-3) var(--sp-2); border-bottom:1px solid var(--border); }
.findings .nr  { font-family:var(--font-mono); color:var(--text-muted); width:3rem; }
.findings .pts { font-family:var(--font-mono); text-align:right; width:5rem; }
.aside { color:var(--text-muted); font-size:14px; }

.start { display:flex; align-items:center; gap:var(--sp-4); margin:0 0 var(--sp-5); }
.button { display:inline-block; padding:10px 18px; border-radius:var(--radius-md);
          background:var(--mauve-600); color:#fff; text-decoration:none;
          font-weight:600; transition:opacity .12s; }
.button:hover { opacity:.87; }
.bar a { color:var(--mauve-600); text-decoration:none; }
.bar .right { margin-left:auto; }

.fmt { display:block; color:var(--text-muted); font-size:13px; margin-top:2px; }