/* National OS Japan — UI Primitives
 * Skeleton / Error / Empty / Toast / Spinner の共通 component スタイル。
 * tokens.css の var を参照。 dark mode は data-theme="dark" 経由で自動追従。
 */

/* === Skeleton === */
.skel {
  display: block;
  background: linear-gradient(
    90deg,
    var(--bg-alt) 0%,
    var(--border-light) 50%,
    var(--bg-alt) 100%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
.skel + .skel { margin-top: var(--sp-sm); }

.skel-block { width: 100%; height: 80px; }
.skel-line  { width: 100%; height: 14px; border-radius: var(--radius-sm); }
.skel-line.skel-line-short { width: 60%; }
.skel-line.skel-line-tiny  { width: 30%; }
.skel-circle {
  width: 40px; height: 40px; border-radius: 50%;
}
.skel-card {
  width: 100%; min-height: 120px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  padding: var(--sp-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.skel-card .skel { background: linear-gradient(90deg, var(--bg-alt) 0%, var(--border-light) 50%, var(--bg-alt) 100%); }

@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Error State === */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xl);
  gap: var(--sp-md);
  background: var(--bg-card);
  border: 1px solid var(--status-error);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-align: center;
}
.error-state .error-icon {
  font-size: 32px;
  line-height: 1;
  color: var(--status-error);
}
.error-state .error-msg {
  margin: 0;
  color: var(--text-primary);
  font-weight: 500;
}
.error-state .error-detail {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.error-state .error-retry {
  appearance: none;
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-md);
  font: 500 var(--fs-sm)/1 var(--font-sans);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.error-state .error-retry:hover { background: var(--accent-hover); }
.error-state .error-retry:active { transform: translateY(1px); }

/* === Empty State === */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2xl) var(--sp-md);
  gap: var(--sp-sm);
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-align: center;
}
.empty-state .empty-icon {
  font-size: 36px;
  line-height: 1;
  opacity: 0.6;
}
.empty-state .empty-msg {
  margin: 0;
  color: var(--text-secondary);
}
.empty-state .empty-detail {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  max-width: 36em;
}
.empty-state .empty-action {
  appearance: none;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--radius-md);
  font: 500 var(--fs-sm)/1 var(--font-sans);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.empty-state .empty-action:hover { background: var(--accent-light); }

/* === Toast === */
.nos-toast-host {
  position: fixed;
  bottom: var(--sp-lg);
  right: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  z-index: var(--z-toast);
  pointer-events: none;
  max-width: calc(100vw - var(--sp-2xl));
}
.nos-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-left: 4px solid var(--status-info);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font: 400 var(--fs-sm)/1.5 var(--font-sans);
  min-width: 240px;
  max-width: 420px;
  animation: toast-in var(--dur-base) var(--ease-out) both;
}
.nos-toast.is-leaving { animation: toast-out var(--dur-base) var(--ease-in-out) both; }
.nos-toast .nos-toast-icon { flex: 0 0 auto; line-height: 1.4; }
.nos-toast .nos-toast-msg { flex: 1 1 auto; }
.nos-toast .nos-toast-close {
  flex: 0 0 auto;
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.nos-toast .nos-toast-close:hover { color: var(--text-primary); background: var(--bg-alt); }

.nos-toast.nos-toast-success { border-left-color: var(--status-success); }
.nos-toast.nos-toast-warning { border-left-color: var(--status-warning); }
.nos-toast.nos-toast-error   { border-left-color: var(--status-error); }
.nos-toast.nos-toast-info    { border-left-color: var(--status-info); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* === Spinner === */
.nos-spinner {
  display: inline-block;
  vertical-align: middle;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.nos-spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.nos-spinner-md { width: 22px; height: 22px; border-width: 2px; }
.nos-spinner-lg { width: 36px; height: 36px; border-width: 3px; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === Skip link (a11y) === */
.skip-link {
  position: absolute;
  left: var(--sp-sm);
  top: -40px;
  background: var(--accent);
  color: var(--text-on-accent);
  padding: var(--sp-xs) var(--sp-md);
  text-decoration: none;
  border-radius: var(--radius-sm);
  z-index: var(--z-toast);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-sm); outline: var(--focus-outline); }