/* css/components.css — icons, buttons, modal, toast, pill, and the full
   component library (forms, badges, cards, tables, navigation, feedback).
   Header/footer/shell structural layout lives in layout.css. */

/* ===== Icons ===== */
.cs-spin {
  animation: cs-spin 0.8s linear infinite;
}

@keyframes cs-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== Buttons (minimal set needed by header/shell; full variants in Task 7) ===== */
.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.cs-btn--primary {
  background: var(--color-primary);
  color: var(--color-surface);
}

.cs-btn--primary:hover { background: var(--color-primary-hover); }

.cs-btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.cs-btn--ghost:hover {
  background: var(--color-bg);
  color: var(--color-ink);
}

/* ===== Pill ===== */
.cs-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* ===== Buttons: remaining variants, sizes, states, groups ===== */
.cs-btn--secondary { background: var(--color-secondary-dark); color: var(--color-surface); }
.cs-btn--secondary:hover { filter: brightness(1.15); }

.cs-btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.cs-btn--outline:hover { background: var(--color-primary-light); }

.cs-btn--danger { background: var(--color-danger); color: var(--color-surface); }
.cs-btn--danger:hover { background: var(--color-danger-dark); }

.cs-btn--success { background: var(--color-secondary-dark); color: var(--color-surface); }
.cs-btn--success:hover { filter: brightness(1.15); }

.cs-btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--color-primary);
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cs-btn--link:hover { color: var(--color-primary-hover); }

.cs-btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); }
.cs-btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--font-size-base); }

.cs-btn:disabled,
.cs-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.cs-btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.cs-btn--loading .cs-btn__spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-surface);
}
.cs-btn--outline.cs-btn--loading .cs-btn__spinner,
.cs-btn--ghost.cs-btn--loading .cs-btn__spinner,
.cs-btn--link.cs-btn--loading .cs-btn__spinner {
  color: var(--color-primary);
}

.cs-btn-group { display: inline-flex; }
.cs-btn-group .cs-btn {
  border-radius: 0;
  margin-left: -1px;
}
.cs-btn-group .cs-btn:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
  margin-left: 0;
}
.cs-btn-group .cs-btn:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}
.cs-btn-group .cs-btn:hover,
.cs-btn-group .cs-btn:focus-visible {
  position: relative;
  z-index: 1;
}

