/* =============================================================================
   decision.css — Unified Decision joystick (one component, all decisions)

   Used on EVERY surface that asks the estimator to commit a number:
   - Decisions queue rows in workspace.html
   - "Why this number" drawer (drawer-item.html)
   - Finish-takeoff footer blocked rows (drawer-finish.html)
   - Compare-revisions differences (compare-revisions.html)
   - Sheet-viewer item actions (sheet-viewer.html)

   Markup contract (single copy-paste, identical every time):
     <div class="decision-row">
       <div class="decision-row__head">
         <span class="decision-row__what">Door D1</span>
         <span class="decision-row__why">Plan says 12 · Schedule says 14</span>
      </div>
       <div class="decision-actions">
         <button class="decision-pick decision-pick--plan" data-wire="DECISION use_plan">Use plan · 12</button>
         <button class="decision-pick decision-pick--schedule" data-wire="DECISION use_schedule">Use schedule · 14</button>
         <button class="decision-pick decision-pick--edit" data-wire="DECISION edit">Edit</button>
         <button class="decision-pick decision-pick--exclude" data-wire="DECISION exclude">Exclude</button>
         <button class="decision-pick decision-pick--defer" data-wire="DECISION defer">Defer</button>
      </div>
       <div class="decision-scope">
         <span class="decision-scope__label">Apply to</span>
         <select class="select decision-scope__pick">
           <option>This row only</option>
           <option>This item everywhere</option>
           <option>This run</option>
           <option>All revisions</option>
        </select>
         <button class="btn btn--primary btn--sm" data-wire="DECISION confirm">Confirm</button>
      </div>
    </div>
   ============================================================================= */

.decision-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--ink-800);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-4);
}
.decision-row + .decision-row { margin-top: var(--sp-4); }
.decision-row[data-severity="red"]    { border-color: var(--band-red-line); box-shadow: inset 2px 0 0 var(--band-red); }
.decision-row[data-severity="amber"]  { border-color: var(--band-amber-line); box-shadow: inset 2px 0 0 var(--band-amber); }
.decision-row[data-severity="grey"]   { border-color: var(--band-grey-line); box-shadow: inset 2px 0 0 var(--band-grey); }
.decision-row[data-severity="green"]  { border-color: var(--band-green-line); }

.decision-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.decision-row__what {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--paper);
  letter-spacing: var(--ls-tight);
}
.decision-row__why {
  font-size: var(--fs-sm);
  color: var(--paper-mute);
  max-width: 56ch;
}
.decision-row__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--paper);
}
.decision-row__qty {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--paper);
}

.decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.decision-pick {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--ctrl-h);
  padding: 0 var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--ink-750);
  color: var(--paper);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.01em;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.decision-pick:hover { border-color: var(--line-strong); background: var(--ink-700); }
.decision-pick b { font-family: var(--font-mono); font-weight: var(--fw-bold); }

.decision-pick--plan,
.decision-pick--schedule { border-color: var(--cyan-line); color: var(--cyan-bright); }
.decision-pick--plan:hover,
.decision-pick--schedule:hover { background: var(--cyan-ghost); }

.decision-pick--edit { color: var(--paper); }
.decision-pick--exclude {
  background: var(--band-red-soft);
  border-color: var(--band-red-line);
  color: var(--band-red);
}
.decision-pick--defer {
  background: var(--ink-700);
  border-color: var(--line);
  color: var(--paper-mute);
}

/* the scope picker row — kept private to this component */
.decision-scope {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-faint);
}
.decision-scope__label {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--paper-mute);
}
.decision-scope__pick {
  height: var(--ctrl-h);
  padding: 0 var(--sp-4);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  min-width: 160px;
}

/* compact: a Decisions queue uses .decision-row--mini to fit more rows per panel */
.decision-row--mini { padding: var(--sp-4); gap: var(--sp-3); }
.decision-row--mini .decision-row__what { font-size: var(--fs-sm); }
.decision-row--mini .decision-row__why  { font-size: var(--fs-xs); }
.decision-row--mini .decision-pick { height: var(--ctrl-h-sm); padding: 0 var(--sp-4); font-size: var(--fs-xs); }

/* "Locked" state — every decision answered, ready to finish */
.decision-row[data-state="done"] { opacity: 0.55; }
.decision-row[data-state="done"]::after {
  content: "Decided";
  display: inline-flex;
  align-items: center;
  height: var(--ctrl-h-sm);
  padding: 0 var(--sp-4);
  border: 1px solid var(--band-green-line);
  border-radius: var(--r-2);
  background: var(--band-green-soft);
  color: var(--band-green);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}

/* empty-queue banner — used when the row count drops to zero */
.decision-empty {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  padding: var(--sp-9);
  text-align: center;
  color: var(--paper-mute);
}
.decision-empty__glyph {
  width: 36px; height: 36px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--band-green-soft);
  border: 1px solid var(--band-green-line);
  color: var(--band-green);
  font-size: 18px;
}
.decision-empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--paper);
}