/* OpenSquilla Web UI — Health readiness center. */

.health-layout,
.health-stage {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: none;
  position: relative;
}

.health-stage__header {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  padding-top: var(--sp-3);
}

.health-stage__title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.health-stage__header h2 {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--lh-display);
  margin: 0;
  position: relative;
}

.health-stage__header h2::after {
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
  bottom: -8px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 36px;
}

.health-stage__header p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: var(--sp-3) 0 0;
}

.health-eyebrow {
  color: var(--text-dim);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.health-status__rail {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: minmax(250px, 1.1fr) minmax(0, 2.4fr);
}

.health-score,
.health-count,
.health-finding,
.health-empty {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  overflow: hidden;
  position: relative;
}

.health-score {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 116px;
  padding: var(--sp-5);
}

.health-score::before {
  background: var(--border);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 4px;
}

.health-status__rail.is-action_required .health-score::before,
.health-count.is-blocks_ready::before,
.health-count.is-error::before,
.health-finding.is-error .health-finding__dot {
  background: var(--danger);
}

.health-status__rail.is-degraded .health-score::before,
.health-count.is-degrades::before,
.health-count.is-warn::before,
.health-finding.is-warn .health-finding__dot {
  background: var(--warn);
}

.health-count.is-optional::before,
.health-count.is-info::before,
.health-finding.is-info .health-finding__dot {
  background: var(--accent);
}

.health-status__rail.is-ready .health-score::before,
.health-count.is-none::before,
.health-count.is-ok::before,
.health-finding.is-ok .health-finding__dot {
  background: var(--ok);
}

.health-status__rail.is-unavailable .health-score::before {
  background: var(--danger);
}

.health-score__label,
.health-count span {
  color: var(--text-dim);
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.health-score strong {
  display: block;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.35rem);
  letter-spacing: 0;
  line-height: 1.12;
  margin-top: var(--sp-2);
}

.health-score__summary {
  color: var(--text-muted);
  display: block;
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
  min-width: 0;
  overflow-wrap: anywhere;
}

.health-report-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-3);
  min-width: 0;
}

.health-report-context__item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-grid;
  font-family: var(--font-mono);
  font-size: 11px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  line-height: 1.5;
  max-width: 100%;
  min-width: 0;
  padding: 3px 7px;
}

.health-report-context b {
  color: var(--text-dim);
  font-family: inherit;
  font-weight: 700;
}

.health-report-context__value {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.health-count-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.health-count {
  min-height: 116px;
  padding: var(--sp-4);
}

.health-count::before {
  background: var(--border);
  border-radius: 999px;
  content: "";
  height: 8px;
  position: absolute;
  right: var(--sp-4);
  top: var(--sp-4);
  width: 8px;
}

.health-count strong {
  display: block;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.12;
  margin-top: var(--sp-4);
}

.health-findings {
  display: grid;
  gap: var(--sp-3);
}

.health-finding-group {
  display: grid;
  gap: var(--sp-3);
}

.health-finding-group__header {
  align-items: end;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: var(--sp-3);
  justify-content: space-between;
  padding: 0 2px var(--sp-2);
}

.health-finding-group__header h3 {
  font-size: var(--fs-md);
  letter-spacing: 0;
  margin: 0;
}

.health-finding-group__header p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: 3px 0 0;
}

.health-finding-group__header span {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.health-finding {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 20px minmax(0, 1fr);
  padding: var(--sp-4);
}

.health-finding__marker {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.health-finding__dot {
  background: var(--text-dim);
  border-radius: 999px;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 10%, transparent);
  display: block;
  height: 10px;
  width: 10px;
}

.health-finding__line {
  background: var(--border);
  border-radius: 999px;
  flex: 1;
  min-height: 32px;
  width: 1px;
}

.health-finding__body {
  min-width: 0;
}

.health-finding__meta {
  align-items: center;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  font-size: 10.5px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.12em;
  min-width: 0;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.health-impact,
.health-surface,
.health-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  display: inline-flex;
  letter-spacing: 0.08em;
  padding: 2px 8px;
}

.health-chip {
  color: var(--warn);
}

.health-chip--diagnostic {
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
  color: var(--warn);
}

.health-chip--repair {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  color: var(--accent);
}

.health-chip--config {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-color: color-mix(in srgb, var(--danger) 36%, var(--border));
  color: var(--danger);
}

.health-finding__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0;
  margin-top: var(--sp-2);
  min-width: 0;
  overflow-wrap: anywhere;
}

.health-finding__detail {
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.health-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-3);
  min-width: 0;
  overflow-wrap: anywhere;
}

.health-evidence span {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 11px;
  gap: 6px;
  line-height: 1.5;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 3px 7px;
}

.health-evidence b {
  color: var(--text-dim);
  font-family: inherit;
  font-weight: 700;
}

.health-steps {
  display: grid;
  gap: 8px;
  margin-top: var(--sp-3);
}

.health-steps__heading {
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.health-steps ol {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.health-step {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 24px minmax(0, 1fr);
}

.health-step__number {
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 11px;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.health-step__body {
  color: var(--text-muted);
  min-width: 0;
}

.health-step__body b {
  color: var(--text);
  display: inline-block;
  margin-right: 8px;
}

.health-step__body code {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  display: inline-block;
  font-size: 12px;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 3px 7px;
}

.health-step__command {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

.health-step__copy {
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  width: 40px;
}

.health-step__copy:hover {
  background: var(--bg-panel);
  border-color: var(--accent);
  color: var(--text);
}

.health-step__copy svg {
  height: 14px;
  width: 14px;
}

.health-step__detail {
  display: block;
  margin-top: 3px;
}

.health-empty {
  color: var(--text-muted);
  padding: var(--sp-4);
}

.health-finding.is-error {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
}

.health-finding.is-warn {
  border-color: color-mix(in srgb, var(--warn) 42%, var(--border));
}

.health-finding.is-info {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
}

.health-finding.is-ok {
  border-color: color-mix(in srgb, var(--ok) 42%, var(--border));
}

@media (max-width: 980px) {
  .health-status__rail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .health-stage__header {
    align-items: stretch;
    flex-direction: column;
  }

  .health-stage__header .btn {
    align-self: flex-start;
    width: auto;
  }

  .health-count-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .health-finding {
    grid-template-columns: 16px minmax(0, 1fr);
    padding: var(--sp-3);
  }
}

@media (max-width: 480px) {
  .health-report-context {
    display: grid;
  }

  .health-report-context__item {
    gap: 2px;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .health-step__command {
    display: flex;
    width: 100%;
  }

  .health-step__command code {
    flex: 1 1 auto;
    min-width: 0;
  }
}