/* D3: factoryScopeCard header/readiness presentation only.
 * Legacy declaration values are retained with local data-factory-scope selectors.
 * The six derived progress states use external CSS; no inline style is needed.
 */
.factory-card-head:where([data-factory-scope="header"]) {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.factory-card-head:where([data-factory-scope="header"]) strong {
  flex: 0 0 auto;
  min-width: 58px;
  padding: 7px 8px;
  border: 1px solid rgba(216,155,47,.24);
  border-radius: 999px;
  color: var(--gold-2, #f0c168);
  background: rgba(216,155,47,.08);
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
}

:where([data-factory-scope="header"]) .status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #050505;
  background: var(--gold, #d89b2f);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.factory-progress:where([data-factory-scope="readiness"]) {
  height: 8px;
  margin: 12px 0;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.factory-progress:where([data-factory-scope="readiness"]) span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold, #d89b2f), var(--gold-2, #f0c168));
}

.factory-progress[data-factory-scope="readiness"][data-complete="0"] span { width: 0%; }
.factory-progress[data-factory-scope="readiness"][data-complete="1"] span { width: 20%; }
.factory-progress[data-factory-scope="readiness"][data-complete="2"] span { width: 40%; }
.factory-progress[data-factory-scope="readiness"][data-complete="3"] span { width: 60%; }
.factory-progress[data-factory-scope="readiness"][data-complete="4"] span { width: 80%; }
.factory-progress[data-factory-scope="readiness"][data-complete="5"] span { width: 100%; }

.factory-checklist:where([data-factory-scope="readiness"]),
.factory-meta-row:where([data-factory-scope="readiness"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.factory-checklist:where([data-factory-scope="readiness"]) span,
.factory-meta-row:where([data-factory-scope="readiness"]) span {
  min-height: 28px;
  padding: 7px 9px;
  border: 1px solid rgba(216,155,47,.16);
  border-radius: 999px;
  color: var(--muted, #b9c4bf);
  background: rgba(0,0,0,.2);
  font-size: 11px;
  font-weight: 800;
}

.factory-checklist:where([data-factory-scope="readiness"]) span.done {
  color: #cfead6;
  border-color: rgba(76,138,98,.38);
  background: rgba(76,138,98,.14);
}

.factory-meta-row:where([data-factory-scope="readiness"]) { margin-top: 10px; }

.doc-flow-line:where([data-factory-scope="readiness"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.doc-flow-line:where([data-factory-scope="readiness"]) span {
  min-height: 28px;
  padding: 7px 9px;
  border: 1px solid rgba(216,155,47,.16);
  border-radius: 999px;
  color: var(--muted, #b9c4bf);
  background: rgba(0,0,0,.22);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.doc-flow-line:where([data-factory-scope="readiness"]) span.done {
  color: #d8f4df;
  border-color: rgba(76,138,98,.4);
  background: rgba(76,138,98,.15);
}

.doc-flow-line:where([data-factory-scope="readiness"]) span.warn {
  color: #ffd7a6;
  border-color: rgba(216,155,47,.42);
  background: rgba(216,155,47,.14);
}

/* New visible semantics and narrow-screen safety for these fragments only. */
.factory-readiness-summary:where([data-factory-scope="readiness"]) {
  margin: 12px 0 0;
  color: var(--muted, #b9c4bf);
  font-size: 13px;
  line-height: 1.5;
}

.factory-card-head:where([data-factory-scope="header"]) > div {
  min-width: 0;
}

:where([data-factory-scope="header"]) h4,
:where([data-factory-scope="header"]) strong,
:where([data-factory-scope="header"]) .status-pill,
[data-factory-scope="readiness"] {
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .factory-card-head:where([data-factory-scope="header"]) {
    flex-wrap: wrap;
  }

  .factory-card-head:where([data-factory-scope="header"]) strong {
    max-width: 100%;
  }
}