/*
 * The MVP component set.
 * This is deliberately short: button, field, card, badge, callout, code block, progress, note.
 * The product uses these same classes; the landing page adds no component of its own.
 */

/* ---- Button. ---- */
/* Answer controls are the most-used targets in the product, so the base size is generous. */
/* Fitts's Law: this is the one place where being bigger than necessary is correct. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--text-on-accent);
}

.btn--primary:active {
  background: var(--accent-active);
}

.btn--secondary {
  background: var(--surface-raised);
  color: var(--text-primary);
  border-color: var(--border-control);
}

.btn--secondary:hover {
  border-color: var(--border-accent);
  color: var(--text-primary);
}

/* The quiet variant is for the decline path. */
/* It stays fully legible: a "no" is never dimmed into a dead end. */
.btn--quiet {
  background: transparent;
  color: var(--text-primary);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.btn--quiet:hover {
  color: var(--text-accent);
}

.btn--lg {
  min-height: 3.25rem;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
}

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

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

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

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.field__input {
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  font: inherit;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.field__input::placeholder {
  color: var(--text-quiet);
}

.field__input:hover {
  border-color: var(--border-accent);
}

/* The hint sits under the label and is referenced by aria-describedby. */
.field__hint {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--status-error-text);
}

/* Error state is a border plus text, never colour alone. */
.field[data-invalid="true"] .field__input {
  border-color: var(--status-error-text);
  border-width: 2px;
}

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

.card {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.card--sunken {
  background: var(--surface-sunken);
}

.card--accent {
  background: var(--surface-accent-quiet);
  border-color: var(--border-accent);
}

.card--lead {
  padding: var(--space-6);
}

/* ---- Badge. ---- */

/* Inside a stack these would stretch to the column width, so they opt out once here. */
.badge,
.note {
  align-self: start;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.badge--accent {
  background: var(--surface-accent-quiet);
  color: var(--text-accent);
  border-color: var(--border-accent);
}

.badge--earned {
  background: var(--status-warn-surface);
  color: var(--status-warn-text);
  border-color: transparent;
}

.badge--ok {
  background: var(--status-ok-surface);
  color: var(--status-ok-text);
  border-color: transparent;
}

/* ---- Callout. ---- */

.callout {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--border-accent);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ---- Code. ---- */
/* Code is a deliberate treatment, not prose in a monospace font. */

.code {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  tab-size: 4;
}

.code .code__comment {
  color: var(--ink-400);
}

.code .code__keyword {
  color: var(--teal-200);
}

.code--inline {
  padding: 0.1em 0.35em;
  background: var(--surface-sunken);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ---- Progress. ---- */
/* Used for the daily goal and for mastery. */

.progress {
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--progress-track);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--progress-earned);
}

/* ---- Note. ---- */
/* A visible label for anything synthetic or provisional on a public surface. */
/* It exists so a mockup can never be mistaken for a live screenshot. */

.note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-quiet);
}