/* ==========================================================================
   SAMPLE — a table with a hundred thousand rows
   ==========================================================================
   The one demo here whose claim is a number you can watch. Everything is
   arranged so the two implementations sit side by side and the DOM node count
   is on screen at all times.

   Scoped under .grd.
   ========================================================================== */

.grd {
  --bg:     #0b0e13;
  --bg-2:   #121722;
  --panel:  #171d2a;
  --panel-2:#1f2736;
  --line:   #28313f;
  --line-2: #3a4657;
  --ink:    #eef2f8;
  --ink-2:  #aab8c9;
  --ink-3:  #8b9aab;

  --brand:  #818cf8;
  --go:     #4ade80;
  --warn:   #fbbf24;
  --stop:   #fb7185;

  --sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.grd *, .grd *::before, .grd *::after { box-sizing: border-box; }
.grd a { color: var(--brand); }
.grd :focus-visible { outline-color: var(--brand); }

.grd-wrap { width: 100%; max-width: 84rem; margin-inline: auto; padding: 0 clamp(1rem, 3vw, 2rem) 5rem; }

.grd-hero { padding-block: clamp(2rem, 5vw, 3rem) 1.25rem; max-width: 46rem; }
.grd-hero h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -0.03em; line-height: 1.05; font-weight: 800; }
.grd-hero h1 em { font-style: normal; color: var(--brand); }
.grd-hero p { margin: .9rem 0 0; color: var(--ink-2); line-height: 1.7; }

/* ------------------------------------------------------------- controls --- */

.grd-bar {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: .8rem .9rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: .9rem;
}
.grd-bar .sp { margin-left: auto; }

.gbtn {
  font: inherit; font-size: .8rem; font-weight: 600;
  padding: .5rem .9rem; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink);
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
.gbtn:hover { background: #283243; border-color: var(--ink-3); }
.gbtn:active { transform: scale(.97); }
.gbtn[disabled] { opacity: .45; cursor: not-allowed; }
.gbtn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #14162b; }

.grd-search {
  display: flex; align-items: center; gap: .45rem;
  padding: .4rem .7rem; min-width: 0; flex: 1 1 12rem; max-width: 20rem;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px;
}
.grd-search input { font: inherit; font-size: .82rem; background: none; border: 0; color: var(--ink); width: 100%; min-width: 0; }
.grd-search input:focus { outline: none; }
.grd-search svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }

/* --------------------------------------------------------------- meters --- */

.grd-meters { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-bottom: .9rem; }
.meter {
  padding: .6rem .8rem; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--c, var(--line-2));
}
.meter dt { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.meter dd { margin: .2rem 0 0; font-family: var(--mono); font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.meter small { display: block; margin-top: .1rem; font-size: .66rem; color: var(--ink-3); }
.meter[data-good] { --c: var(--go); }
.meter[data-bad]  { --c: var(--stop); }
.meter[data-bad] dd { color: var(--stop); }

/* --------------------------------------------------------------- the table --- */

.grd-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  overflow-x: auto; overflow-y: hidden;
}
/* The header and the row viewport must be the same width or the columns stop
   lining up, so the minimum lives on both and the panel scrolls the pair. */
.grd-head, .grd-scroll { min-width: 33rem; }
.grd-head {
  display: grid;
  grid-template-columns: 5.5rem minmax(0,1fr) 7rem 6rem 6.5rem;
  gap: .6rem;
  padding: .55rem .9rem;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.grd-head button {
  font: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; color: inherit; cursor: pointer; padding: 0; text-align: left;
  display: flex; align-items: center; gap: .3rem;
}
.grd-head button:hover { color: var(--ink); }
.grd-head button[data-dir]::after { content: "▲"; font-size: .7em; }
.grd-head button[data-dir="desc"]::after { content: "▼"; }
.grd-head .num { text-align: right; justify-content: flex-end; }

/* The scroller. Fixed height, and the spacer inside it is what gives the
   scrollbar something to describe. */
.grd-scroll { height: 26rem; overflow-y: auto; position: relative; contain: strict; }
.grd-spacer { position: relative; width: 100%; }
.grd-rows { position: absolute; inset-inline: 0; top: 0; will-change: transform; }

.grd-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0,1fr) 7rem 6rem 6.5rem;
  gap: .6rem;
  align-items: center;
  height: 34px;
  padding: 0 .9rem;
  border-bottom: 1px solid var(--line);
  font-size: .8rem;
}
.grd-row:hover { background: var(--panel-2); }
.grd-row .id { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.grd-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grd-row .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.grd-row .st { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; text-align: right; }
.grd-row .st[data-s="paid"]     { color: var(--go); }
.grd-row .st[data-s="pending"]  { color: var(--warn); }
.grd-row .st[data-s="refunded"] { color: var(--stop); }
.grd-row mark { background: rgba(129, 140, 248, .3); color: inherit; border-radius: 2px; }

.grd-foot { padding: .55rem .9rem; border-top: 1px solid var(--line); font-size: .74rem; color: var(--ink-3); display: flex; gap: 1rem; flex-wrap: wrap; }
.grd-foot b { color: var(--ink); font-family: var(--mono); }

.grd-warn {
  margin-top: .9rem; padding: .7rem .9rem;
  background: rgba(251, 113, 133, .08); border: 1px solid rgba(251, 113, 133, .35);
  border-radius: 10px; font-size: .8rem; color: var(--ink-2); line-height: 1.6;
}
.grd-warn[hidden] { display: none; }

/* --------------------------------------------------------------- notes --- */

.grd-note { margin-top: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.1rem, 3vw, 2rem); }
.grd-note h2 { margin: 0 0 .8rem; font-size: 1.25rem; letter-spacing: -0.02em; }
.grd-note h3 { margin: 1.6rem 0 .4rem; font-size: .95rem; }
.grd-note p  { margin: 0 0 .7rem; color: var(--ink-2); line-height: 1.7; max-width: 46rem; }
.grd-note code { font-family: var(--mono); font-size: .86em; background: #0e131b; border-radius: 4px; padding: .1em .35em; color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .grd *, .grd *::before, .grd *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* The armed warning for "Draw everything". A native confirm() used to do this
   job, which meant blocking the tab to warn that the next click blocks the
   tab. This says the same thing without stopping anything. */
.grd-arm {
  flex-basis: 100%;
  margin: .5rem 0 0;
  padding: .55rem .7rem;
  border: 1px solid var(--warn);
  border-inline-start: 3px solid var(--warn);
  border-radius: 9px;
  background: rgba(251, 191, 36, .1);
  color: var(--ink);
  font-size: .8rem; line-height: 1.55;
  max-width: 46rem;
}
.grd-arm[hidden] { display: none; }
.gbtn[data-armed] { border-color: var(--warn); color: var(--warn); }