/* ============================================================================
 * JK Tools — Design System: Components
 * ----------------------------------------------------------------------------
 * Hand-authored, no-build, class-based component layer for the JK tools.
 * Requires tokens.css. Translucency is composed from the token triplets with
 * `hsl(var(--token) / <alpha>)`.
 *
 * Layers:
 *   1. Base    — sensible page defaults (assumes full-page tools)
 *   2. Layout  — container, separator, stack helpers
 *   3. Controls— button, input, textarea, select, label, field, switch
 *   4. Display — card, badge, table, kbd
 *   5. Nav      — tabs
 *   6. Overlay — dialog, toast
 *   7. Utils   — text helpers, spinner
 * ==========================================================================*/

/* 1. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s, color 0.2s;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; margin: 0; }
h1 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

a { color: hsl(var(--primary)); text-underline-offset: 2px; }

:where(button, [role="button"]) { font-family: inherit; }

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* 2. Layout ---------------------------------------------------------------- */
.ds-container { max-width: 1100px; margin: 0 auto; padding: var(--space-6); }
.separator { height: 1px; width: 100%; background: hsl(var(--border)); border: 0; margin: var(--space-5) 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* Shared tool/README header: [← Back] · centered title · [action] */
.tool-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid hsl(var(--border));
}
.tool-header-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 600;
}

/* 3. Controls -------------------------------------------------------------- */

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  height: 2.5rem;
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.btn:hover { background: hsl(var(--primary) / 0.9); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.btn-secondary:hover { background: hsl(var(--secondary) / 0.8); }

.btn-outline {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  border-color: hsl(var(--input));
}
.btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.btn-destructive,
.btn-danger { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.btn-destructive:hover,
.btn-danger:hover { background: hsl(var(--destructive) / 0.9); }

.btn-link { background: transparent; color: hsl(var(--primary)); text-decoration: underline; height: auto; padding: 0; }

/* Button sizes */
.btn-sm { height: 2.25rem; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn-lg { height: 2.75rem; padding: 0 var(--space-8); }
.btn-icon { width: 2.5rem; height: 2.5rem; padding: 0; }

/* Inputs / textareas / selects */
.input, .textarea, .select,
input[type="text"], input[type="url"], input[type="email"],
input[type="password"], input[type="search"], input[type="number"], textarea, select {
  width: 100%;
  font: inherit;
  font-size: var(--text-sm);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  height: 2.5rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea, .textarea {
  height: auto;
  min-height: 5.5rem;
  padding: var(--space-2) var(--space-3);
  line-height: 1.5;
  resize: vertical;
}
select, .select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}
input:focus, textarea:focus, select:focus,
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
}
input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground)); }
input:disabled, textarea:disabled, select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Field grouping */
.field { display: block; margin-bottom: var(--space-4); }
.field > .label, .field > span { display: block; margin-bottom: var(--space-2); }
.label, .field > span { font-size: var(--text-sm); font-weight: 500; }
.form-description, .help-text { margin-top: var(--space-2); font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.form-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 12rem; }

/* Switch (style a checkbox as a toggle) */
.switch {
  appearance: none;
  position: relative;
  width: 2.5rem;
  height: 1.4rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: hsl(var(--input));
  cursor: pointer;
  transition: background-color 0.15s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 50%; left: 2px;
  width: 1rem; height: 1rem;
  border-radius: 999px;
  background: hsl(var(--background));
  box-shadow: var(--shadow-sm);
  transform: translateY(-50%);
  transition: transform 0.15s;
}
.switch:checked { background: hsl(var(--primary)); }
.switch:checked::after { transform: translate(1.25rem, -50%); }

/* 4. Display --------------------------------------------------------------- */