/* ===== Form elements ===== */
.cs-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.cs-field__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-ink);
}
.cs-field__hint { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.cs-field__error {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.cs-field--success .cs-field__hint { color: var(--color-secondary-dark); }

.cs-input,
.cs-textarea,
.cs-select {
  width: 100%;
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cs-input::placeholder,
.cs-textarea::placeholder { color: var(--color-text-muted); }

.cs-input:focus,
.cs-textarea:focus,
.cs-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.cs-textarea { min-height: 96px; resize: vertical; }

.cs-select-wrap { position: relative; }
.cs-select { appearance: none; padding-right: var(--space-8); cursor: pointer; }
.cs-select-wrap svg {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
}

.cs-input--error, .cs-textarea--error, .cs-select--error { border-color: var(--color-danger); }
.cs-input--error:focus, .cs-textarea--error:focus, .cs-select--error:focus {
  box-shadow: 0 0 0 3px var(--color-danger-light);
}
.cs-input--success, .cs-textarea--success, .cs-select--success { border-color: var(--color-secondary); }
.cs-input--success:focus, .cs-textarea--success:focus {
  box-shadow: 0 0 0 3px var(--color-secondary-light);
}

.cs-input:disabled, .cs-textarea:disabled, .cs-select:disabled {
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: not-allowed;
  border-color: var(--color-border);
}

.cs-checkbox, .cs-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
}
.cs-checkbox input, .cs-radio input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.cs-checkbox--disabled, .cs-radio--disabled,
.cs-checkbox:has(input:disabled), .cs-radio:has(input:disabled) {
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.cs-checkbox input:disabled, .cs-radio input:disabled { cursor: not-allowed; }

.cs-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.cs-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.cs-switch__track {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.cs-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}
.cs-switch input:checked + .cs-switch__track { background: var(--color-primary); }
.cs-switch input:checked + .cs-switch__track .cs-switch__thumb { transform: translateX(16px); }
.cs-switch input:focus-visible + .cs-switch__track { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cs-switch input:disabled + .cs-switch__track { opacity: 0.5; cursor: not-allowed; }

.cs-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.cs-dropzone svg { color: var(--color-text-muted); }
.cs-dropzone:hover, .cs-dropzone--active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
/* The file input is stretched invisibly over the whole zone: a click opens
   the picker and a dragged file dropped anywhere on the zone lands on the
   input natively — no JS needed. */
.cs-dropzone { position: relative; }
.cs-dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.cs-dropzone:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Long file names are cut with an ellipsis instead of stretching the zone. */
.cs-dropzone__title {
  max-width: 100%;
  font-weight: 600;
  color: var(--color-ink);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cs-dropzone__hint { font-size: var(--font-size-xs); }
.cs-dropzone--error { border-color: var(--color-danger); background: var(--color-danger-light); }
.cs-dropzone--success { border-color: var(--color-secondary); background: var(--color-secondary-light); }
.cs-dropzone--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ===== Badges ===== */
.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}
.cs-badge--success { background: var(--color-secondary-light); color: var(--color-secondary-dark); }
.cs-badge--warning { background: var(--color-warning-light); color: var(--color-warning-dark); }
.cs-badge--danger { background: var(--color-danger-light); color: var(--color-danger-dark); }
.cs-badge--pending { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.cs-badge--neutral { background: var(--color-primary-light); color: var(--color-primary-dark); }
.cs-badge--count {
  background: var(--color-ink);
  color: var(--color-surface);
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  justify-content: center;
}

/* ===== Alerts ===== */
.cs-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
}
.cs-alert__icon { flex-shrink: 0; }
.cs-alert__body { flex: 1; }
.cs-alert__body p { margin: 0; }
.cs-alert__title {
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-1);
  font-family: var(--font-family-heading);
}
.cs-alert__close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
}
.cs-alert__close:hover { opacity: 1; }

.cs-alert--info { background: var(--color-primary-light); color: var(--color-primary-dark); }
.cs-alert--success { background: var(--color-secondary-light); color: var(--color-secondary-dark); }
.cs-alert--warning { background: var(--color-warning-light); color: var(--color-warning-dark); }
.cs-alert--danger { background: var(--color-danger-light); color: var(--color-danger-dark); }
.cs-alert--info .cs-alert__title,
.cs-alert--success .cs-alert__title,
.cs-alert--warning .cs-alert__title,
.cs-alert--danger .cs-alert__title { color: inherit; }

/* ===== Cards ===== */
.cs-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.cs-card__title { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.cs-card__body { color: var(--color-text); font-size: var(--font-size-sm); margin: 0; }

.cs-card--stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 180px; }
.cs-card--stat .cs-card__value {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-ink);
}
.cs-card--stat .cs-card__label { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.cs-card--feature { max-width: 280px; }
.cs-card--feature .cs-card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.cs-card--pricing { display: flex; flex-direction: column; gap: var(--space-4); position: relative; max-width: 280px; }
.cs-card--pricing > .cs-pill { align-self: flex-start; }
.cs-card--pricing--popular { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.cs-card--pricing .cs-card__price {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--color-ink);
}
.cs-card--pricing .cs-card__price-period { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 400; }
.cs-card--pricing ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cs-card--pricing li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text); }
.cs-card--pricing li svg { color: var(--color-secondary); flex-shrink: 0; }

.cs-card--review { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; max-width: 320px; }
.cs-card--review .cs-card__quote { color: var(--color-text); font-size: var(--font-size-sm); margin: 0; }
.cs-card--review .cs-card__author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.cs-card--review .cs-card__author-name { font-weight: 600; color: var(--color-ink); font-size: var(--font-size-sm); }
.cs-card--review .cs-card__author-role { color: var(--color-text-muted); font-size: var(--font-size-xs); }

