/* Shared Powder Sky components. Tokens live only in app.css :root. */

.flash, .inline-message {
  padding: 14px 16px;
  font-weight: 500;
  background: var(--state-info-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
}
.flash.ok, .inline-message.success { color: var(--state-success); background: var(--state-success-bg); border-color: transparent; }
.flash.err, .inline-message.danger { color: var(--state-danger); background: var(--state-danger-bg); border-color: transparent; }
.flash.info, .inline-message.info { color: var(--state-info); background: var(--state-info-bg); border-color: transparent; }
.flash.warning, .inline-message.warning { color: var(--state-warning); background: var(--state-warning-bg); border-color: transparent; }

.empty, .empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 48px 24px;
  color: var(--text-secondary);
  text-align: center;
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.empty-state-mark {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-sky);
  color: var(--action-primary);
  font-size: 28px;
}
.empty-state-title { margin: 4px 0 0; font-size: var(--type-h3); }
.empty p, .empty-state p { margin: 0; max-width: 48ch; }
.empty-state-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2);
  margin-top: var(--space-2);
}

.page-header, .section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.page-header { padding-block: var(--space-3) var(--space-2); }
.page-header-copy { display: grid; gap: var(--space-2); max-width: 68ch; }
.page-header .page-h, .section-header .section-h { margin: 0; }
.page-eyebrow, .section-eyebrow {
  margin: 0;
  color: var(--action-primary);
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-summary, .section-summary { margin: 0; color: var(--text-secondary); }
.page-header-actions, .section-header-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.surface-card {
  padding: clamp(var(--space-5), 4vw, var(--space-8));
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.stat-card {
  min-width: 0;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-1);
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.stat-card:nth-child(4n+1) { background: var(--surface-sky); }
.stat-card:nth-child(4n+2) { background: var(--surface-meadow); }
.stat-card:nth-child(4n+3) { background: var(--surface-lilac); }
.stat-card:nth-child(4n+4) { background: var(--surface-butter); }
.stat-card-value { font-size: clamp(26px, 4vw, 36px); line-height: 1.1; }
.stat-card-label { color: var(--text-secondary); font-size: var(--type-small); }

.field { display: grid; gap: var(--space-2); }
.field > label { font-size: var(--type-small); font-weight: 700; }
.field-message {
  color: var(--text-secondary); font-weight: 500; font-size: 12.5px;
  min-height: 1.45em;
}
.field-message.field-err { color: var(--state-danger); }
.check-field, .radio-field { gap: 0; }
.check-row {
  min-height: 44px;
  display: flex; flex-direction: row; align-items: center; gap: var(--space-3);
  cursor: pointer;
}
.check-row input {
  width: 20px; height: 20px; flex: none; accent-color: var(--action-primary);
}
.field-price-control { position: relative; display: flex; align-items: center; }
.field-price-control input { padding-inline-end: 64px; }
.field-price-control > span {
  position: absolute; inset-inline-end: var(--space-4); color: var(--text-secondary);
}
.form-section {
  margin: 0;
  padding: clamp(var(--space-5), 4vw, var(--space-8));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.form-section legend {
  padding-inline: var(--space-2); font-size: var(--type-h3); font-weight: 700;
}
.form-section-hint { margin: 0 0 var(--space-4); color: var(--text-secondary); }
.form-section-fields { display: grid; gap: var(--space-4); }
.modal-dialog {
  width: min(680px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-raised);
}
.modal-dialog::backdrop {
  background: color-mix(in srgb, var(--overlay-ink) 58%, transparent);
}
.modal-dialog-head {
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.modal-dialog-head h2 { margin: 0; font-size: var(--type-h3); }
.modal-dialog-body { padding: var(--space-5); overflow: auto; }