/* The reference viewer's design, written out.
 *
 * Tokens read from the live page: shadcn's neutral base at radius .625rem.
 * The lab() values it serves are reproduced here as the hex they resolve to,
 * so the palette is legible and editable rather than a wall of colour-space
 * arithmetic.
 *
 * The type is litepipe.ai's rather than the reference viewer's — the tool and
 * the page announcing it should look like the same product. Same four
 * families, same roles: Space Grotesk for anything that names something, DM
 * Sans for prose, Geist on the controls, JetBrains Mono for every number.
 * They come from Google Fonts, as they do there, so a machine with no network
 * gets the stack behind each one instead.
 *
 * Only the utilities the markup actually uses are defined. Pulling the whole
 * framework to render four panels would be 100KB to use perhaps eighty rules,
 * and the point of copying the layout is that it is small enough to read. */

:root {
  --background: #fff;
  --foreground: #0a0a0a;
  --card: #fff;
  --card-foreground: #0a0a0a;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --primary: #171717;
  --primary-foreground: #fafafa;
  --border: #e5e5e5;
  --radius: 0.625rem;

  --font-sans: "DM Sans", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font-display: "Space Grotesk", ui-sans-serif, -apple-system, sans-serif;
  --font-ui: "Geist", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --sky: #0284c7;
  --red: #f87171;
  --zinc: #a1a1aa;
  --click: #d63243;
  --click-dot: #ff5f6d;
  --amber: #d97706;
  --emerald: #059669;
  --violet: #7c3aed;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #0a0a0a;
    --foreground: #fafafa;
    --card: #141414;
    --card-foreground: #fafafa;
    --muted: #1f1f1f;
    --muted-foreground: #a1a1aa;
    --primary: #fafafa;
    --primary-foreground: #171717;
    --border: #262626;

    --sky: #38bdf8;
    --red: #fca5a5;
    --zinc: #71717a;
    --click: #ff5f6d;
    --click-dot: #ff5f6d;
    --amber: #fbbf24;
    --emerald: #34d399;
    --violet: #a78bfa;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.font-mono { font-family: var(--font-mono); }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.self-center { align-self: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.shrink-0 { flex-shrink: 0; }
.min-h-0 { min-height: 0; }
.min-w-0 { min-width: 0; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.h-full { height: 100%; }
.w-full { width: 100%; }
.h-half { height: 50%; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.cursor-pointer { cursor: pointer; }
.pointer-events-none { pointer-events: none; }
.object-contain { object-fit: contain; }

.gap-0\.5 { gap: .125rem; }
.gap-1 { gap: .25rem; }
.gap-1\.5 { gap: .375rem; }
.gap-2 { gap: .5rem; }
.gap-2\.5 { gap: .625rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }

.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.px-1\.5 { padding-inline: .375rem; }
.px-2 { padding-inline: .5rem; }
.px-2\.5 { padding-inline: .625rem; }
.px-3 { padding-inline: .75rem; }
.px-5 { padding-inline: 1.25rem; }
.py-px { padding-block: 1px; }
.py-1\.5 { padding-block: .375rem; }
.py-2 { padding-block: .5rem; }
.pb-2 { padding-bottom: .5rem; }
.pl-2 { padding-left: .5rem; }
.pr-1 { padding-right: .25rem; }

.w-8 { width: 2rem; }
.w-12 { width: 3rem; }
.w-20 { width: 5rem; }
.w-28 { width: 7rem; }
.size-1\.5 { width: .375rem; height: .375rem; }
.size-2 { width: .5rem; height: .5rem; }
.size-6 { width: 1.5rem; height: 1.5rem; }
.h-6 { height: 1.5rem; }
.h-10 { height: 2.5rem; }
.w-9 { width: 2.25rem; }
.min-w-36 { min-width: 9rem; }

/* surfaces */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.rounded { border-radius: .25rem; }
.rounded-md { border-radius: .375rem; }
.rounded-lg { border-radius: .5rem; }
.rounded-xl { border-radius: .75rem; }
.rounded-full { border-radius: 9999px; }
.border { border: 1px solid var(--border); }
.border-l-2 { border-left: 2px solid transparent; }
.border-b { border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.bg-black { background: #000; }
.bg-muted { background: var(--muted); }
.bg-card { background: var(--card); }
.bg-primary { background: var(--primary); }

/* the selected row in every list: a rule down the left and a wash behind */
.is-active {
  border-left-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.hoverable:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }

/* type */
.text-\[9px\]  { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.leading-snug { line-height: 1.375; }

.text-foreground { color: var(--foreground); }
.text-foreground\/90 { color: color-mix(in srgb, var(--foreground) 90%, transparent); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-muted-foreground\/70 { color: color-mix(in srgb, var(--muted-foreground) 70%, transparent); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }

/* one colour per kind of event, so a glance at the dot is enough */
.c-click, .c-click_release { color: var(--click); }
.c-scroll, .c-move { color: var(--sky); }
.c-text, .c-key { color: var(--amber); }
.c-app_switch, .c-window_focus { color: var(--violet); }
.c-drag { color: var(--amber); }
.c-type { color: var(--emerald); }
.c-default { color: var(--zinc); }
.dot { background: currentColor; }

.scrollbar-subtle { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.scrollbar-subtle::-webkit-scrollbar { width: 6px; }
.scrollbar-subtle::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.scrollbar-subtle::-webkit-scrollbar-track { background: transparent; }

/* controls */
button { font: inherit; }
.btn {
  border: 0; background: none; color: var(--muted-foreground);
  border-radius: .375rem; cursor: pointer; transition: background-color .15s, color .15s;
}
.btn:hover { background: var(--muted); color: var(--foreground); }
.btn.on { background: var(--primary); color: var(--primary-foreground); }
.btn:disabled { opacity: .4; cursor: default; }

.tab {
  height: 2.5rem; min-width: 9rem; border: 0; background: none;
  border-radius: .5rem; cursor: pointer; font-size: .875rem; font-weight: 600;
  color: var(--muted-foreground); transition: background-color .15s, color .15s;
}
.tab[aria-selected="true"] { background: var(--card); color: var(--foreground);
                             box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tablist { display: inline-flex; background: var(--muted); border-radius: .625rem; padding: .25rem; }