.cs-card--subscription { display: flex; flex-direction: column; gap: var(--space-4); border-color: var(--color-primary-light); max-width: 320px; }
.cs-card--subscription .cs-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cs-card__header .cs-card__title { margin: 0; }
.cs-card--subscription .cs-card__meter { height: 8px; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.cs-card--subscription .cs-card__meter-fill { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; }
.cs-card__meter-caption { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ===== Tables ===== */
.cs-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.cs-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.cs-table th, .cs-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.cs-table th { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 600; background: var(--color-bg); }
.cs-table tr:last-child td { border-bottom: none; }
.cs-table--striped tbody tr:nth-child(even) { background: var(--color-bg); }
.cs-table tbody tr:hover { background: var(--color-primary-light); }

@media (max-width: 767px) {
  .cs-table--responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .cs-table--responsive, .cs-table--responsive tbody, .cs-table--responsive tr, .cs-table--responsive td { display: block; width: 100%; }
  .cs-table--responsive tr { border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; }
  .cs-table--responsive tr:last-child { border-bottom: none; }
  .cs-table--responsive td { border: none; padding: var(--space-1) var(--space-4); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
  .cs-table--responsive td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
  }
}

/* ===== Pagination ===== */
.cs-pagination { display: flex; align-items: center; gap: var(--space-1); list-style: none; padding: 0; margin: 0; font-size: var(--font-size-sm); flex-wrap: wrap; }
.cs-pagination a, .cs-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
.cs-pagination a:hover, .cs-pagination button:hover { background: var(--color-bg); }
.cs-pagination [aria-current="page"] { background: var(--color-primary); color: var(--color-surface); font-weight: 600; }
.cs-pagination [aria-current="page"]:hover { background: var(--color-primary); }
.cs-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== Progress ===== */
.cs-progress { height: 8px; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.cs-progress__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--color-primary);
  border-radius: inherit;
  transform: scaleX(var(--cs-progress-value, 1));
  transform-origin: left;
  transition: transform var(--transition-slow);
}
.cs-progress--success .cs-progress__fill { background: var(--color-secondary); }
.cs-progress--warning .cs-progress__fill { background: var(--color-warning); }
.cs-progress--danger .cs-progress__fill { background: var(--color-danger); }
.cs-progress__caption { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ===== Skeleton ===== */
/* Shimmer is automatically disabled under prefers-reduced-motion by the
   global rule in base.css (forces all animation-duration to 0.01ms). */
.cs-skeleton { display: block; position: relative; overflow: hidden; background: var(--color-border); border-radius: var(--radius-sm); }
.cs-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--color-bg), transparent);
  animation: cs-shimmer 1.5s infinite;
}
@keyframes cs-shimmer { 100% { transform: translateX(100%); } }
.cs-skeleton--text { height: 1em; width: 100%; margin-bottom: var(--space-2); }
.cs-skeleton--text-short { width: 80%; }
.cs-skeleton--title { height: var(--font-size-xl); width: 60%; }
.cs-skeleton--avatar { width: 48px; height: 48px; border-radius: var(--radius-full); }
.cs-skeleton--block { height: 120px; }
.cs-skeleton-group { width: 100%; max-width: 320px; display: flex; gap: var(--space-3); align-items: flex-start; }
.cs-skeleton-group__col { flex: 1; }

/* ===== Inline loading (icon + label, e.g. a spinner with status text) ===== */
.cs-inline-loading { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }

/* ===== Empty state ===== */
.cs-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-12) var(--space-4);
  color: var(--color-text-muted);
}
.cs-empty-state__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  color: var(--color-text-muted);
}
.cs-empty-state__title {
  font-size: var(--font-size-lg);
  color: var(--color-ink);
  font-weight: 700;
  font-family: var(--font-family-heading);
}
.cs-empty-state__body { max-width: 40ch; font-size: var(--font-size-sm); margin: 0; }

