/*
 * Healing Wisdom — shared tool controls
 * Requires: hw-ds-tokens.css
 *
 * Primitives: button, field, label, card, banner, choice
 * Use these instead of per-app reinventions (QR / Invoice are the reference).
 */

/* -------------------------------------------------------------------------- */
/* Motion                                                                     */
/* -------------------------------------------------------------------------- */

:root,
[data-hw-theme="light"],
.hw-tool-page {
  --hw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --hw-duration: 150ms;
  --hw-focus-ring: 0 0 0 3px color-mix(in srgb, var(--hw-tool-ocean) 22%, transparent);
  --hw-space-1: 4px;
  --hw-space-2: 8px;
  --hw-space-3: 12px;
  --hw-space-4: 16px;
  --hw-space-5: 24px;
  --hw-space-6: 32px;
  --hw-space-7: 48px;
  /* Density — override with data-hw-density="compact" on .hw-tool-page */
  --hw-density-pad-block: var(--hw-space-3);
  --hw-density-pad-inline: var(--hw-space-4);
  --hw-density-gap: var(--hw-space-4);
  --hw-density-control-pad-y: 11px;
  --hw-density-control-pad-x: 14px;
}

[data-hw-density="compact"] {
  --hw-density-pad-block: var(--hw-space-2);
  --hw-density-pad-inline: var(--hw-space-3);
  --hw-density-gap: var(--hw-space-3);
  --hw-density-control-pad-y: 8px;
  --hw-density-control-pad-x: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .hw-btn,
  .hw-field,
  .hw-card,
  .hw-choice {
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Label                                                                      */
/* -------------------------------------------------------------------------- */

.hw-label {
  display: block;
  font-family: var(--hw-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hw-tool-ocean);
  margin: 0 0 var(--hw-space-2);
  line-height: 1.3;
}

.hw-label--muted {
  color: var(--hw-tool-text-soft);
}

.hw-field-group {
  display: grid;
  gap: var(--hw-space-2);
  margin-bottom: var(--hw-density-gap);
}

.hw-field-group:last-child {
  margin-bottom: 0;
}

.hw-hint {
  margin: var(--hw-space-2) 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--hw-tool-text-soft);
  max-width: 42ch;
}

/* -------------------------------------------------------------------------- */
/* Field                                                                      */
/* -------------------------------------------------------------------------- */

.hw-field {
  display: block;
  width: 100%;
  padding: var(--hw-density-control-pad-y) var(--hw-density-control-pad-x);
  font-family: var(--hw-font-sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--hw-tool-ink);
  background: var(--hw-tool-white);
  border: 1px solid var(--hw-tool-line);
  border-radius: var(--hw-radius-sm);
  outline: none;
  transition:
    border-color var(--hw-duration) var(--hw-ease),
    box-shadow var(--hw-duration) var(--hw-ease);
}

.hw-field:hover {
  border-color: color-mix(in srgb, var(--hw-tool-ocean) 35%, var(--hw-tool-line));
}

.hw-field:focus,
.hw-field:focus-visible {
  border-color: var(--hw-tool-ocean);
  box-shadow: var(--hw-focus-ring);
}

.hw-field:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.hw-field--textarea {
  min-height: 5.5rem;
  resize: vertical;
}

select.hw-field {
  appearance: none;
  cursor: pointer;
  padding-right: 2.35rem;
}

/* -------------------------------------------------------------------------- */
/* Button                                                                     */
/* -------------------------------------------------------------------------- */

.hw-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hw-space-2);
  min-width: 0;
  padding: var(--hw-density-control-pad-y) 18px;
  font-family: var(--hw-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  border-radius: var(--hw-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--hw-duration) var(--hw-ease),
    border-color var(--hw-duration) var(--hw-ease),
    color var(--hw-duration) var(--hw-ease),
    box-shadow var(--hw-duration) var(--hw-ease);
}

.hw-btn:focus-visible {
  outline: none;
  box-shadow: var(--hw-focus-ring);
}

.hw-btn:disabled,
.hw-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.hw-btn--primary {
  background: var(--hw-tool-ocean);
  color: var(--hw-tool-white);
}

.hw-btn--primary:hover:not(:disabled) {
  background: #243968;
}

.hw-btn--primary:active:not(:disabled) {
  background: #1c2f56;
}