/* Card */
.card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-padded, .card.card-padded { padding: var(--space-6); }
.card-header { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-1); }
.card-title { font-size: var(--text-lg); font-weight: 600; }
.card-description { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.card-content { padding: var(--space-6); padding-top: 0; }
.card-footer { padding: var(--space-6); padding-top: 0; display: flex; gap: var(--space-2); }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.badge-secondary, .badge.secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.badge-outline, .badge.outline { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.badge-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.badge-success, .badge.published { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); }

/* Table */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { text-align: left; padding: var(--space-3); border-bottom: 1px solid hsl(var(--border)); }
.table th { color: hsl(var(--muted-foreground)); font-weight: 500; }

/* Inline code / keycap */
.kbd, code.kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-sm);
}

/* 5. Nav — Tabs ------------------------------------------------------------ */
.tabs-list {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: hsl(var(--muted));
  border-radius: var(--radius-sm);
}
.tab-trigger {
  border: none;
  background: transparent;
  color: hsl(var(--muted-foreground));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.tab-trigger:hover { color: hsl(var(--foreground)); }
.tab-trigger.active, .tab-trigger[aria-selected="true"] {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-sm);
}

/* 6. Overlay --------------------------------------------------------------- */

/* Dialog */
.dialog-overlay {
  position: fixed; inset: 0;
  background: rgb(0 0 0 / 0.5);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  z-index: 100;
  overflow-y: auto;
}
.dialog-overlay.open { display: flex; }
.dialog {
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 40rem;
}
.dialog-header {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid hsl(var(--border));
}
.dialog-title { font-size: var(--text-lg); font-weight: 600; flex: 1; }
.dialog-body { padding: var(--space-6); }
.dialog-footer {
  display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end;
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid hsl(var(--border));
}
.dialog-close {
  background: none; border: none; cursor: pointer;
  color: hsl(var(--muted-foreground));
  font-size: 1.4rem; line-height: 1; padding: var(--space-1);
  border-radius: var(--radius-sm);
}
.dialog-close:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }

/* Toast */
.toaster {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 22rem;
}
.toast {
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-left: 4px solid hsl(var(--primary));
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  animation: ds-slidein 0.2s ease;
}
.toast.success { border-left-color: hsl(var(--success)); }
.toast.error, .toast.destructive { border-left-color: hsl(var(--destructive)); }
.toast.warning { border-left-color: hsl(var(--warning)); }
@keyframes ds-slidein { from { transform: translateX(1rem); opacity: 0; } to { transform: none; opacity: 1; } }

/* 7. Utilities ------------------------------------------------------------- */
.muted { color: hsl(var(--muted-foreground)); }
.small { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-center { text-align: center; }
.spinner {
  width: 0.9rem; height: 0.9rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: ds-spin 0.7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* 8. Prose — rendered long-form markdown (README pages) -------------------- */
.prose { color: hsl(var(--foreground)); line-height: 1.7; }
.prose > :first-child { margin-top: 0; }
.prose h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-4); letter-spacing: -0.02em; }
.prose h2 {
  font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 1px solid hsl(var(--border));
}
.prose h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.prose h4 { font-size: var(--text-base); margin: var(--space-5) 0 var(--space-2); }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose table, .prose pre { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li { margin: var(--space-1) 0; }
.prose li > ul, .prose li > ol { margin: var(--space-1) 0; }
.prose a { color: hsl(var(--primary)); }
.prose strong { font-weight: 600; }
.prose code {
  font-family: var(--font-mono); font-size: 0.875em;
  background: hsl(var(--muted)); padding: 0.1rem 0.35rem; border-radius: var(--radius-sm);
}
.prose pre {
  background: hsl(var(--muted)); padding: var(--space-4);
  border-radius: var(--radius); overflow-x: auto;
}
.prose pre code { background: none; padding: 0; font-size: var(--text-sm); }
.prose blockquote {
  border-left: 3px solid hsl(var(--border)); padding-left: var(--space-4);
  color: hsl(var(--muted-foreground));
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td { border: 1px solid hsl(var(--border)); padding: var(--space-2) var(--space-3); text-align: left; }
.prose th { background: hsl(var(--muted)); font-weight: 600; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.prose hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: var(--space-6) 0; }