/* ===== Dropdown ===== */
.cs-dropdown { position: relative; display: inline-block; }
.cs-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.cs-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
.cs-dropdown__item:hover, .cs-dropdown__item:focus-visible { background: var(--color-bg); color: var(--color-ink); }
.cs-dropdown__item--danger { color: var(--color-danger); }
.cs-dropdown__divider { height: 1px; background: var(--color-border); margin: var(--space-1) 0; border: none; }

/* ===== Tooltip ===== */
.cs-tooltip { position: relative; display: inline-flex; }
.cs-tooltip__bubble {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-ink);
  color: var(--color-surface);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-dropdown);
}
.cs-tooltip:hover .cs-tooltip__bubble,
.cs-tooltip:focus-within .cs-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Accordion ===== */
.cs-accordion { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.cs-accordion__item + .cs-accordion__item { border-top: 1px solid var(--color-border); }
.cs-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  font: inherit;
  font-weight: 600;
  color: var(--color-ink);
}
.cs-accordion__trigger:hover { background: var(--color-bg); }
.cs-accordion__trigger svg { transition: transform var(--transition-fast); flex-shrink: 0; color: var(--color-text-muted); }
.cs-accordion__item[open] .cs-accordion__trigger svg { transform: rotate(180deg); }
.cs-accordion__panel-content {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

/* ===== Modal (upload/checkout panels) — pure CSS, no JS =====
   Opened via a plain <a href="#the-id"> and closed via <a href="#">;
   :target does the showing/hiding. Trade-offs versus a JS-driven modal:
   no Escape-to-close, no focus trap, no focus return to the trigger on
   close — none of those are achievable without JS. The backdrop link
   (behind the dialog, z-index 0) gives click-outside-to-close; the body
   scroll lock below uses :has(), not JS. */
.cs-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(15, 23, 42, 0.5);
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.cs-modal-overlay:target { display: flex; }
.cs-modal-overlay__backdrop { position: absolute; inset: 0; z-index: 0; }

.cs-modal {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  padding: var(--space-6);
}
@media (min-width: 640px) {
  .cs-modal { max-width: 520px; }
}

.cs-modal__title { margin-top: 0; padding-right: var(--space-6); }
.cs-modal__actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-6); }

.cs-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.cs-modal__close:hover { background: var(--color-bg); color: var(--color-ink); }

body:has(.cs-modal-overlay:target) { overflow: hidden; }

/* ===== Avatar ===== */
.cs-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-family: var(--font-family-heading);
  overflow: hidden;
  flex-shrink: 0;
}
.cs-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cs-avatar--sm { width: 32px; height: 32px; font-size: var(--font-size-xs); }
.cs-avatar--md { width: 44px; height: 44px; font-size: var(--font-size-sm); }
.cs-avatar--lg { width: 64px; height: 64px; font-size: var(--font-size-lg); }
.cs-avatar-group { display: flex; }
.cs-avatar-group .cs-avatar { margin-left: -10px; border: 2px solid var(--color-surface); }
.cs-avatar-group .cs-avatar:first-child { margin-left: 0; }

/* ===== Star rating ===== */
.cs-star-rating { display: inline-flex; align-items: center; gap: var(--space-1); }
.cs-star-rating svg { color: var(--color-border); }
.cs-star-rating .is-filled svg { color: var(--color-warning); }
.cs-star-rating__value { margin-left: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ===== Stepper ===== */
.cs-stepper { display: flex; align-items: flex-start; width: 100%; list-style: none; padding: 0; margin: 0; }
.cs-stepper__step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.cs-stepper__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;
  left: calc(50% + 14px);
  width: calc(100% - 28px);
  height: 2px;
  background: var(--color-border);
}
.cs-stepper__step--done:not(:last-child)::after { background: var(--color-secondary); }
.cs-stepper__circle {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 700;
  background: var(--color-border);
  color: var(--color-text);
  flex-shrink: 0;
}
.cs-stepper__step--done .cs-stepper__circle { background: var(--color-secondary); color: var(--color-surface); }
.cs-stepper__step--active .cs-stepper__circle { background: var(--color-primary); color: var(--color-surface); }
.cs-stepper__label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.cs-stepper__step--active .cs-stepper__label,
.cs-stepper__step--done .cs-stepper__label { color: var(--color-ink); font-weight: 600; }

