/*!
 * @bitgrader/design v0.2.0
 * AUTO-GENERATED FROM tokens.css — DO NOT EDIT.
 * Source of truth: packages/bitgrader-design/src/tokens.css
 * Rebuild with: (cd packages/bitgrader-design && npm run build)
 */
:root {
  /* ──── Layout & typography (theme-independent) ──── */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  /* Negative offset draws the ring inside the control box (links/buttons keep --focus-ring-offset). */
  --focus-ring-inset-offset: calc(-1 * var(--focus-ring-width));
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-pull-tight: calc(var(--space-xs) * -1);
  --size-touch-min: 2rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-container: 0.5rem;
  --radius-pill: 999px;
  --border-width-default: 1px;
  --shadow-hairline: 0 0 0 var(--border-width-default);
  --shadow-elevated: 0 0.25rem 1rem var(--color-shadow-elevated);
  --shadow-overlay: 0 0.5rem 1.5rem var(--color-shadow-overlay);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-body: 1.5;
  --line-height-snug: 1.35;
  --line-height-relaxed: 1.65;
  --font-size-page-title: 2rem;
  --font-size-section-title: 1.25rem;
  --font-size-brand: 1.125rem;
  --font-size-caption: 0.85rem;
  --font-size-hint: 0.9rem;
  --font-size-code-em: 0.925em;
  --code-inline-padding: 0.1em 0.35em;
  --line-height-heading: 1.3;
  --line-height-control: 1.6;
  --letter-spacing-brand: -0.02em;

  --duration-interaction: 120ms;
  --ease-default: ease;
  --motion-press-nudge: 1px;
  --motion-skip-offscreen: -140%;
  --layer-skip-link: 1000;

  --breakpoint-md: 48rem;
  --layout-detail-label-width: 6rem;
  /*
    Native <select> chevron (games-list.css): data-URL SVG cannot use var() for fill, so icon color is
    duplicated there. When you change --color-text-primary for dark/light, update the matching fills
    in the two background-image rules (search for “select chevron”).
  */
  --select-chevron-inset-end: var(--space-2xs);
  --select-chevron-size: 1rem;
  --select-text-to-chevron-gap: var(--space-xs);
  --select-padding-inline-end: calc(
    var(--select-chevron-inset-end) + var(--select-chevron-size) + var(--select-text-to-chevron-gap)
  );

  --opacity-control-disabled: 0.45;
  --saturate-disabled: 0.5;

  /*
    Greyscale foundation — cool blue-grey (hue ~220, saturation ~5-8 %).
    Perceptually even in CIELAB L*; darker values nest deeper.

    Dark  L0…L4: #111318 → #1a1e28 → #252a38 → #2e3445 → #3a4258
    Light L0…L4: #f8f9fb → #ffffff → #eef0f5 → #e3e6ed → #d8dce5
  */

  /* ──── Greyscale (dark default) ──── */
  color-scheme: dark;
  --color-surface-page:     #111318;
  --color-surface-raised:   #1a1e28;
  --color-surface-sunken:   #0c0e12;
  --color-surface-hover:    #252a38;
  --color-surface-active:   #2e3445;
  --color-border-primary:   #3a4258;
  --color-border-secondary: #252a38;
  --color-text-primary:     #e6e9ef;
  --color-text-secondary:   #9098a8;
  --color-text-disabled:    #606a80;

  /* ──── Accent palette (dark) ──── */
  --color-accent-danger:    #fc5c65;
  --color-accent-warning:   #fd9644;
  --color-accent-caution:   #fed330;
  --color-accent-success:   #26de81;
  --color-accent-info:      #2bcbba;
  --color-accent-primary:   #45aaf2;
  --color-accent-action:    #5080f0;
  --color-accent-highlight: #aa64f0;
  --color-accent-muted:     #d1d8e0;
  --color-accent-subtle:    #778ca3;
  --color-text-on-accent:   #ffffff;
  --color-text-on-caution:  #000000;
  --color-shadow-elevated:  rgba(0, 0, 0, 0.18);
  --color-shadow-overlay:   rgba(0, 0, 0, 0.15);

  /* Focus ring — derived from action accent (AA vs raised + page) */
  --color-focus-ring: #5080f0;
  --color-focus-ring-shadow: rgba(80, 128, 240, 0.2);
  --color-focus-ring-shadow-strong: rgba(80, 128, 240, 0.3);

  /* ──── Backward-compat aliases (consumed by existing blocks) ──── */
  --color-bg: var(--color-surface-page);
  --color-bg-raised: var(--color-surface-raised);
  --color-text: var(--color-text-primary);
  --color-muted: var(--color-text-secondary);
  --color-border: var(--color-border-primary);
  --color-surface-canvas: var(--color-surface-sunken);
  --color-surface-accent: var(--color-surface-active);
  --color-accent-border: var(--color-accent-action);

  /* UI chrome */
  --color-nav-link-shadow: rgba(0, 0, 0, 0.3);
  --color-nav-active-shadow: rgba(80, 128, 240, 0.25);
  --color-overlay-press: rgba(255, 255, 255, 0.06);
  --color-overlay-press-strong: rgba(255, 255, 255, 0.1);
  --color-overlay-scrim: rgba(0, 0, 0, 0.45);

  /* Skip link (inverted: light bg on dark page) */
  --color-skip-bg: var(--color-text-primary);
  --color-skip-bg-hover: var(--color-text-secondary);
  --color-skip-bg-active: var(--color-text-disabled);
  --color-skip-fg: var(--color-surface-page);

  /* Flash messages */
  --color-flash-default-bg: #332b00;
  --color-flash-default-text: #fbbf24;
  --color-flash-notice-bg: #0c2d3e;
  --color-flash-notice-text: #67e8f9;
  --color-flash-notice-border: #155e75;
  --color-flash-alert-bg: #3b1111;
  --color-flash-alert-text: #fca5a5;
  --color-flash-alert-border: #7f1d1d;
}

