/* PROTOTYPE ONLY — states introduced by reconciliation review and closeout. */
.workspace-heading,
.workspace-toolbar,
.readiness-heading,
.review-card-actions,
.finalized-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.workspace-heading h4,
.readiness-heading h4,
.finalized-heading h4 {
  font-size: 12px;
}

.workspace-heading p,
.readiness-heading p,
.finalized-heading p {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 8px;
}

.workspace-services {
  min-width: 0;
}

.workspace-services .panel-header {
  border-bottom: 0;
}

.invoice-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.invoice-detail-head strong,
.invoice-detail-head small {
  display: block;
}

.invoice-detail-head strong { font-size: 10px; }
.invoice-detail-head small { color: var(--muted-foreground); font-size: 8px; }

.native-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.resolution-note {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--muted-foreground);
  font-size: 8px;
}

.service-money .money-sub {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 6.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-stack,
.finalized-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-card-actions {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.review-lines {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.review-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.review-line strong,
.review-line small { display: block; }
.review-line strong { font-size: 9px; }
.review-line small { margin-top: 2px; color: var(--muted-foreground); font-size: 7px; }
.review-line .money { font-size: 10px; font-weight: 800; }

.anomaly-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eed08f;
  border-radius: 15px;
  background: var(--warning-soft);
  color: var(--warning-ink);
}

.anomaly-card strong,
.anomaly-card small { display: block; }
.anomaly-card strong { font-size: 9px; }
.anomaly-card small { margin-top: 2px; font-size: 8px; }

.fx-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.fx-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.fx-card-head h4 { font-size: 11px; }
.fx-card-head p { margin-top: 2px; color: var(--muted-foreground); font-size: 8px; }

.missing-fx {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, auto);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #eed08f;
  border-radius: 15px;
  background: var(--warning-soft);
}

.missing-fx strong,
.missing-fx small { display: block; }
.missing-fx strong { color: var(--warning-ink); font-size: 9px; }
.missing-fx small { margin-top: 2px; color: var(--muted-foreground); font-size: 8px; }

.readiness-panel {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.readiness-groups {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.readiness-group {
  min-height: 98px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
}

.readiness-group.blocked {
  border-color: #eed08f;
  background: var(--warning-soft);
}

.readiness-group h5 {
  margin: 0;
  font-size: 9px;
}

.readiness-group > span {
  display: block;
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 7px;
}

.readiness-group .btn { margin-top: 8px; }

.final-metric-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.final-metric {
  padding: 12px;
  border-radius: 17px;
  background: var(--primary);
  color: white;
}

.final-metric:nth-child(2) { background: var(--success-ink); }
.final-metric:nth-child(3) { background: var(--accent); }
.final-metric:nth-child(4) { background: #283c72; }
.final-metric label { display: block; color: #c7c1df; font-size: 8px; text-transform: uppercase; }
.final-metric strong { display: block; margin-top: 5px; font-size: 14px; }
.final-metric small { display: block; margin-top: 2px; color: #ddd8ef; font-size: 8px; }

.locked-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid #eeeaf4;
}

.locked-line:last-child { border-bottom: 0; }
.locked-line strong { display: block; font-size: 9px; }
.locked-line small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 7px; }

.overlay-callout {
  margin-top: 11px;
  padding: 10px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 9px;
}

.toast-demo {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-left: auto;
  padding: 8px 11px;
  border-radius: var(--radius-control);
  background: var(--primary);
  color: white;
  font-size: 8px;
  box-shadow: var(--shadow-float);
}

@media (max-width: 1100px) {
  .readiness-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .readiness-groups,
  .final-metric-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .missing-fx { grid-template-columns: minmax(0, 1fr); }
  .review-line { grid-template-columns: minmax(0, 1fr) auto; }
}