: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}
label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
input[type=text],input[type=password]{background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;color:var(--text);font-size:14.5px;font-family:inherit;width:100%}
input[type=text]:focus,input[type=password]:focus{outline:none;border-color:var(--accent)}
.hint{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.actions{display:flex;align-items:center;gap:14px;margin:8px 0 0;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:enabled:hover{border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.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}
.site-footer{color:var(--muted);font-size:13px;margin-top:30px}
.site-footer a{color:var(--accent)}

/* ---- demo framing, next to the title where it is read first ---- */
.demo-flag{display:inline-block;vertical-align:middle;font-size:12.5px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;padding:4px 11px;border-radius:999px;
  background:var(--amber-bg);color:#fbbf24;border:1px solid rgba(245,158,11,.4);
  margin-left:10px;position:relative;top:-3px}
.demo-note{color:#cbd5e1;font-size:14.5px;margin:0 0 10px;max-width:680px}

/* ---- the question list, which is the whole way in ---- */
.questions-status{font-size:13px;color:var(--muted);margin:0 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:10px;
  padding:12px 16px;font-size:14px;cursor:pointer;font-family:inherit;text-align:left;
  line-height:1.35;font-weight:600;max-width:100%}
/* Hover is guarded on :enabled so a disabled question cannot light up and then
   refuse the click. A control that looks live and is not reads as broken. */
.chip:enabled:hover{border-color:var(--accent);color:#fff;background:#2b3d55}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip:disabled{opacity:.45;cursor:not-allowed}
.chip.chip-running{border-color:var(--accent);color:#fff}

/* ---- schema panel ---- */
.schema-panel summary{cursor:pointer;color:var(--accent);font-size:15px;font-weight:600;
  display:flex;align-items:center;gap:10px;list-style:none}
.schema-panel summary::-webkit-details-marker{display:none}
.schema-panel summary::before{content:"\25B8";color:var(--muted);font-size:13px}
.schema-panel[open] summary::before{content:"\25BE"}
.schema-intro{margin-top:14px}
.schema-intro p{margin:0;max-width:70ch}
.schema-table{margin-top:24px}
.schema-name{display:flex;align-items:baseline;gap:12px;font-size:14px;color:var(--accent);
  text-transform:none;letter-spacing:0;margin:0 0 10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.schema-count{font-size:12.5px;color:var(--muted);font-weight:400;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.schema-sample-label{font-size:12.5px;color:var(--muted);margin:14px 0 6px}
.schema-notes{margin:26px 0 0;padding-left:20px;color:#cbd5e1;font-size:14px}
.schema-notes li{margin:8px 0;max-width:70ch}

/* ---- error alert ---- */
.error-alert{background:var(--red-bg);border:1px solid rgba(239,68,68,.45);border-left:4px solid var(--red);
  border-radius:9px;padding:14px 16px;margin-bottom:18px;font-size:14px;color:#fecaca}
.error-alert b{color:#fca5a5}
.error-alert ul{margin:8px 0 0;padding-left:20px}
.error-alert li{margin:4px 0}

/* ---- the answer: question, working, SQL ---- */
.asked-question{font-size:17px;font-weight:600;color:#fff;margin:0 0 4px;max-width:70ch}
.explanation{font-size:14.5px;color:#cbd5e1;margin:0;max-width:70ch}
/* The caveat says what the number does NOT count, which is the difference between
   a demo and a demonstration of judgment. Amber, because it is a limit not an error. */
.caveat{font-size:14px;color:#fcd34d;margin:10px 0 0;max-width:70ch;
  border-left:3px solid rgba(245,158,11,.5);padding-left:12px}
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 0}
pre.sql code{font:inherit;color:inherit;background:none;padding:0}

/* ---- stat tile ---- */
.stat-tile{background:var(--surface2);border:1px solid var(--line);border-radius:10px;
  padding:24px 26px;margin:4px 0}
.stat-value{font-size:38px;font-weight:800;letter-spacing:-.5px;color:#fff;line-height:1.1}
.stat-label{font-size:14px;color:var(--muted);margin-top:6px}

/* ---- results table ---- */
.table-scroll{overflow-x:auto;margin:4px 0;border:1px solid var(--line);border-radius:8px}
table.results{border-collapse:collapse;width:100%;font-size:13.5px}
table.results th,table.results td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--line);
  white-space:nowrap}
table.results th{background:var(--surface2);color:var(--muted);font-weight:600;
  text-transform:uppercase;font-size:11.5px;letter-spacing:.3px}
table.results tbody tr:nth-child(even){background:rgba(148,163,184,.05)}
table.results tbody tr:last-child td{border-bottom:none}
table.results td.num,table.results th.num{text-align:right;
  font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.row-count{font-size:12.5px;color:var(--muted);margin:8px 0 0}

/* ---- chart ---- */
.chart-box{margin:4px 0}
.chart-box svg{width:100%;max-width:100%;height:auto;display:block}
.chart-box text{fill:var(--muted);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.chart-title{font-size:15px;margin:0 0 6px;color:var(--text);font-weight:600}

.loading-note{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:10px}

/* 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;
}

/* 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; }