/**
 * Sena Design System v1.0
 * Decision Draft: the Decision Maker's co-building cards
 *
 * Requires: colors.css + theme.css + buttons.css + field.css + strategy-card.css
 * (the slider is the Decision Maker card's own, .cs-dm-slider, and the inputs
 * are .field-input, so a draft reads as the same family as the finished card)
 *
 * Markup comes from svelte/src/lib/chat/cards/decision-draft.js (draftHtml), listeners
 * from svelte/src/lib/chat/draft-wire.js. One card per setup step: a head, a
 * stepper, a read-only summary of the steps already agreed, the editable body
 * for this step inside a dashed well, and a footer with Sena's line and the
 * two buttons.
 *
 * A Card surface like .cs-artifact, made visibly a draft: "Draft" in the
 * eyebrow, dashed dots for the steps still to come and a dashed well around
 * the part that can still change. Once the user moves on the card freezes
 * (.is-done): the well turns solid, the controls go quiet and "Sent" shows.
 *
 * Divs and spans only, never p or li: the chat quotes a clicked paragraph or
 * list item into the composer and tints it on hover. .sena-text also styles
 * tables, headings and lists, so every rule that has to beat it is prefixed
 * with .dm-draft.
 */

.dm-draft,
.dm-draft *,
.dm-draft *::before,
.dm-draft *::after {
  box-sizing: border-box;
}

.dm-draft {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
  background: var(--bg-card);
  border: 1px solid var(--stroke-card);
  border-radius: var(--spacing-16);
  box-shadow: var(--shadow-card);
  margin: var(--spacing-12) 0;
  /* Rows re-lay themselves out on a narrow card (@container below). */
  container-type: inline-size;
  font-size: var(--text-base);
  color: var(--text-primary);
  /* .sena-text's letter-spacing is inherited and breaks the icon glyphs and
     the field text alike. */
  letter-spacing: normal;
  text-transform: none;
}

@media (max-width: 480px) {
  .dm-draft { padding: var(--spacing-16); }
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.dm-draft-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
.dm-draft-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.dm-draft-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 1.3;
}
.dm-draft-decision {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ─── Stepper ────────────────────────────────────────────────────────────── */
/* Dots and labels that wrap, so four steps still fit a 375px phone. The step
   label is the whole story for a screen reader (the current one carries
   aria-current), and .dm-draft-sr adds "Step 2 of 4". */
.dm-draft-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.dm-draft-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8) var(--spacing-16);
}
.dm-draft-step {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.dm-draft-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px dashed var(--stroke-primary);
  font-size: var(--text-xs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dm-draft-dot i {
  font-size: 10px;
  letter-spacing: normal;
  text-transform: none;
}
.dm-draft-step.is-done { color: var(--text-secondary); }
.dm-draft-step.is-done .dm-draft-dot {
  border-style: solid;
  border-color: var(--bg-accent);
  background: var(--bg-accent);
  color: var(--fg-on-accent);
}
.dm-draft-step.is-current { color: var(--text-primary); }
.dm-draft-step.is-current .dm-draft-step-label { font-weight: var(--fw-bold); }
.dm-draft-step.is-current .dm-draft-dot {
  border-style: solid;
  border-color: var(--fg-accent);
  background: var(--bg-accent-light);
  color: var(--text-accent);
}

/* ─── What the earlier steps agreed ──────────────────────────────────────── */
.dm-draft-summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.dm-draft-sum {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--spacing-12);
  align-items: baseline;
}
.dm-draft-sum-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.dm-draft-sum-val {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6);
  min-width: 0;
}
.dm-draft-sum-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--text-secondary);
}
.dm-draft-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-2) var(--spacing-8);
  border-radius: 999px;
  border: 1px solid var(--stroke-secondary);
  background: var(--bg-secondary);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.dm-draft-chip-x { padding-right: var(--spacing-2); }

