/* RS Design System v2 — Component kit. Consumes tokens from rs.css (load rs.css first). */
/* Hand-authored layer/states; all values reference design tokens (no hard-coded colors). */

/* ---- Button ---- */
.rs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-family-sans);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);
  height:var(--button-height);padding:0 var(--button-px);border-radius:var(--button-radius);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background var(--duration-fast) var(--easing-standard),
             border-color var(--duration-fast) var(--easing-standard),
             transform var(--duration-instant) var(--easing-standard);
}
.rs-btn:active{transform:scale(.97)}
.rs-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in oklab,var(--primary-default) 40%,transparent)}
.rs-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.rs-btn--sm{height:var(--button-height-sm);font-size:var(--font-size-sm)}
.rs-btn--lg{height:var(--button-height-lg)}
.rs-btn--primary{background:var(--button-primary-bg);color:var(--button-primary-fg)}
.rs-btn--primary:hover:not(:disabled){background:var(--button-primary-bg-hover)}
.rs-btn--secondary{background:transparent;color:var(--button-secondary-fg);border-color:var(--button-secondary-border)}
.rs-btn--secondary:hover:not(:disabled){background:var(--bg-hover)}
.rs-btn--ghost{background:transparent;color:var(--button-ghost-fg)}
.rs-btn--ghost:hover:not(:disabled){background:var(--primary-subtle)}
.rs-btn--danger{background:var(--status-danger-fg);color:#fff}

/* ---- Input / Select ---- */
.rs-field{display:flex;flex-direction:column;gap:var(--space-1)}
.rs-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary)}
.rs-input,.rs-select{
  height:var(--input-height);padding:0 var(--input-px);border-radius:var(--input-radius);
  background:var(--input-bg);color:var(--text-body);border:1px solid var(--input-border);
  font-family:var(--font-family-sans);font-size:var(--font-size-base);
  transition:border-color var(--duration-fast) var(--easing-standard),box-shadow var(--duration-fast) var(--easing-standard);
}
.rs-input::placeholder{color:var(--input-placeholder)}
.rs-input:focus,.rs-select:focus{outline:none;border-color:var(--input-border-focus);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--primary-default) 28%,transparent)}
.rs-hint{font-size:var(--font-size-sm);color:var(--text-muted)}
.rs-hint--error{color:var(--status-danger-fg)}

/* ---- Card ---- */
.rs-card{
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);
  padding:var(--card-pad);
  box-shadow:0 1px 2px color-mix(in oklab,var(--color-gray-1000) 6%,transparent),
             0 6px 16px color-mix(in oklab,var(--color-gray-1000) 5%,transparent);
}

/* ---- Chip / Status badge (色 + ラベル + ドット = 色覚配慮) ---- */
.rs-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-sm);
  font-weight:var(--font-weight-medium);padding:3px var(--space-3);border-radius:var(--chip-radius);line-height:1.4}
.rs-chip::before{content:"";width:7px;height:7px;border-radius:var(--radius-full);background:currentColor;flex:none}
.rs-chip--success{color:var(--status-success-fg);background:var(--status-success-bg)}
.rs-chip--warning{color:var(--status-warning-fg);background:var(--status-warning-bg)}
.rs-chip--danger{color:var(--status-danger-fg);background:var(--status-danger-bg)}
.rs-chip--info{color:var(--status-info-fg);background:var(--status-info-bg)}

/* ---- Table (44px rows, numbers right + tabular, no zebra) ---- */
.rs-table{width:100%;border-collapse:collapse;font-size:var(--font-size-base);color:var(--text-body)}
.rs-table th,.rs-table td{height:var(--table-row-height);padding:0 var(--space-3);text-align:left;
  border-bottom:1px solid var(--table-border)}
.rs-table th{font-size:var(--font-size-sm);color:var(--table-header-fg);font-weight:var(--font-weight-semibold)}
.rs-table td.num,.rs-table th.num{text-align:right;font-family:var(--font-family-mono);font-variant-numeric:tabular-nums}
.rs-table tbody tr:hover{background:var(--bg-hover)}

/* ---- Sidebar + the teal rule ---- */
.rs-sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);border-right:1px solid var(--border-subtle);
  padding:var(--space-3);display:flex;flex-direction:column;gap:2px}
.rs-sidebar__item{display:flex;align-items:center;gap:var(--space-3);position:relative;
  height:36px;padding:0 var(--space-3);border-radius:var(--radius-sm);
  color:var(--sidebar-item-fg);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);
  cursor:pointer;transition:background var(--duration-fast) var(--easing-standard)}
.rs-sidebar__item:hover{background:var(--bg-hover)}
.rs-sidebar__item[aria-current="page"]{color:var(--sidebar-item-active-fg);background:var(--sidebar-item-active-bg);font-weight:var(--font-weight-semibold)}
.rs-sidebar__item[aria-current="page"]::before{content:"";position:absolute;left:0;top:7px;bottom:7px;
  width:3px;border-radius:var(--radius-full);background:var(--sidebar-rule)}

/* ---- Tabs ---- */
.rs-tabs{display:flex;gap:var(--space-4);border-bottom:1px solid var(--border-subtle)}
.rs-tab{padding:var(--space-3) 0;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);
  color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--duration-fast) var(--easing-standard)}
.rs-tab[aria-selected="true"]{color:var(--primary-default);border-bottom-color:var(--primary-default);font-weight:var(--font-weight-semibold)}

/* ---- KPI ---- */
.rs-kpi{display:flex;flex-direction:column;gap:4px}
.rs-kpi__v{font-family:var(--font-family-mono);font-variant-numeric:tabular-nums;
  font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--text-strong);letter-spacing:-.01em}
.rs-kpi__delta{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--status-success-fg)}

/* ---- Skeleton (loading・spinner 禁止) ---- */
.rs-skeleton{background:linear-gradient(90deg,var(--bg-sunken),var(--bg-hover),var(--bg-sunken));
  background-size:200% 100%;border-radius:var(--radius-sm);animation:rs-shimmer 1.4s var(--easing-standard) infinite}
@keyframes rs-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---- reduced motion (前庭障害配慮・WCAG) ---- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}