/* ──── Light theme ──── */
html[data-theme="light"] {
  color-scheme: light;
  --color-surface-page:     #f8f9fb;
  --color-surface-raised:   #ffffff;
  --color-surface-sunken:   #eef0f5;
  --color-surface-hover:    #e3e6ed;
  --color-surface-active:   #d8dce5;
  --color-border-primary:   #c4c9d4;
  --color-border-secondary: #e3e6ed;
  --color-text-primary:     #171c26;
  --color-text-secondary:   #525d72;
  --color-text-disabled:    #8790a0;

  --color-accent-danger:    #df163a;
  /* Warning: orange-red (severity). Caution: dark gold / yellow-brown (attention) — distinct hues at AA on surfaces. */
  --color-accent-warning:   #c2410c;
  --color-accent-caution:   #854d0e;
  --color-accent-success:   #158148;
  --color-accent-info:      #0a7e79;
  --color-accent-primary:   #1e77ae;
  --color-accent-action:    #3d6bd7;
  --color-accent-highlight: #8854d0;
  /* Darker blue-grey vs prior #a5b1c2 — AA on page + raised (neutral tags) */
  --color-accent-muted:     #5c677a;
  --color-accent-subtle:    #557396;
  --color-text-on-accent:   #ffffff;
  --color-text-on-caution:  #000000;
  --color-shadow-elevated:  rgba(0, 0, 0, 0.12);
  --color-shadow-overlay:   rgba(0, 0, 0, 0.15);

  --color-focus-ring: #3d6bd7;
  --color-focus-ring-shadow: rgba(61, 107, 215, 0.2);
  --color-focus-ring-shadow-strong: rgba(61, 107, 215, 0.3);

  --color-nav-link-shadow: rgba(0, 0, 0, 0.08);
  --color-nav-active-shadow: rgba(61, 107, 215, 0.2);
  --color-overlay-press: rgba(0, 0, 0, 0.06);
  --color-overlay-press-strong: rgba(0, 0, 0, 0.1);
  --color-overlay-scrim: rgba(0, 0, 0, 0.45);

  --color-skip-bg: var(--color-text-primary);
  --color-skip-bg-hover: var(--color-text-secondary);
  --color-skip-bg-active: var(--color-text-disabled);
  --color-skip-fg: var(--color-surface-raised);

  --color-flash-default-bg: #fef3c7;
  --color-flash-default-text: #92400e;
  --color-flash-notice-bg: #e0f2fe;
  --color-flash-notice-text: #0c4a6e;
  --color-flash-notice-border: #7dd3fc;
  --color-flash-alert-bg: #fee2e2;
  --color-flash-alert-text: #991b1b;
  --color-flash-alert-border: #fecaca;
}