/* ===== Breadcrumbs ===== */
.cs-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); list-style: none; padding: 0; margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.cs-breadcrumbs li { display: flex; align-items: center; gap: var(--space-1); }
.cs-breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.cs-breadcrumbs a:hover { color: var(--color-primary); }
.cs-breadcrumbs li:last-child { color: var(--color-ink); font-weight: 600; }
.cs-breadcrumbs svg { color: var(--color-border); flex-shrink: 0; }

/* ===== Tabs ===== */
.cs-tabs { width: 100%; }
.cs-tabs__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-tabs__list { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--color-border); list-style: none; padding: 0; margin: 0; overflow-x: auto; }
.cs-tabs__tab {
  padding: var(--space-3) var(--space-1);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.cs-tabs__tab:hover { color: var(--color-ink); }
#cs-tab-overview:focus-visible ~ .cs-tabs__list label[for="cs-tab-overview"],
#cs-tab-similarity:focus-visible ~ .cs-tabs__list label[for="cs-tab-similarity"],
#cs-tab-ai:focus-visible ~ .cs-tabs__list label[for="cs-tab-ai"],
#cs-tab-sources:focus-visible ~ .cs-tabs__list label[for="cs-tab-sources"] { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cs-tabs__panel { display: none; padding: var(--space-4) 0; }
#cs-tab-overview:checked ~ .cs-tabs__list label[for="cs-tab-overview"],
#cs-tab-similarity:checked ~ .cs-tabs__list label[for="cs-tab-similarity"],
#cs-tab-ai:checked ~ .cs-tabs__list label[for="cs-tab-ai"],
#cs-tab-sources:checked ~ .cs-tabs__list label[for="cs-tab-sources"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
#cs-tab-overview:checked ~ #panel-overview,
#cs-tab-similarity:checked ~ #panel-similarity,
#cs-tab-ai:checked ~ #panel-ai,
#cs-tab-sources:checked ~ #panel-sources { display: block; }

/* ===== Style guide page shell (assets.html) ===== */
.cs-guide__intro { max-width: 68ch; padding-top: var(--space-8); }
.cs-guide__wrap { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-8) 0 var(--space-24); }

.cs-guide-nav {
  display: flex;
  flex-direction: row;
  gap: var(--space-1);
  overflow-x: auto;
  padding: var(--space-2) 0;
  position: sticky;
  top: 64px;
  z-index: var(--z-header);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.cs-guide-nav a {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
  border-bottom: 2px solid transparent;
}
.cs-guide-nav a:hover { color: var(--color-ink); background: var(--color-surface); }
.cs-guide-nav a.is-active { color: var(--color-primary); font-weight: 600; border-bottom-color: var(--color-primary); }

.cs-guide__section { padding-top: var(--space-8); scroll-margin-top: 128px; border-top: 1px solid var(--color-border); }
.cs-guide__section:first-of-type { border-top: none; padding-top: 0; }
.cs-guide__section-title { font-size: var(--font-size-2xl); margin-bottom: var(--space-2); }
.cs-guide__section-desc { color: var(--color-text-muted); max-width: 60ch; margin-bottom: var(--space-6); }
.cs-guide__group { margin-bottom: var(--space-8); }
.cs-guide__group:last-child { margin-bottom: 0; }
.cs-guide__group-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-3); }

