:root{
  --bg:#0f172a; --surface:#1e293b; --surface2:#243449; --accent:#38bdf8;
  --text:#e2e8f0; --muted:#94a3b8; --line:#334155;
  --green:#22c55e; --green-bg:rgba(34,197,94,.14);
  --amber:#f59e0b; --amber-bg:rgba(245,158,11,.14);
  --red:#ef4444; --red-bg:rgba(239,68,68,.12);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;padding-bottom:60px}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}
.site-header{background:linear-gradient(160deg,#1e293b,#0f172a);border-bottom:1px solid var(--line);
  padding:40px 0 30px;margin-bottom:26px}
h1{margin:0 0 8px;font-size:28px;letter-spacing:-.5px}
.tagline{color:var(--muted);font-size:15.5px;margin:0;max-width:680px}
h2{font-size:19px;margin:0 0 16px;display:flex;align-items:center;gap:10px}
h3{font-size:15px;margin:22px 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  background:var(--accent);color:#0f172a;border-radius:50%;font-size:14px;font-weight:800;flex:none}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:22px 24px;margin-bottom:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:12px}
label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
input[type=text]{background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;color:var(--text);font-size:14.5px;font-family:inherit}
input[type=text]:focus{outline:none;border-color:var(--accent)}
.sql-context{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.sql-context summary{cursor:pointer;color:var(--accent);font-size:14px}
.hint{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.triage{display:flex;flex-direction:column;gap:18px}
.triage .q{font-size:14.5px;margin-bottom:8px}
.seg{display:inline-flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:var(--bg);color:var(--text);border:none;padding:9px 15px;font-size:13.5px;
  cursor:pointer;border-right:1px solid var(--line);font-family:inherit}
.seg button:last-child{border-right:none}
.seg button.active{background:var(--accent);color:#0f172a;font-weight:700}
.actions{display:flex;align-items:center;gap:14px;margin:8px 0 26px;flex-wrap:wrap}
.btn{background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:8px;
  padding:11px 20px;font-size:14.5px;cursor:pointer;font-family:inherit;font-weight:600}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent);color:#0f172a;border-color:var(--accent)}
.btn-primary:hover{filter:brightness(1.08)}
.muted{color:var(--muted);font-size:13.5px}
.hidden{display:none}
.culprit{background:var(--surface2);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:10px;padding:16px 18px;margin-bottom:14px}
.culprit.likely{border-left-color:var(--green)}
.culprit.unsure{border-left-color:var(--amber)}
.culprit.ruledout{border-left-color:var(--red);opacity:.6}
.culprit h4{margin:0 0 4px;font-size:16px}
.culprit .why{font-size:14px;color:#cbd5e1;margin:8px 0}
.culprit .test{font-size:14px;color:#cbd5e1;margin:8px 0}
.culprit .test b,.culprit .why b{color:var(--text)}
pre.sql{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  overflow-x:auto;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#a5f3fc;margin:8px 0}
.mark{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-top:6px}
.mark button{background:var(--bg);color:var(--muted);border:none;border-right:1px solid var(--line);
  padding:6px 12px;font-size:12.5px;cursor:pointer;font-family:inherit}
.mark button:last-child{border-right:none}
.mark button.on-likely{background:var(--green-bg);color:#4ade80;font-weight:700}
.mark button.on-unsure{background:var(--amber-bg);color:#fbbf24;font-weight:700}
.mark button.on-ruledout{background:var(--red-bg);color:#fca5a5;font-weight:700}
.report-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
pre.out{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:16px;
  overflow-x:auto;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap;color:var(--text)}
.site-footer{color:var(--muted);font-size:13px;margin-top:30px}
.site-footer a{color:var(--accent)}
@media (max-width:620px){.grid2,.grid3{grid-template-columns:1fr}}

/* The SQL dialect disclaimer. It sits with the queries rather than in a
   footnote, because a tool that hands out SQL has to say which dialect it
   assumes at the moment it hands it over. */
.dialect-note {
  background: var(--amber-bg);
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.55;
}
.sql-dialect {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}
.section-lede { color: var(--muted); font-size: 0.95rem; margin: 0 0 14px; max-width: 70ch; }

/* Shared tool footer, identical on every tool in the tree so the set reads as
   one. Two sections on purpose: the first is a promise and has to be true of
   THIS page, the second is boilerplate and has to be the same everywhere.
   Merging them is how a wrong promise gets copied around.
   The colours are the design-token-standard values, scoped to this component
   so that whatever a given tool calls its own colours cannot distort it. */
.tool-footer {
  --tf-border: #475569;
  --tf-border-strong: #64748b;
  --tf-surface-2: #334155;
  --tf-text: #e2e8f0;
  --tf-muted: #94a3b8;
  --tf-accent: #38bdf8;
  border-top: 1px solid var(--tf-border);
  margin-top: 48px;
  padding-top: 24px;
  padding-bottom: 40px;
  color: var(--tf-muted);
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
/* Selectors below are deliberately doubled up. Several tools already carry
   rules like ".site-footer p { color: ... }", which outrank a single class and
   would recolour the promise line on some tools and not others. */
.tool-footer p { margin: 0; max-width: 70ch; }
.tool-footer .tool-footer-privacy { color: var(--tf-text); }
.tool-footer .tool-footer-meta { color: var(--tf-muted); }
.tool-footer .tool-footer-meta a { color: var(--tf-accent); text-decoration: underline; }
.tool-footer .tool-footer-sep { color: var(--tf-border-strong); padding: 0 4px; }
.tool-footer .tool-footer-button {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--tf-text);
  background: transparent;
  border: 1px solid var(--tf-border-strong);
  border-radius: 8px;
  padding: 9px 16px;
}
.tool-footer .tool-footer-button:hover { background: var(--tf-surface-2); border-color: var(--tf-accent); }
.tool-footer-button:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 2px; }

/* Shared header promise line, identical on every tool in the tree. The selector is
   deliberately SELF-DOUBLED, exactly like the footer block below: several tools carry
   rules such as "header.site p" or ".site-header p" whose specificity (0,1,2) outranks
   a single class (0,1,0), which was rendering this promise at the tagline size on some
   tools and leaving it completely unstyled on the four with separate stylesheets. The
   words only change when the FACTS change, and neither does the styling. */
.tool-promise.tool-promise {
  --tp-border: #475569;
  --tp-accent: #4ade80;
  display: inline-block;
  margin: 10px 0 0;
  padding: 6px 12px;
  border: 1px solid var(--tp-border);
  border-left: 3px solid var(--tp-accent);
  border-radius: 6px;
  color: #94a3b8;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 400;
  max-width: 70ch;
}