/* ──── Dark theme (explicit — mirrors :root defaults) ──── */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-surface-page:     #111318;
  --color-surface-raised:   #1a1e28;
  --color-surface-sunken:   #0c0e12;
  --color-surface-hover:    #252a38;
  --color-surface-active:   #2e3445;
  --color-border-primary:   #3a4258;
  --color-border-secondary: #252a38;
  --color-text-primary:     #e6e9ef;
  --color-text-secondary:   #9098a8;
  --color-text-disabled:    #606a80;

  --color-accent-danger:    #fc5c65;
  --color-accent-warning:   #fd9644;
  --color-accent-caution:   #fed330;
  --color-accent-success:   #26de81;
  --color-accent-info:      #2bcbba;
  --color-accent-primary:   #45aaf2;
  --color-accent-action:    #5080f0;
  --color-accent-highlight: #aa64f0;
  --color-accent-muted:     #d1d8e0;
  --color-accent-subtle:    #778ca3;
  --color-text-on-accent:   #ffffff;
  --color-text-on-caution:  #000000;
  --color-shadow-elevated:  rgba(0, 0, 0, 0.18);
  --color-shadow-overlay:   rgba(0, 0, 0, 0.15);

  --color-focus-ring: #5080f0;
  --color-focus-ring-shadow: rgba(80, 128, 240, 0.2);
  --color-focus-ring-shadow-strong: rgba(80, 128, 240, 0.3);

  --color-nav-link-shadow: rgba(0, 0, 0, 0.3);
  --color-nav-active-shadow: rgba(80, 128, 240, 0.25);
  --color-overlay-press: rgba(255, 255, 255, 0.06);
  --color-overlay-press-strong: rgba(255, 255, 255, 0.1);
  --color-overlay-scrim: rgba(0, 0, 0, 0.45);

  --color-skip-bg: var(--color-text-primary);
  --color-skip-bg-hover: var(--color-text-secondary);
  --color-skip-bg-active: var(--color-text-disabled);
  --color-skip-fg: var(--color-surface-page);

  --color-flash-default-bg: #332b00;
  --color-flash-default-text: #fbbf24;
  --color-flash-notice-bg: #0c2d3e;
  --color-flash-notice-text: #67e8f9;
  --color-flash-notice-border: #155e75;
  --color-flash-alert-bg: #3b1111;
  --color-flash-alert-text: #fca5a5;
  --color-flash-alert-border: #7f1d1d;
}

/* Root canvas — ensures UA dark canvas matches --color-surface-page */
html {
  background-color: var(--color-surface-page);
  min-height: 100dvh;
}


/*!
 * @bitgrader/design v0.2.0
 * AUTO-GENERATED FROM components.css — DO NOT EDIT.
 * Source of truth: packages/bitgrader-design/src/components.css
 * Rebuild with: (cd packages/bitgrader-design && npm run build)
 */
/* Shared CUBE-style primitives and components for Rails-rendered BitGrader apps. */

/* Composition */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-space, var(--space-md));
}

.stack--gap-xs {
  --stack-space: var(--space-xs);
}

.stack--gap-sm {
  --stack-space: var(--space-sm);
}

.stack--gap-md {
  --stack-space: var(--space-md);
}

.stack--gap-lg {
  --stack-space: var(--space-lg);
}

.stack--gap-xl {
  --stack-space: var(--space-xl);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-space, var(--space-sm));
  align-items: center;
}

.cluster--gap-xs {
  --cluster-space: var(--space-xs);
}

.cluster--gap-sm {
  --cluster-space: var(--space-sm);
}

.cluster--gap-md {
  --cluster-space: var(--space-md);
}

.cluster--gap-lg {
  --cluster-space: var(--space-lg);
}

.cluster--gap-xl {
  --cluster-space: var(--space-xl);
}

.sidebar {
  display: grid;
  gap: var(--sidebar-space, var(--space-lg));
}

@media (min-width: 48rem) {
  .sidebar {
    grid-template-columns: minmax(240px, 300px) 1fr;
    flex: 1;
    min-height: 0;
  }

  /* Independent scroll panes: do not chain wheel/touch scroll to the sibling column or page. */
  .sidebar > * {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: none;
  }
}

/* Utilities */
.u-p-md {
  padding: var(--space-md);
}

.u-section-heading {
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  text-wrap: balance;
}