.hw-btn--secondary {
  background: color-mix(in srgb, var(--hw-tool-ocean) 8%, transparent);
  color: var(--hw-tool-ocean);
  border-color: color-mix(in srgb, var(--hw-tool-ocean) 18%, transparent);
}

.hw-btn--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--hw-tool-ocean) 12%, transparent);
}

.hw-btn--ghost {
  background: transparent;
  color: var(--hw-tool-ocean);
  border-color: var(--hw-tool-line);
}

.hw-btn--ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--hw-tool-ocean) 6%, transparent);
}

.hw-btn--block {
  width: 100%;
}

.hw-btn .ph {
  font-size: 1rem;
  line-height: 1;
}

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

.hw-card {
  background: var(--hw-tool-white);
  border: 1px solid var(--hw-tool-line);
  border-radius: var(--hw-radius-md);
  box-shadow: var(--hw-elevation-1);
  padding: var(--hw-space-5);
}

.hw-card--flush {
  padding: 0;
}

.hw-card--interactive {
  transition:
    border-color var(--hw-duration) var(--hw-ease),
    box-shadow var(--hw-duration) var(--hw-ease);
}

.hw-card--interactive:hover {
  border-color: color-mix(in srgb, var(--hw-tool-ocean) 35%, var(--hw-tool-line));
  box-shadow: var(--hw-elevation-hover);
}

/* -------------------------------------------------------------------------- */
/* Banner / status                                                            */
/* -------------------------------------------------------------------------- */

.hw-banner {
  display: none;
  margin-top: var(--hw-space-3);
  border-radius: var(--hw-radius-sm);
  border: 1px solid color-mix(in srgb, var(--hw-tool-ocean) 18%, transparent);
  background: color-mix(in srgb, var(--hw-tool-ocean) 6%, transparent);
  color: var(--hw-tool-ocean);
  padding: 10px 12px;
  font-size: 0.875rem;
  line-height: 1.4;
}

.hw-banner.is-visible {
  display: block;
}

.hw-banner--error {
  border-color: color-mix(in srgb, var(--hw-state-danger) 28%, transparent);
  background: color-mix(in srgb, var(--hw-state-danger) 8%, transparent);
  color: var(--hw-state-danger);
}

.hw-banner--success {
  border-color: color-mix(in srgb, var(--hw-state-success) 28%, transparent);
  background: color-mix(in srgb, var(--hw-state-success) 8%, transparent);
  color: var(--hw-state-success);
}

/* -------------------------------------------------------------------------- */
/* Choice (segmented / radio-tile)                                            */
/* -------------------------------------------------------------------------- */

.hw-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hw-choice {
  flex: 1 1 5.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--hw-font-mono);
  border: 1px solid var(--hw-tool-line);
  border-radius: var(--hw-radius-md);
  padding: 14px 12px;
  min-height: 118px;
  background: var(--hw-tool-white);
  color: var(--hw-tool-ocean);
  cursor: pointer;
  transition:
    border-color var(--hw-duration) var(--hw-ease),
    background var(--hw-duration) var(--hw-ease),
    box-shadow var(--hw-duration) var(--hw-ease),
    color var(--hw-duration) var(--hw-ease);
}

.hw-choice:hover {
  border-color: color-mix(in srgb, var(--hw-tool-ocean) 35%, var(--hw-tool-line));
  background: color-mix(in srgb, var(--hw-tool-ocean) 3%, transparent);
}

.hw-choice:focus-visible {
  outline: none;
  border-color: var(--hw-tool-ocean);
  box-shadow: var(--hw-focus-ring);
}

.hw-choice.is-selected,
.hw-choice[aria-checked="true"] {
  background: var(--hw-tool-ocean);
  color: var(--hw-tool-white);
  border-color: var(--hw-tool-ocean);
}

.hw-choice-label {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* Compact density for long docs                                              */
/* -------------------------------------------------------------------------- */

[data-hw-density="compact"] .hw-tool-body {
  padding-top: 24px;
  padding-bottom: 28px;
}

[data-hw-density="compact"] .hw-tool-tabs-btn {
  padding: 10px 12px 8px;
  font-size: 0.8125rem;
}

[data-hw-density="compact"] .hw-card {
  padding: var(--hw-space-4);
}