/* ─── The editable body ──────────────────────────────────────────────────── */
.dm-draft-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  min-width: 0;
  padding: var(--spacing-16);
  border: 1px dashed var(--stroke-primary);
  border-radius: var(--spacing-12);
}
@media (max-width: 480px) {
  .dm-draft-body { padding: var(--spacing-12); }
}
.dm-draft-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  min-width: 0;
}
.dm-draft-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
.dm-draft-mini {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.dm-draft-note {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.4;
}
.dm-draft-static {
  padding-block: var(--spacing-6);
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.dm-draft-inline { max-width: 160px; }
.dm-draft-hint-line,
.dm-draft-hint {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Inputs are the app's fields (field.css), a little tighter so a row of them
   fits the chat column. Their size on a touch phone is screen.css's rule. */
.dm-draft .dm-draft-input,
.dm-draft .dm-draft-select,
.dm-draft .dm-draft-area,
.dm-draft .dm-draft-num {
  min-width: 0;
  padding: var(--spacing-6) var(--spacing-8);
}
.dm-draft .dm-draft-select { padding-right: var(--spacing-32); }
.dm-draft .dm-draft-area {
  resize: vertical;
  min-height: 0;
  line-height: 1.4;
}
.dm-draft .dm-draft-num {
  width: 96px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dm-draft .dm-draft-score { width: 64px; }
.dm-draft .dm-draft-pair .dm-draft-select { width: 100%; }
.dm-draft .field-input[aria-invalid="true"] { border-color: var(--fg-error); }

/* Rows: a main text, then whatever else the step edits, then Remove. */
.dm-draft-rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.dm-draft-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-8);
  align-items: start;
}
.dm-draft-row-weight { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
/* The two axes carry a caption above their name; the inputs line up at the
   bottom of the row. */
.dm-draft-row-unc {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  align-items: end;
}
.dm-draft-row-opt { grid-template-columns: 116px minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.dm-draft-row-cause { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) auto; }
.dm-draft-row-evo {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
}
.dm-draft-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}
.dm-draft-pair {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  min-width: 0;
}
.dm-draft-ends,
.dm-draft-levels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-8);
}
.dm-draft-axis {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* The weight slider is the finished card's (.cs-dm-slider, .cs-dm-track,
   .cs-dm-val in strategy-card.css): an accent fill up to the thumb via --fill. */
.dm-draft-weight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: var(--spacing-12);
  align-items: center;
  /* As tall as the name field beside it, so the slider sits level with it
     even when that row carries a note under the name. */
  min-height: 34px;
}
.dm-draft .dm-draft-slider { min-width: 0; }
.dm-draft .dm-draft-slider:disabled {
  cursor: default;
  opacity: 0.6;
}
.dm-draft-rate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 48px;
  gap: var(--spacing-12);
  align-items: center;
}

/* Remove: icon only, with a hit area a thumb can find. */
.dm-draft-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: start;
  width: 32px;
  height: 32px;
  margin-top: var(--spacing-2);
  padding: 0;
  border: 0;
  border-radius: var(--spacing-8);
  background: transparent;
  color: var(--fg-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}
.dm-draft-icon i { letter-spacing: normal; text-transform: none; }
.dm-draft-icon:hover:not(:disabled) {
  background: var(--bg-error-subtle);
  color: var(--fg-error);
}
.dm-draft-icon:active:not(:disabled) { transform: scale(0.94); }
.dm-draft-icon:focus-visible {
  outline: 2px solid var(--fg-accent);
  outline-offset: 2px;
}
.dm-draft-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.dm-draft-row-unc > .dm-draft-icon { align-self: end; margin-top: 0; }
.dm-draft-icon-sm {
  width: 20px;
  height: 20px;
  margin: 0;
  align-self: center;
  font-size: 10px;
}
@media (pointer: coarse) {
  .dm-draft-icon { width: 40px; height: 40px; }
  .dm-draft-icon-sm { width: 28px; height: 28px; }
}

.dm-draft-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}
.dm-draft-add {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}
.dm-draft-add .dm-draft-input { flex: 1; }

/* ─── Tables: options by criteria, options by year ───────────────────────── */
/* They scroll inside their own wrapper, never the page. .sena-text styles
   every table (a border, padding, a hover tint, display:block on a phone), so
   these rules undo it by being more specific. */
