/* =========================================================
   DESIGN SYSTEM V2 — components from the Claude Design UI redesign
   See .claude/plans/we-can-plan-new-playful-volcano.md (Phase 1).
   Additive only: `.ds-*` classes, no existing selectors touched.
   Not yet referenced by any markup — wired up screen-by-screen in
   later phases.
   ========================================================= */

/* ---- Buttons ---- */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  cursor: pointer;
  min-height: 48px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.ds-btn-primary {
  background: linear-gradient(180deg, #a1d6ff, #008df9);
  color: #04121f;
  border: 0;
  box-shadow: 0 10px 26px rgba(35, 108, 168, 0.4);
}

.ds-btn-secondary {
  background: linear-gradient(180deg, rgba(91, 173, 255, 0.1), rgba(91, 173, 255, 0.38));
  border: 1px solid var(--ds-border-strong);
  color: var(--gold-light);
  font-weight: 600;
}

.ds-btn-ghost {
  background: linear-gradient(180deg, rgba(91, 173, 255, 0), rgba(91, 173, 255, 0.32));
  border: 1px solid var(--ds-border-hairline);
  color: var(--text-secondary);
  font-weight: 600;
}

.ds-btn-sm {
  min-height: 44px;
  padding: 11px 16px;
  font-size: 13px;
}

.ds-btn-xs {
  min-height: 0;
  padding: 8px 12px;
  font-size: 11.5px;
}

/* ---- Card container ---- */

.ds-card {
  background: var(--ds-card-bg);
  border: 1px solid var(--ds-border-hairline);
  border-radius: var(--radius-lg);
}

.ds-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ds-border-hairline);
}

.ds-card-heading h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
}

.ds-card-body {
  padding: 18px;
}

/* ---- Gem avatar ----
   Two stacked clip-path layers: outer accent-gradient shape, inner
   dark circle with initials. Reads --player-accent/--player-accent-light
   from the same inline style app/accent-system.js's accentStyle()
   already produces, so no new color plumbing is needed. */

.ds-avatar-gem {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  --ds-avatar-clip: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.ds-avatar-gem.ds-avatar-shield { --ds-avatar-clip: polygon(50% 0, 100% 16%, 100% 62%, 50% 100%, 0 62%, 0 16%); }
.ds-avatar-gem.ds-avatar-circle { --ds-avatar-clip: circle(50% at 50% 50%); }

.ds-avatar-gem-outer,
.ds-avatar-gem-inner {
  position: absolute;
  inset: 0;
  clip-path: var(--ds-avatar-clip);
}

.ds-avatar-gem-outer {
  background: linear-gradient(150deg, var(--player-accent-light), var(--player-accent));
}

.ds-avatar-gem-inner {
  inset: 2.5px;
  background: #0c1728;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  color: var(--player-accent-light);
}

.ds-avatar-gem-sm { width: 26px; height: 26px; }
.ds-avatar-gem-sm .ds-avatar-gem-inner { inset: 2px; font-size: 9.5px; }
.ds-avatar-gem-lg { width: 40px; height: 40px; }
.ds-avatar-gem-lg .ds-avatar-gem-inner { inset: 3px; font-size: 13px; }
.ds-avatar-gem-xl { width: 96px; height: 96px; }
.ds-avatar-gem-xl .ds-avatar-gem-inner { inset: 4px; font-size: 30px; }

/* Neutralize the legacy .avatar box (border/background/box-shadow) when
   it's combined with the gem class, so avatarMarkup() call sites that
   still pass the old "avatar" className get a clean gem instead of a
   circle drawn behind the hexagon. */
.avatar.ds-avatar-gem {
  border: 0;
  background: none;
  box-shadow: none;
}

/* ---- Status pill ---- */

.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: var(--ds-glass);
  color: var(--gold-bright);
}

.ds-pill-finished { background: rgba(142, 224, 173, 0.13); color: var(--finished); }
.ds-pill-danger { background: var(--danger-bg); color: var(--danger); }
.ds-pill-warning { background: var(--warning-bg); color: var(--warning); }
.ds-pill-muted { background: transparent; border: 1px solid var(--ds-border-hairline); color: var(--text-dim); }

.ds-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---- Segmented control ---- */

.ds-segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--ds-surface-0);
  border: 1px solid var(--ds-border-hairline);
  border-radius: var(--radius-sm);
}

.ds-segmented-item {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
}

.ds-segmented-item.is-active {
  background: var(--ds-glass);
  color: var(--gold-bright);
}

/* ---- Settings / detail row ---- */

.ds-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ds-border-hairline);
}

.ds-row:last-child { border-bottom: 0; }

.ds-row-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.ds-row-hint {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}