.cs-example-block { margin-bottom: var(--space-4); }
.cs-example-block__toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.cs-example {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Generic example-wrapper utilities: a full-width flex item (.cs-example is
   a flex container, so a plain block child doesn't span it without help),
   optionally capped at one of a few demo widths. */
.cs-example__col { width: 100%; }
.cs-example__col--280 { max-width: 280px; }
.cs-example__col--320 { max-width: 320px; }
.cs-example__col--360 { max-width: 360px; }
.cs-example__row-label { width: 100%; font-size: var(--font-size-sm); color: var(--color-text-muted); }

.cs-guide__font-sample--heading { font-family: var(--font-family-heading); font-size: var(--font-size-2xl); font-weight: 700; margin: 0 0 var(--space-1); }
.cs-guide__font-sample--body { font-family: var(--font-family-body); font-size: var(--font-size-base); margin: 0; }

.cs-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}
.cs-copy-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.cs-copy-btn--copied { color: var(--color-secondary-dark); border-color: var(--color-secondary); }

.cs-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); }
.cs-swatch {
  display: block;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  padding: 0;
}
.cs-swatch__fill { display: block; height: 64px; }
.cs-swatch--copied { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.cs-swatch__meta { padding: var(--space-3); }
.cs-swatch__name { font-weight: 600; font-size: var(--font-size-sm); color: var(--color-ink); display: block; }
.cs-swatch__var { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: monospace; display: block; margin-top: var(--space-1); }

.cs-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-4); }
.cs-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: center;
}
.cs-icon-tile svg { color: var(--color-ink); }
.cs-icon-tile span { font-size: var(--font-size-xs); color: var(--color-text-muted); word-break: break-word; font-family: monospace; }

.cs-tile-row { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.cs-scale-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.cs-scale-row__label { width: 56px; flex-shrink: 0; font-family: monospace; font-size: var(--font-size-xs); }
.cs-scale-row__bar { display: block; background: var(--color-primary); border-radius: var(--radius-sm); height: 16px; }

.cs-shape-tile {
  width: 96px;
  height: 96px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}
.cs-shape-tile--radius-sm { border-radius: var(--radius-sm); }
.cs-shape-tile--radius-md { border-radius: var(--radius-md); }
.cs-shape-tile--radius-full { border-radius: var(--radius-full); }
.cs-shape-tile--shadow-sm { box-shadow: var(--shadow-sm); }
.cs-shape-tile--shadow-md { box-shadow: var(--shadow-md); }
.cs-shape-tile--shadow-lg { box-shadow: var(--shadow-lg); }

.cs-type-sample { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.cs-type-sample:last-child { border-bottom: none; }
.cs-type-sample__label { width: 64px; flex-shrink: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: monospace; }
.cs-type-sample__text { margin: 0; }

@media (min-width: 1024px) {
  .cs-guide__wrap { flex-direction: row; align-items: flex-start; }
  .cs-guide-nav {
    flex-direction: column;
    overflow-x: visible;
    width: 220px;
    flex-shrink: 0;
    top: calc(64px + var(--space-6));
    max-height: calc(100vh - 64px - var(--space-8));
    overflow-y: auto;
    background: transparent;
    border-bottom: none;
    padding: 0;
  }
  .cs-guide-nav a {
    border-bottom: none;
    border-left: 2px solid transparent;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
  }
  .cs-guide-nav a.is-active { border-left-color: var(--color-primary); border-bottom-color: transparent; background: var(--color-primary-light); }
  .cs-guide__main { flex: 1; min-width: 0; }
}

/* ---- Toast (transient feedback; created by cs.toast in js/common.js) ---- */
.cs-toast-region {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(24rem, calc(100vw - var(--space-8)));
}
.cs-toast {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
}
.cs-toast--success { background: var(--color-secondary-light); color: var(--color-secondary-dark); }
.cs-toast--warning { background: var(--color-warning-light); color: var(--color-warning-dark); }
.cs-toast--danger { background: var(--color-danger-light); color: var(--color-danger-dark); }
.cs-toast--info { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* ---- Copy field (read-only value + copy button) ---- */
.cs-copy-field { display: flex; gap: var(--space-2); align-items: center; }
.cs-copy-field__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
}

/* ---- Modal, compact variant (confirm dialogs) ---- */
.cs-modal--sm { max-width: 26rem; }
.cs-modal__text { margin: 0; color: var(--color-text-muted); }
.cs-modal__error { margin: var(--space-3) 0 0; color: var(--color-danger-dark); font-size: var(--font-size-sm); }

/* ---- Site alert banner (admin-managed; light and dark styles come from the Alert model) ---- */
.cs-alert--light { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.cs-alert--dark { background: var(--color-ink); color: var(--color-surface); }
.cs-shell__alerts { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); }