.u-hidden {
  display: none !important;
}

/* App shell, header, nav, and flash messages */
.app-shell {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.app-header {
  border-bottom: var(--border-width-default) solid var(--color-border);
  padding: var(--space-sm) var(--space-md);
}

.app-header__bar {
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.app-header__actions {
  margin-left: auto;
  flex-shrink: 0;
}

.app-brand {
  font-size: var(--font-size-brand);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-brand);
  color: var(--color-text);
  text-decoration: none;
}

.app-brand:visited {
  color: var(--color-text);
}

.app-nav {
  margin-left: auto;
}

.app-nav__link {
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-hairline) transparent;
  transition:
    background-color var(--duration-interaction) var(--ease-default),
    color var(--duration-interaction) var(--ease-default),
    box-shadow var(--duration-interaction) var(--ease-default);
}

.app-nav__link:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
  box-shadow: var(--shadow-hairline) var(--color-nav-link-shadow);
}

.app-nav__link:active {
  background: var(--color-surface-active);
  color: var(--color-text);
}

.app-nav__link:visited {
  color: var(--color-text);
}

.app-nav__link:focus-visible {
  background: var(--color-surface-accent);
  color: var(--color-text);
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  box-shadow: var(--shadow-hairline) var(--color-focus-ring-shadow);
}

/* Match .button--primary: solid action fill for current section */
.app-nav__link--active {
  border-color: transparent;
  background: var(--color-accent-action);
  color: var(--color-text-on-accent);
  box-shadow: none;
}

.app-nav__link--active:hover,
.app-nav__link--active:active {
  border-color: transparent;
  background: var(--color-accent-action);
  color: var(--color-text-on-accent);
  filter: brightness(1.08);
  box-shadow: none;
}

.app-nav__link--active:visited {
  color: var(--color-text-on-accent);
}

.app-nav__link--active:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  box-shadow: var(--shadow-hairline) var(--color-focus-ring-shadow);
}

.app-nav__link--placeholder {
  cursor: default;
  opacity: 0.5;
}

.app-avatar--header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  border-radius: 50%;
  background: var(--color-surface-active);
  border: var(--border-width-default) solid var(--color-border);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-caption);
  text-decoration: none;
  line-height: 1;
}

.app-skip-link {
  position: absolute;
  left: var(--space-sm);
  top: 0;
  transform: translateY(var(--motion-skip-offscreen));
  background: var(--color-skip-bg);
  color: var(--color-skip-fg);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-container);
  text-decoration: none;
  z-index: var(--layer-skip-link);
  transition:
    background-color var(--duration-interaction) var(--ease-default),
    transform var(--duration-interaction) var(--ease-default);
}

.app-skip-link:focus-visible {
  background: var(--color-skip-bg-hover);
  transform: translateY(var(--space-xs));
  text-decoration: underline;
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  box-shadow: var(--shadow-hairline) var(--color-focus-ring-shadow-strong);
}

.app-skip-link:hover {
  background: var(--color-skip-bg-hover);
}

.app-skip-link:active {
  background: var(--color-skip-bg-active);
}

.app-skip-link:visited {
  color: var(--color-skip-fg);
}

.app-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xs);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-raised);
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition:
    background-color var(--duration-interaction) var(--ease-default),
    border-color var(--duration-interaction) var(--ease-default);
}

.app-theme-toggle:hover {
  background: var(--color-surface-hover);
}

.app-theme-toggle:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  box-shadow: var(--shadow-hairline) var(--color-focus-ring-shadow);
}

.app-theme-toggle:active {
  background: var(--color-surface-active);
}

.app-theme-toggle__track {
  position: relative;
  display: block;
  width: 2.5rem;
  height: 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.app-theme-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.25rem - 4px);
  height: calc(1.25rem - 4px);
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: 0 1px 2px var(--color-shadow-overlay);
  transition: transform var(--duration-interaction) var(--ease-default);
}

html[data-theme="dark"] .app-theme-toggle__thumb {
  transform: translateX(calc(2.5rem - 4px - (1.25rem - 4px)));
}