.dm-draft-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}
.dm-draft .dm-draft-table {
  display: table;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.dm-draft .dm-draft-table th,
.dm-draft .dm-draft-table td {
  padding: var(--spacing-6) var(--spacing-8);
  border-bottom: 1px solid var(--stroke-card);
  background: transparent;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.dm-draft .dm-draft-table thead th {
  border-bottom: 1px solid var(--stroke-primary);
  color: var(--text-secondary);
  font-weight: var(--fw-bold);
  /* A long criterion or "Weighted total" wraps rather than pushing the table
     wider than the card. */
  white-space: normal;
  vertical-align: bottom;
}
.dm-draft .dm-draft-table tbody th {
  min-width: 96px;
  white-space: normal;
}
.dm-draft .dm-draft-table td strong {
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.dm-draft .dm-draft-table tbody tr:hover { background: transparent; }
.dm-draft .dm-draft-table tbody tr:last-child th,
.dm-draft .dm-draft-table tbody tr:last-child td { border-bottom: 0; }
.dm-draft .dm-draft-table tr.is-win th,
.dm-draft .dm-draft-table tr.is-win td { background: var(--bg-accent-light); }
.dm-draft .dm-draft-table tr.is-win th { font-weight: var(--fw-bold); }
.dm-draft-sub {
  display: block;
  font-weight: var(--fw-regular);
  color: var(--text-tertiary);
}

/* ─── Four futures: a 2 by 2 ─────────────────────────────────────────────── */
.dm-draft-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-12);
}
.dm-draft-quad {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
  padding: var(--spacing-12);
  border: 1px solid var(--stroke-card);
  border-radius: var(--spacing-12);
}
.dm-draft-quad-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.dm-draft-foot {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}
.dm-draft-message {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.5;
}
.dm-draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}
.dm-draft-done {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.dm-draft-done i {
  font-size: var(--text-sm);
  letter-spacing: normal;
  text-transform: none;
  color: var(--fg-accent);
}

/* ─── Frozen: a record of what was sent ──────────────────────────────────── */
.dm-draft.is-done .dm-draft-body {
  border-style: solid;
  border-color: var(--stroke-card);
}
.dm-draft.is-done .dm-draft-icon,
.dm-draft.is-done .dm-draft-add { display: none; }
.dm-draft.is-done .dm-draft-slider { cursor: default; }

/* ─── Narrow card: the rows stack ────────────────────────────────────────── */
/* The card is its own container (container-type above), so these follow the
   chat column, not the screen: a draft in a wide column on a phone held
   sideways keeps the roomy rows. */
@container (max-width: 480px) {
  .dm-draft-sum { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-4); }
  .dm-draft-row-weight { grid-template-columns: minmax(0, 1fr) auto; }
  .dm-draft-row-weight > .dm-draft-main { grid-column: 1 / -1; }
  .dm-draft-row-unc { grid-template-columns: minmax(0, 1fr) auto; }
  .dm-draft-row-unc > .dm-draft-ends { grid-column: 1 / -1; grid-row: 2; }
  .dm-draft-row-unc > .dm-draft-icon { grid-column: 2; grid-row: 1; }
  /* The name first and full width, then the type, then the trigger. */
  .dm-draft-row-opt { grid-template-columns: minmax(0, 1fr) auto; }
  .dm-draft-row-opt > .dm-draft-main { grid-column: 1; grid-row: 1; }
  .dm-draft-row-opt > .dm-draft-icon { grid-column: 2; grid-row: 1; }
  .dm-draft-row-opt > .dm-draft-pair { grid-column: 1; grid-row: 2; max-width: 160px; }
  .dm-draft-row-opt > .dm-draft-trigger { grid-column: 1 / -1; grid-row: 3; }
  /* Rows that stack in several lines need more air between them than within. */
  .dm-draft-rows:has(.dm-draft-row-unc, .dm-draft-row-opt, .dm-draft-row-cause, .dm-draft-row-evo) { gap: var(--spacing-16); }
  .dm-draft-row-cause { grid-template-columns: minmax(0, 1fr) auto; }
  .dm-draft-row-cause > .dm-draft-levels { grid-column: 1 / -1; grid-row: 2; }
  .dm-draft-row-cause > .dm-draft-icon { grid-column: 2; grid-row: 1; }
  .dm-draft-row-evo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dm-draft-row-evo > .dm-draft-static { grid-column: 1 / -1; padding-bottom: 0; }
  .dm-draft-grid { grid-template-columns: minmax(0, 1fr); }
  .dm-draft-rate { grid-template-columns: minmax(0, 1fr) 48px; }
  .dm-draft-rate > .dm-draft-label { grid-column: 1 / -1; }
}

/* hidden must win over every display rule above. */
.dm-draft [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .dm-draft-icon { transition: none; }
  .dm-draft-icon:active:not(:disabled) { transform: none; }
}