/* Dashboard + Settings overlays. Tokens only — no hard-coded values. */

.overlay__body { padding: var(--sp-6); max-width: 1100px; margin: 0 auto; width: 100%; }

.stack { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---------------------------------------------------------------- Dashboard */

.dash { display: flex; flex-direction: column; gap: var(--sp-8); }
.dash-loading, .dash-empty { color: var(--c-ink-3); font-size: var(--fs-normal); padding: var(--sp-4) 0; }
.dash-error {
  color: var(--c-splash-red);
  background: var(--c-error-soft);
  border: var(--bw) solid var(--c-error-line);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-normal);
}

.dash-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.dash-section__head { display: flex; flex-direction: column; gap: 2px; }
.dash-eyebrow {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-3);
  font-weight: var(--fw-semibold);
}
.dash-section__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
}

.dash-card {
  border: var(--border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.dash-card--balance.is-low { border-color: var(--c-error-line); background: var(--c-error-soft); }
.dash-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.dash-card__head h4 { font-size: var(--fs-normal); font-weight: var(--fw-semibold); }

.dash-balance__value { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.dash-balance__value span { font-size: var(--fs-normal); font-weight: var(--fw-normal); color: var(--c-ink-3); }
.dash-warn { font-size: var(--fs-xs); color: var(--c-splash-red); }

.dash-stat {
  border: var(--border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.dash-stat__value { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.dash-stat__label { font-size: var(--fs-xs); color: var(--c-ink-3); }

.dash-chart {
  border: var(--border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--sp-4);
  height: 260px;
}
.dash-chart canvas { width: 100% !important; height: 100% !important; }

.dash-activity { display: flex; flex-direction: column; }
.dash-activity__item {
  padding: var(--sp-3) 0;
  border-bottom: var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-activity__item:last-child { border-bottom: none; }
.dash-activity__item.is-error { border-left: 2px solid var(--c-splash-red); padding-left: var(--sp-3); }
.dash-activity__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.dash-activity__summary { font-size: var(--fs-normal); font-weight: var(--fw-medium); }
.dash-activity__meta { font-size: var(--fs-xs); color: var(--c-ink-3); }
.dash-activity__type { color: var(--c-ink-2); }

/* Dashboard modals (add funds / auto-reload) */
.dash-modal__backdrop {
  position: fixed;
  inset: 0;
  background: var(--c-scrim);
  display: grid;
  place-items: center;
  z-index: var(--z-menu);
}
.dash-modal {
  width: 460px;
  max-width: calc(100vw - var(--sp-8));
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.dash-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border);
}
.dash-modal__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.dash-modal__body { padding: var(--sp-4); }
.dash-modal__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }

/* Shared app modals */
.app-modal__backdrop {
  position: fixed;
  inset: 0;
  background: var(--c-scrim);
  display: grid;
  place-items: center;
  z-index: var(--z-menu);
  padding: var(--sp-4);
}
.app-modal {
  width: 100%;
  max-width: 800px;
  max-height: calc(100vh - var(--sp-8));
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border);
}
.app-modal__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.app-modal__body {
  padding: var(--sp-4);
  overflow: auto;
}
.app-modal__message { color: var(--c-ink-2); font-size: var(--fs-normal); line-height: var(--lh-base); }
.app-modal__field { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-normal); color: var(--c-ink-2); }
.app-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: var(--border);
}
.app-modal__content { display: flex; flex-direction: column; gap: var(--sp-3); }
.app-modal--wide { max-width: 960px; }
.app-modal--x-wide { max-width: 1100px; }

/* Proposal review modal body */
.proposal-modal__body { padding: 0; }
.proposal-modal__content { display: flex; flex-direction: column; gap: 0; padding: 0; }
.proposal-modal__content .proposal-overlay__list { padding: var(--sp-4); }
.proposal-modal__content .proposals-stack { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.record-detail { display: flex; flex-direction: column; gap: var(--sp-3); }
.record-detail__meta { font-size: var(--fs-xs); color: var(--c-ink-3); }
.record-detail__rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.record-detail__row { border: var(--border); border-radius: var(--r-sm); padding: var(--sp-2); background: var(--c-surface-2); }
.record-detail__label { font-size: var(--fs-2xs); color: var(--c-ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--sp-1); }
.record-detail__value { white-space: pre-wrap; word-break: break-word; font-size: var(--fs-normal); }

.dash-pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); }
.dash-pack {
  border: var(--border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  text-align: left;
  transition: border-color var(--t-base), background var(--t-base);
}
.dash-pack:hover { border-color: var(--c-line-strong); background: var(--c-surface-hover); }
.dash-pack__credits { font-weight: var(--fw-semibold); font-size: var(--fs-normal); }
.dash-pack__price { color: var(--c-ink-3); font-size: var(--fs-xs); }

.dash-field { display: flex; flex-direction: column; gap: var(--sp-1); }

/* ---------------------------------------------------------------- Settings */


.settings-host {
  display: flex;
  justify-content: center;
}

.settings { display: flex; flex-direction: column; gap: var(--sp-8); max-width: 640px; }
.set-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.set-eyebrow {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-3);
  font-weight: var(--fw-semibold);
}

.set-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.set-field__label { font-size: var(--fs-xs); color: var(--c-ink-2); font-weight: var(--fw-medium); }
.set-field__help { font-size: var(--fs-xs); color: var(--c-ink-3); }
.set-field .input { width: 100%; }
.set-textarea { min-height: 120px; padding: var(--sp-2) var(--sp-3); line-height: var(--lh-base); resize: vertical; }

.set-url {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
  background: var(--c-surface-2);
  border: var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  display: inline-block;
  word-break: break-all;
}

.set-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); }

.set-avatar-row { display: flex; align-items: center; gap: var(--sp-4); }
.set-avatar { border-radius: var(--r-pill); object-fit: cover; }
.set-avatar--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent);
  color: var(--c-ink-inv);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
}

.set-members { display: flex; flex-direction: column; }
.set-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: var(--border);
}
.set-member:last-child { border-bottom: none; }
.set-member__id { display: flex; align-items: center; gap: var(--sp-2); }
.set-member__name { font-weight: var(--fw-medium); font-size: var(--fs-normal); }
.set-member__email { margin-left: var(--sp-1); font-size: var(--fs-xs); }
.set-member__actions { display: flex; align-items: center; gap: var(--sp-2); }

.set-invite { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.set-invite__row { display: flex; gap: var(--sp-2); }
.set-invite__row .input { flex: 1; }
.set-invites { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); }
.set-invite__pending {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: var(--border);
  font-size: var(--fs-normal);
}

.set-psa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }

/* Native select sizing to match .input */
.set-field select.input { height: 38px; }