.app-main {
  width: 100%;
  padding: var(--space-md);
  scroll-margin-top: var(--space-md);
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-main__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.app-main__body:has(.sidebar) {
  display: flex;
  flex-direction: column;
}

@media (min-width: 48rem) {
  .app-main__body:has(.sidebar) {
    overflow: hidden;
  }

  .app-main__body:has(.sidebar) > .sidebar {
    flex: 1;
    min-height: 0;
  }
}

@media (min-width: var(--breakpoint-md)) {
  .app-header {
    padding: var(--space-md);
  }

  .app-main {
    padding: var(--space-lg);
  }
}

.app-flash {
  flex-shrink: 0;
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-container);
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-sm);
  background: var(--color-flash-default-bg);
  color: var(--color-flash-default-text);
  justify-content: space-between;
  align-items: center;
}

.app-flash__message {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-flash--notice {
  background: var(--color-flash-notice-bg);
  color: var(--color-flash-notice-text);
  border-color: var(--color-flash-notice-border);
}

.app-flash--alert {
  background: var(--color-flash-alert-bg);
  color: var(--color-flash-alert-text);
  border-color: var(--color-flash-alert-border);
}

.app-flash__dismiss {
  border: var(--border-width-default) solid currentColor;
  border-radius: var(--radius-container);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  color: inherit;
  padding: 0 var(--space-xs);
  min-width: var(--size-touch-min);
  min-height: var(--size-touch-min);
  line-height: var(--line-height-control);
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition:
    background-color var(--duration-interaction) var(--ease-default),
    transform var(--duration-interaction) var(--ease-default);
}

.app-flash__dismiss:hover {
  background: var(--color-overlay-press);
}

.app-flash__dismiss:active {
  transform: translateY(var(--motion-press-nudge));
}

.app-flash__dismiss:disabled {
  opacity: var(--opacity-control-disabled);
  filter: saturate(var(--saturate-disabled));
  cursor: not-allowed;
}

.app-flash__dismiss:disabled:hover {
  background: transparent;
}

.app-flash__dismiss:focus-visible {
  background: var(--color-overlay-press-strong);
  outline: var(--focus-ring-width) solid currentColor;
  outline-offset: var(--focus-ring-offset);
}

/* Generic page, card, button, form, table, badge, and empty-state primitives */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.page-title {
  margin: 0;
  font-size: var(--font-size-page-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.page-lede {
  margin: 0;
  color: var(--color-muted);
  line-height: var(--line-height-body);
  max-width: 65ch;
}

.section-title {
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.card,
.stat-card,
.login-card,
.profile-collection-card,
.profile-collections-grid__card {
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-container);
  background: var(--color-surface-raised);
}

.card,
.stat-card,
.profile-collections-grid__card {
  padding: var(--space-md);
}

.card--sunken,
.empty-state,
.profile-collections__empty-state {
  border: var(--border-width-default) solid var(--color-border-secondary);
  border-radius: var(--radius-container);
  background: var(--color-surface-sunken);
}

.card--sunken,
.empty-state,
.profile-collections__empty-state {
  padding: var(--space-md);
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.stat-card__label {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.stat-card__value {
  color: var(--color-text);
  font-size: var(--font-size-page-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.stat-card__hint,
.empty-state__hint,
.profile-collections__empty,
.profile-settings__hint {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-snug);
}

.button,
.button:visited,
.profile-sidebar__settings-btn,
.profile-collections__add-btn,
.login-card__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-touch-min);
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-control);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-interaction) var(--ease-default),
    border-color var(--duration-interaction) var(--ease-default),
    color var(--duration-interaction) var(--ease-default),
    filter var(--duration-interaction) var(--ease-default),
    transform var(--duration-interaction) var(--ease-default);
}

.button:hover,
.profile-sidebar__settings-btn:hover,
.profile-collections__add-btn:hover:not(:disabled) {
  background: var(--color-surface-hover);
}

.button:active,
.profile-sidebar__settings-btn:active,
.profile-collections__add-btn:active:not(:disabled),
.login-card__submit:active {
  transform: translateY(var(--motion-press-nudge));
}

.button:focus-visible,
.profile-sidebar__settings-btn:focus-visible,
.profile-collections__add-btn:focus-visible,
.login-card__submit:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  box-shadow: var(--shadow-hairline) var(--color-focus-ring-shadow);
}

.button:disabled,
.button[aria-disabled="true"],
.profile-collections__add-btn:disabled,
.login-card__submit:disabled {
  opacity: var(--opacity-control-disabled);
  filter: saturate(var(--saturate-disabled));
  cursor: not-allowed;
  transform: none;
}

.button--primary,
.login-card__submit {
  border-color: transparent;
  background: var(--color-accent-action);
  color: var(--color-text-on-accent);
}

.button--primary:hover,
.login-card__submit:hover {
  filter: brightness(1.08);
}

.button--danger {
  border-color: var(--color-accent-danger);
  background: transparent;
  color: var(--color-accent-danger);
}

.button--danger:hover {
  background: color-mix(in srgb, var(--color-accent-danger) 12%, transparent);
}

.button--warning {
  border-color: var(--color-accent-warning);
  background: transparent;
  color: var(--color-accent-warning);
}

.button--warning:hover {
  background: color-mix(in srgb, var(--color-accent-warning) 12%, transparent);
}

.button--success {
  border-color: transparent;
  background: var(--color-accent-success);
  color: var(--color-text-on-accent);
}

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.login-card {
  width: min(22rem, 100%);
  padding: var(--space-lg);
}

.login-card__heading {
  font-size: var(--font-size-page-title);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.form-label,
.login-card__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--font-size-caption);
  color: var(--color-muted);
}

