/*
 * decision -- tool-specific styles.
 *
 * The three step panels, the matrix and the ranking card. Colours are the
 * tokens from src/tailwind/input.css, so the dark theme needs no twin rules.
 * Shared documentation styles live in src/stemkit-docs.css.
 */

/* A component with its own display value would beat the hidden attribute. */
.dm-panel[hidden], #matrix-wrapper[hidden], .dm-empty[hidden], .dm-error[hidden], .dm-note[hidden] { display: none; }

.dm-panel {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
  padding: 1.5rem;
  border-radius: var(--stk-radius-xl);
  border: 1px solid var(--stk-border);
  background: var(--stk-surface);
  box-shadow: var(--stk-shadow-sm);
}

/* Step 1 ---------------------------------------------------------------------- */
.dm-field { display: flex; flex-direction: column; gap: 0.4rem; }
.dm-field label { font-size: 0.875rem; font-weight: 600; color: var(--stk-fg-2); }
.dm-field input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: var(--stk-radius-lg);
  border: 1px solid var(--stk-border-strong);
  background: var(--stk-surface-2);
  color: var(--stk-fg);
  font-size: 0.9375rem;
  transition: border-color var(--stk-ease), box-shadow var(--stk-ease);
}
.dm-field input::placeholder { color: var(--stk-fg-muted); }
.dm-field input:focus { outline: none; border-color: var(--stk-accent); box-shadow: 0 0 0 3px var(--stk-ring); }
.dm-field input[aria-invalid="true"] { border-color: var(--stk-danger); }
.dm-hint { font-size: 0.8125rem; line-height: 1.5; color: var(--stk-fg-3); margin: 0; }
.dm-error { display: flex; gap: 0.45rem; align-items: flex-start; margin: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.45; color: var(--stk-danger); }
.dm-error i { margin-top: 0.2rem; }

/* Step 2 ---------------------------------------------------------------------- */
.dm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
  text-align: center;
  border: 1.5px dashed var(--stk-border-strong);
  border-radius: var(--stk-radius-lg);
}
.dm-empty p { max-width: 30rem; font-size: 0.9375rem; line-height: 1.55; color: var(--stk-fg-3); margin: 0; }
.dm-empty-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--stk-radius-lg);
  background: var(--stk-accent-soft);
  color: var(--stk-accent-text);
  font-size: 1.1rem;
}

#matrix-wrapper { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.dm-matrix { overflow-x: auto; margin: 0 -0.25rem; padding: 0 0.25rem; }
.dm-table { width: 100%; min-width: 32rem; border-collapse: collapse; text-align: left; }
.dm-table th, .dm-table td { padding: 0.6rem 0.75rem; vertical-align: bottom; }
.dm-table thead tr { border-bottom: 2px solid var(--stk-border); }
.dm-table tbody tr { border-bottom: 1px solid var(--stk-border); }
.dm-table tbody tr:last-child { border-bottom: 0; }
.dm-table tbody tr:hover { background: var(--stk-surface-2); }
.dm-corner { font-size: 0.8125rem; font-weight: 600; color: var(--stk-fg-3); }
.dm-crit { display: block; font-weight: 700; color: var(--stk-fg); margin-bottom: 0.35rem; overflow-wrap: anywhere; }
.dm-weight { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--stk-fg-3); }
.dm-opt { min-width: 7rem; font-weight: 700; color: var(--stk-fg); overflow-wrap: break-word; vertical-align: middle !important; }
.dm-num {
  width: 3.75rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--stk-radius);
  border: 1px solid var(--stk-border-strong);
  background: var(--stk-surface-2);
  color: var(--stk-fg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dm-num:focus { outline: none; border-color: var(--stk-accent); box-shadow: 0 0 0 3px var(--stk-ring); }
/* Outside its range while it is being typed; replaced by Rank the options. */
.dm-num[aria-invalid="true"] { border-color: var(--stk-danger); background: var(--stk-danger-soft); }
.dm-num.is-corrected { border-color: var(--stk-warn); background: var(--stk-warn-soft); }
.dm-note {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.65rem 0.8rem;
  border-radius: var(--stk-radius-lg);
  border: 1px solid var(--stk-warn-border);
  background: var(--stk-warn-soft);
  color: var(--stk-fg-2);
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.dm-note i { margin-top: 0.25rem; color: var(--stk-warn); }
.dm-actions { display: flex; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--stk-border); }
@media (max-width: 479px) { .dm-actions > button { width: 100%; } }

/* Step 3 ---------------------------------------------------------------------- */
.dm-result-label { font-size: 0.8125rem; font-weight: 600; color: var(--stk-fg-3); margin: 0; }
.dm-result-name {
  margin: 0.15rem 0 0.35rem;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--stk-accent-text);
  overflow-wrap: anywhere;
}
.dm-result-sub { font-size: 0.875rem; color: var(--stk-fg-3); margin: 0; }
.dm-rank { list-style: none; margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--stk-border); display: flex; flex-direction: column; gap: 0.9rem; }
.dm-rank-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.35rem; }
.dm-rank-name { font-weight: 600; color: var(--stk-fg-2); overflow-wrap: anywhere; }
.dm-rank-name b { font-family: var(--stk-font-mono); font-size: 0.75rem; font-weight: 600; color: var(--stk-fg-muted); margin-right: 0.35rem; }
.dm-tied { margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 999px; border: 1px solid var(--stk-border-strong); font-size: 0.6875rem; font-weight: 600; color: var(--stk-fg-3); white-space: nowrap; }
.dm-rank-score { flex-shrink: 0; font-family: var(--stk-font-mono); font-size: 0.8125rem; color: var(--stk-fg-3); font-variant-numeric: tabular-nums; }
.dm-bar { height: 0.55rem; border-radius: 999px; background: var(--stk-surface-3); overflow: hidden; }
.dm-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--stk-fg-faint); }
.dm-rank li.is-top .dm-rank-name { color: var(--stk-accent-text); }
.dm-rank li.is-top .dm-bar > span { background: var(--stk-accent); }
.dm-copy { margin-top: 1.25rem; align-self: flex-start; }