atlas-iac/dockerfiles/hermes-webui-hux/modes/styles.css

/* Scoped, inert-until-imported HUX-06 presentation. */
.hux-modes {
  color: inherit;
  container-type: inline-size;
}

.hux-modes-heading {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.hux-modes-heading h2 {
  font-size: 0.875rem;
  font-weight: 650;
  margin: 0;
}

.hux-modes-heading p,
.hux-route-pin-help {
  color: color-mix(in srgb, currentColor 58%, transparent);
  font-size: 0.6875rem;
  line-height: 1.45;
  margin: 0.2rem 0 0;
}

.hux-modes-active {
  background: color-mix(in srgb, #22d3ee 12%, transparent);
  border: 1px solid color-mix(in srgb, #22d3ee 34%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, currentColor 90%, #22d3ee);
  font-size: 0.6875rem;
  font-weight: 650;
  padding: 0.25rem 0.55rem;
  white-space: nowrap;
}

.hux-mode-grid {
  border: 0;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0.75rem 0 0;
  padding: 0;
}

.hux-mode-card {
  cursor: pointer;
  min-width: 0;
  position: relative;
}

.hux-mode-card input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.hux-mode-card-copy {
  background: color-mix(in srgb, currentColor 3%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 4.35rem;
  padding: 0.6rem;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.hux-mode-card-copy strong {
  font-size: 0.75rem;
}

.hux-mode-card-copy > span {
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-size: 0.625rem;
  line-height: 1.35;
}

.hux-mode-card input:checked + .hux-mode-card-copy {
  background: color-mix(in srgb, #22d3ee 8%, transparent);
  border-color: color-mix(in srgb, #22d3ee 62%, currentColor);
}

.hux-mode-card input:focus-visible + .hux-mode-card-copy,
.hux-route-pin select:focus-visible,
.hux-modes-advanced summary:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
}

.hux-mode-grid:disabled .hux-mode-card {
  cursor: not-allowed;
  opacity: 0.55;
}

.hux-modes-advanced {
  border-top: 1px solid color-mix(in srgb, currentColor 11%, transparent);
  font-size: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
}

.hux-modes-advanced summary {
  cursor: pointer;
  font-weight: 600;
}

.hux-modes-advanced-panel {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.65rem;
}

.hux-modes-advanced dl {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.hux-modes-advanced dl div {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(7rem, 0.35fr) 1fr;
}

.hux-modes-advanced dt {
  color: color-mix(in srgb, currentColor 56%, transparent);
}

.hux-modes-advanced dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.hux-route-pin {
  display: grid;
  gap: 0.3rem;
}

.hux-route-pin span {
  font-size: 0.6875rem;
  font-weight: 650;
}

.hux-route-pin select {
  background: color-mix(in srgb, currentColor 4%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 0.55rem;
  color: inherit;
  font: inherit;
  max-width: 100%;
  padding: 0.5rem 0.6rem;
}

.hux-modes-error {
  border: 1px solid color-mix(in srgb, #fb7185 50%, transparent);
  border-radius: 0.65rem;
  color: color-mix(in srgb, currentColor 88%, #fb7185);
  font-size: 0.75rem;
  margin: 0;
  padding: 0.65rem 0.75rem;
}

@container (max-width: 42rem) {
  .hux-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hux-mode-card-copy {
    transition: none;
  }
}