.form-input,
.form-select,
.form-textarea,
.login-card__input {
  width: 100%;
  padding: var(--space-xs);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-active);
  color: var(--color-text);
  font: inherit;
}

.form-textarea {
  min-height: 8rem;
  resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder,
.login-card__input::placeholder {
  color: var(--color-text-disabled);
}

.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.login-card__input:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-inset-offset);
  box-shadow: none;
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled,
.login-card__input:disabled {
  opacity: var(--opacity-control-disabled);
  cursor: not-allowed;
}

.table-wrap,
.game-comments__table-wrap {
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
}

.data-table,
.game-comments__table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: var(--font-size-caption);
}

.data-table th,
.game-comments__table th {
  padding: var(--space-xs);
  border-bottom: var(--border-width-default) solid var(--color-border);
  color: var(--color-muted);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  vertical-align: middle;
}

.data-table td,
.game-comments__table td {
  padding: var(--space-xs);
  border-bottom: var(--border-width-default) solid var(--color-border-secondary);
  vertical-align: middle;
}

.data-table th:not(:first-child),
.data-table td:not(:first-child),
.game-comments__table th:not(:first-child),
.game-comments__table td:not(:first-child) {
  border-left: var(--border-width-default) solid var(--color-border-secondary);
}

.table-empty td,
.game-comments__empty td {
  width: auto;
  text-align: center;
  color: var(--color-muted);
  padding: var(--space-md) var(--space-sm);
}

/* Score chip — border hue often set inline (ApplicationHelper/Web builders). Matches web sidebar tables. */
.game-score-accent-box {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0 var(--space-xs);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  background: transparent;
}

.game-score-accent-box--na {
  font-weight: var(--font-weight-regular);
  color: var(--color-muted);
  border-color: var(--color-border);
}

.badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

/* Profile sidebar caps — tighter radius than default badge pill (parity with blocks/games-list.css on web). */
.profile-sidebar__role {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  line-height: 1;
}

.badge--success,
.status-pill--success,
.profile-sidebar__role--admin {
  background: var(--color-accent-success);
  color: var(--color-text-on-accent);
}

.badge--info,
.status-pill--info,
.profile-sidebar__role--grader {
  background: var(--color-accent-action);
  color: var(--color-text-on-accent);
}

.badge--warning,
.status-pill--warning {
  background: var(--color-accent-warning);
  color: var(--color-text-on-accent);
}

.badge--danger,
.status-pill--danger {
  background: var(--color-accent-danger);
  color: var(--color-text-on-accent);
}

.badge--neutral,
.status-pill--neutral {
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
  border: var(--border-width-default) solid var(--color-border-primary);
}

@media (prefers-reduced-motion: reduce) {
  .app-skip-link,
  .app-nav__link,
  .app-theme-toggle,
  .app-theme-toggle__thumb,
  .app-flash__dismiss,
  .button,
  .profile-sidebar__settings-btn,
  .profile-collections__add-btn,
  .login-card__submit {
    transition: none;
  }

  .app-flash__dismiss:active,
  .button:active,
  .profile-sidebar__settings-btn:active,
  .profile-collections__add-btn:active:not(:disabled),
  .login-card__submit:active {
    transform: none;
  }
}