/* Shared design system for UX-100 work. Use these instead of one-off styles. */
:root {
  --ux-ink: #17181a;
  --ux-muted: #5f6368;
  --ux-line: #e4e1d8;
  --ux-paper: #ffffff;
  --ux-cream: #f6f4ee;
  --ux-green: #1d6b4a;
  --ux-green-soft: #e3f1e9;
  --ux-amber: #8a5300;
  --ux-amber-soft: #fdf1dc;
  --ux-red: #9b2c2c;
  --ux-red-soft: #fbe7e7;
  --ux-blue: #24519b;
  --ux-blue-soft: #e6eefb;
  --ux-radius: 14px;
  --ux-radius-sm: 10px;
  --ux-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 20px rgba(0, 0, 0, .06);
  --ux-gap: 16px;
  --ux-tap: 44px;
}

.ux-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--ux-tap); padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--ux-line); background: var(--ux-paper); color: var(--ux-ink);
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.ux-btn:hover { border-color: var(--ux-green); color: var(--ux-green); }
.ux-btn:focus-visible, .ux-card:focus-visible, .ux-chip:focus-visible { outline: 3px solid var(--ux-blue); outline-offset: 2px; }
.ux-btn--primary { background: var(--ux-green); border-color: var(--ux-green); color: #fff; }
.ux-btn--primary:hover { background: #17573c; color: #fff; }
.ux-btn--quiet { border-color: transparent; background: transparent; }

.ux-card {
  display: block; padding: 18px 20px; border: 1px solid var(--ux-line); border-radius: var(--ux-radius);
  background: var(--ux-paper); color: var(--ux-ink); text-decoration: none; box-shadow: var(--ux-shadow);
}
a.ux-card:hover { border-color: var(--ux-green); }
.ux-card h3 { margin: 0 0 6px; font-size: 17px; }
.ux-card p { margin: 0; color: var(--ux-muted); font-size: 14px; }

.ux-grid { display: grid; gap: var(--ux-gap); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.ux-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--ux-line); background: var(--ux-cream); color: var(--ux-ink);
  font: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
}

.ux-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  background: var(--ux-cream); color: var(--ux-muted);
}
.ux-badge--reviewed { background: var(--ux-green-soft); color: var(--ux-green); }
.ux-badge--registry { background: var(--ux-blue-soft); color: var(--ux-blue); }
.ux-badge--warn { background: var(--ux-amber-soft); color: var(--ux-amber); }
.ux-badge--alert { background: var(--ux-red-soft); color: var(--ux-red); }

.ux-pill {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 999px; background: var(--ux-cream); font-size: 14px;
}

.ux-note { padding: 10px 14px; border-radius: var(--ux-radius-sm); background: var(--ux-cream); color: var(--ux-muted); font-size: 14px; }
.ux-skeleton { background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%); background-size: 400% 100%; animation: ux-shimmer 1.4s ease infinite; border-radius: 8px; min-height: 16px; }
@keyframes ux-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .ux-skeleton { animation: none; } }
.ux-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }