/* The demo page: the results page's tokens and type, a wider frame, and two
   status colors (found, missing) the results page does not need. */
:root{
  --found:#1a7f4b; --missing:#b42318; --query:var(--ink); --ref:#8a8a8a;
  --adm:#1d4ed8; --conf:#8a8a8a;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --found:#4cc38a; --missing:#f97066; --ref:#7d7a74; --adm:#8aa4ff; --conf:#7d7a74; }
}
:root[data-theme="dark"]{ --found:#4cc38a; --missing:#f97066; --ref:#7d7a74; --adm:#8aa4ff; --conf:#7d7a74; }
:root[data-theme="light"]{ --found:#1a7f4b; --missing:#b42318; --ref:#8a8a8a; --adm:#1d4ed8; --conf:#8a8a8a; }

.wide{margin:0 auto;width:100%;max-width:72rem;padding:0 1.5rem}
.demo-head{border-bottom:1px solid var(--rule)}
.demo-head .wide{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;padding-bottom:1rem}
.home{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:600}
.home .sub{font-weight:400;color:var(--ink-faint)}
.mark-sm{width:30px;height:30px;color:var(--ink)}

.demo-title{margin-top:2.5rem;font-size:1.75rem;line-height:2.25rem}
@media (min-width:640px){ .demo-title{font-size:2.25rem;line-height:2.6rem} }
.intro{margin-top:1rem;max-width:46rem}

.tabs{display:flex;gap:1.5rem;margin-top:2rem;border-bottom:1px solid var(--rule)}
.tabs button{padding:.5rem 0;color:var(--ink-faint);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
main section{border-top:0}

.stage{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;margin-top:1.5rem}
@media (min-width:900px){ .stage{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)} }
.chart svg{width:100%;height:auto;aspect-ratio:16/10;background:var(--ground-alt);border:1px solid var(--rule);border-radius:.25rem}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.6rem;font-size:.8rem;color:var(--ink-muted)}
.sw{display:inline-block;width:14px;height:3px;margin-right:.4rem;vertical-align:middle}
.sw-query{background:var(--query)} .sw-ref{background:var(--ref)}
.sw-conf{background:var(--conf)} .sw-adm{background:var(--adm)}
.sw-found{background:var(--found);height:10px;width:3px} .sw-missing{background:var(--missing);height:10px;width:3px}

.steps{display:flex;flex-direction:column;gap:1rem;list-style:none;margin:0;padding:0}
.steps li{border:1px solid var(--rule);border-radius:.25rem;padding:.8rem 1rem;opacity:.35;transition:opacity .3s}
.steps li.on{opacity:1}
.k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.v{margin-top:.25rem;font-size:1.05rem;font-weight:500}
.note{margin-top:.2rem;font-size:.8rem;color:var(--ink-muted)}
.good{color:var(--found)} .bad{color:var(--missing)}
.strip{display:flex;align-items:center;gap:.6rem;margin-top:.5rem;font-size:.75rem;color:var(--ink-muted)}
.strip .lbl{width:6.5rem;flex-shrink:0}
.strip .bar{position:relative;flex:1;height:10px;border-radius:5px;
  background:linear-gradient(90deg,var(--rule),var(--ground-alt))}
.strip .bar i{position:absolute;top:-4px;width:4px;height:18px;border-radius:2px;left:0;opacity:0;transition:left .8s ease,opacity .3s}
#m-conf{background:var(--conf)} #m-adm{background:var(--adm)}
.ends{display:flex;justify-content:space-between;margin:.15rem 0 0 7.1rem;font-size:.7rem;color:var(--ink-faint)}

.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.25rem}
.controls > button{width:2.4rem;height:2.4rem;border:1px solid var(--rule);border-radius:.25rem}
.controls > button:hover{border-color:var(--ink)}
.count{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;color:var(--ink-muted);margin-right:auto}
.speeds{display:flex;border:1px solid var(--rule);border-radius:.125rem;overflow:hidden;font-size:.75rem}
.speeds button{padding:.35rem .6rem;color:var(--ink-faint)}
.speeds button + button{border-left:1px solid var(--rule)}
.speeds button[aria-checked="true"]{background:var(--ink);color:var(--ground)}

.curves{margin-top:2rem}
.curves svg{width:100%;height:auto;aspect-ratio:16/6;border:1px solid var(--rule);border-radius:.25rem;background:var(--ground)}
.curves figcaption{margin-top:.6rem;font-size:.85rem}

.table-wrap{overflow-x:auto}
#all-table td,#all-table th{white-space:nowrap}
#all-table tbody tr{cursor:pointer}
#all-table tbody tr:hover{background:var(--ground-alt)}
#all-note{margin-top:1.5rem}

.scope{margin:3rem 0 3rem;padding-top:1.5rem;border-top:1px solid var(--rule);font-size:.85rem}
.scope p + p{margin-top:.75rem}

svg text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;fill:var(--ink-faint)}
/* The charts scale with the page; on a phone their text would shrink below reading size. */
@media (max-width:640px){ svg text{font-size:22px} .curves .ttl{display:none} }